@stytch/nextjs 5.0.0 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @stytch/nextjs
 
+## 5.0.2
+
+### Patch Changes
+
+- 0d80d2e: Fix for the onEvent callback while creating a new organization in the B2B SDK UI. Missing export for the nextjs B2B package
+- Updated dependencies [0d80d2e]
+  - @stytch/vanilla-js@0.13.4
+
+## 5.0.1
+
+### Patch Changes
+
+- 8c54ee1: Missing export in the nextjs SDK for the UI component
+
 ## 5.0.0
 
 ### Minor Changes

package/dist/b2b/index.d.ts

@@ -2,7 +2,9 @@
 import React from "react";
 import { ReactNode } from "react";
 import { StytchB2BHeadlessClient, StytchB2BUIClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 import { StytchB2BHeadlessClient as StytchB2BHeadlessClient$0 } from "@stytch/vanilla-js/b2b";
+import { StytchB2BUIClient as StytchB2BUIClient$0 } from "@stytch/vanilla-js/b2b";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -101,6 +103,108 @@ interface StytchB2BProviderProps {
  * )
  */
 declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+interface StytchB2BProps {
+    /**
+     * An optional {@link StyleConfig} to customize the look and feel of the screen.
+     *
+     * @example
+     * {
+     *    fontFamily: 'Arial, Helvetica, sans-serif',
+     *    width: '360px',
+     *    primaryColor: '#19303D',
+     * }
+     */
+    styles?: StyleConfig;
+    /**
+     * An optional {@link Callbacks} object.
+     *
+     * @example
+     * {
+     *   onError: ({message}) => {
+     *      console.error('Stytch error', message)
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   onEvent: ({type, data}) => {
+     *     if(type === StytchEventType.B2BMagicLinkAuthenticate) {
+     *       console.log('Logged in with', data);
+     *     }
+     *   }
+     * }
+     */
+    callbacks?: Callbacks;
+    /**
+     * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
+     *
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks'],
+     *   authFlowType: "Discovery",
+     *   emailMagicLinksOptions: {
+     *     discoveryRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks', 'sso'],
+     *   authFlowType: "Organization",
+     *   emailMagicLinksOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   ssoOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     */
+    config: StytchB2BUIConfig;
+}
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => JSX.Element;
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.
  * The Stytch client is not available serverside.
@@ -115,5 +219,20 @@ declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps)
  * @returns A {@link StytchHeadlessClient}
  */
 declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient$0;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, createStytchB2BHeadlessClient };
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient$0;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B, createStytchB2BHeadlessClient, createStytchB2BUIClient };
 export type { StytchB2BProviderProps };

package/dist/b2b/index.esm.d.ts

@@ -2,7 +2,9 @@
 import React from "react";
 import { ReactNode } from "react";
 import { StytchB2BHeadlessClient, StytchB2BUIClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 import { StytchB2BHeadlessClient as StytchB2BHeadlessClient$0 } from "@stytch/vanilla-js/b2b";
+import { StytchB2BUIClient as StytchB2BUIClient$0 } from "@stytch/vanilla-js/b2b";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -101,6 +103,108 @@ interface StytchB2BProviderProps {
  * )
  */
 declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
+interface StytchB2BProps {
+    /**
+     * An optional {@link StyleConfig} to customize the look and feel of the screen.
+     *
+     * @example
+     * {
+     *    fontFamily: 'Arial, Helvetica, sans-serif',
+     *    width: '360px',
+     *    primaryColor: '#19303D',
+     * }
+     */
+    styles?: StyleConfig;
+    /**
+     * An optional {@link Callbacks} object.
+     *
+     * @example
+     * {
+     *   onError: ({message}) => {
+     *      console.error('Stytch error', message)
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   onEvent: ({type, data}) => {
+     *     if(type === StytchEventType.B2BMagicLinkAuthenticate) {
+     *       console.log('Logged in with', data);
+     *     }
+     *   }
+     * }
+     */
+    callbacks?: Callbacks;
+    /**
+     * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.
+     *
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks'],
+     *   authFlowType: "Discovery",
+     *   emailMagicLinksOptions: {
+     *     discoveryRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks', 'sso'],
+     *   authFlowType: "Organization",
+     *   emailMagicLinksOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   ssoOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   },
+     *   sessionOptions: {
+     *     sessionDurationMinutes: 60,
+     *   },
+     * }
+     */
+    config: StytchB2BUIConfig;
+}
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => JSX.Element;
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.
  * The Stytch client is not available serverside.
@@ -115,5 +219,20 @@ declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps)
  * @returns A {@link StytchHeadlessClient}
  */
 declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient$0;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, createStytchB2BHeadlessClient };
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient$0;
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B, createStytchB2BHeadlessClient, createStytchB2BUIClient };
 export type { StytchB2BProviderProps };

package/dist/b2b/index.esm.js

@@ -1,6 +1,9 @@
-import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
+import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
 const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
 The Stytch Javascript SDK is intended to ony be used on the client side.
 Make sure to wrap your API calls in a hook to ensure they are executed on the client.
@@ -80,6 +83,9 @@ const StytchContext = createContext({ isMounted: false });
 const StytchMemberContext = createContext(initialMember);
 const StytchMemberSessionContext = createContext(initialMemberSession);
 const useIsMounted__INTERNAL = () => useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
 /**
  * Returns the active member.
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -202,6 +208,65 @@ const StytchB2BProvider = ({ stytch, children }) => {
             React.createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
 };
 
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+const StytchB2B = ({ styles, callbacks, config }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />'));
+    const stytchClient = useStytchB2BClient();
+    const containerEl = useRef(null);
+    useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-b2b-ui-${randId}`;
+        }
+        stytchClient.mount({
+            callbacks,
+            config,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, styles, callbacks]);
+    return React.createElement("div", { ref: containerEl });
+};
+
 var e, t, n, r, o, i, a, s, u, l, c, f, d, p, h, m, g, v, y, b, w, _, k, S;
 function E(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 function x(e, t) { var n = "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"]; if (!n) {
@@ -886,7 +951,7 @@ catch (e) {
 catch (e) {
     i(e);
 } } function u(e) { var t; e.done ? o(e.value) : (t = e.value, t instanceof n ? t : new n((function (e) { e(t); }))).then(a, s); } u((r = r.apply(e, t || [])).next()); })); }
-var Xe = function () { function e(t, n, r, o) { N(this, e), this._publicToken = t, this._subscriptionDataLayer = n, this.baseURL = r, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new Be({ maxBatchSize: 15, intervalDurationMs: 800, logEventURL: this.buildSDKUrl("/events") }); } return D(e, [{ key: "logEvent", value: function (e) { var t = e.name, n = e.details, r = e.error, o = void 0 === r ? {} : r; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: t, details: n, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(Oe()), app_session_id: "app-session-id-".concat(Oe()), persistent_id: "persistent-id-".concat(Oe()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.13.0" } }); } }, { key: "fetchSDK", value: function (e) { var t = e.url, n = e.body, r = e.errorMessage, o = e.method; return Ye(this, void 0, void 0, j().mark((function e() { var i, a, s, u; return j().wrap((function (e) { for (;;)
+var Xe = function () { function e(t, n, r, o) { N(this, e), this._publicToken = t, this._subscriptionDataLayer = n, this.baseURL = r, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new Be({ maxBatchSize: 15, intervalDurationMs: 800, logEventURL: this.buildSDKUrl("/events") }); } return D(e, [{ key: "logEvent", value: function (e) { var t = e.name, n = e.details, r = e.error, o = void 0 === r ? {} : r; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: t, details: n, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(Oe()), app_session_id: "app-session-id-".concat(Oe()), persistent_id: "persistent-id-".concat(Oe()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.13.4" } }); } }, { key: "fetchSDK", value: function (e) { var t = e.url, n = e.body, r = e.errorMessage, o = e.method; return Ye(this, void 0, void 0, j().mark((function e() { var i, a, s, u; return j().wrap((function (e) { for (;;)
             switch (e.prev = e.next) {
                 case 0: return i = this._subscriptionDataLayer.readSessionCookie().session_token, a = "Basic " + window.btoa(this._publicToken + ":" + (i || this._publicToken)), s = window.btoa(JSON.stringify(this.createTelemetryBlob())), u = window.location.origin, e.abrupt("return", ze({ basicAuthHeader: a, body: n, errorMessage: r, finalURL: this.buildSDKUrl(t), method: o, xSDKClientHeader: s, xSDKParentHostHeader: u }));
                 case 5:
@@ -5283,7 +5348,7 @@ function uv() { var e = bg(["\n  display: flex;\n  align-items: center;\n  backg
 var lv = function (e) { return "\n0% {transform: translate3d(0," + -200 * e + "%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n"; }, cv = function (e) { return "\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0," + -150 * e + "%,-1px) scale(.6); opacity:0;}\n"; }, fv = vg("div", Pt.exports.forwardRef)(uv()), dv = vg("div")(sv()), pv = Pt.exports.memo((function (e) { var t = e.toast, n = e.position, r = e.style, o = e.children, i = null != t && t.height ? function (e, t) { var n = e.includes("top") ? 1 : -1, r = Sg() ? ["0%{opacity:0;} 100%{opacity:1;}", "0%{opacity:1;} 100%{opacity:0;}"] : [lv(n), cv(n)], o = r[1]; return { animation: t ? gg(r[0]) + " 0.35s cubic-bezier(.21,1.02,.73,1) forwards" : gg(o) + " 0.4s forwards cubic-bezier(.06,.71,.55,1)" }; }(t.position || n || "top-center", t.visible) : { opacity: 0 }, a = Pt.exports.createElement(av, { toast: t }), s = Pt.exports.createElement(dv, Object.assign({}, t.ariaProps), _g(t.message, t)); return Pt.exports.createElement(fv, { className: t.className, style: yg({}, i, r, t.style) }, "function" == typeof o ? o({ icon: a, message: s }) : Pt.exports.createElement(Pt.exports.Fragment, null, a, s)); }));
 function hv() { var e = bg(["\n  z-index: 9999;\n  > * {\n    pointer-events: auto;\n  }\n"]); return hv = function () { return e; }, e; }
 !function (e, t, n, r) { cg.p = t, ng = e, rg = n, og = r; }(Pt.exports.createElement);
-var mv = mg(hv()), gv = function (e) { var t = e.reverseOrder, n = e.position, r = void 0 === n ? "top-center" : n, o = e.toastOptions, i = e.gutter, a = e.children, s = e.containerStyle, u = e.containerClassName, l = Ig(o), c = l.toasts, f = l.handlers; return Pt.exports.createElement("div", { style: yg({ position: "fixed", zIndex: 9999, top: 16, left: 16, right: 16, bottom: 16, pointerEvents: "none" }, s), className: u, onMouseEnter: f.startPause, onMouseLeave: f.endPause }, c.map((function (e) { var n, o = e.position || r, s = function (e, t) { var n = e.includes("top"), r = n ? { top: 0 } : { bottom: 0 }, o = e.includes("center") ? { justifyContent: "center" } : e.includes("right") ? { justifyContent: "flex-end" } : {}; return yg({ left: 0, right: 0, display: "flex", position: "absolute", transition: Sg() ? void 0 : "all 230ms cubic-bezier(.21,1.02,.73,1)", transform: "translateY(" + t * (n ? 1 : -1) + "px)" }, r, o); }(o, f.calculateOffset(e, { reverseOrder: t, gutter: i, defaultPosition: r })), u = e.height ? void 0 : (n = function (t) { f.updateHeight(e.id, t.height); }, function (e) { e && setTimeout((function () { var t = e.getBoundingClientRect(); n(t); })); }); return Pt.exports.createElement("div", { ref: u, className: e.visible ? mv : "", key: e.id, style: s }, "custom" === e.type ? _g(e.message, e) : a ? a(e) : Pt.exports.createElement(pv, { toast: e, position: o })); }))); }, vv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z", fill: "#0F4447" })); }, yv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z", fill: "#590607" })); }, bv = { display: "flex", gap: "8px", padding: "8px", fontSize: "14px", borderRadius: "4px" }, wv = Object.assign(Object.assign({}, bv), { background: "#ECFFF5", boxShadow: "0px 5px 10px rgba(15, 68, 71, 0.18)", color: "#0F4447" }), _v = Object.assign(Object.assign({}, bv), { background: "#FFEEEC", boxShadow: "0px 5px 10px rgba(89, 6, 7, 0.2)", color: "#590607" }), kv = function () { return pn.createElement(gv, { containerStyle: { position: "sticky" }, toastOptions: { success: { style: wv, icon: pn.createElement(vv, null) }, error: { style: _v, icon: pn.createElement(yv, null) } } }); }, Sv = function (e) { return null != e ? e : void 0; }, Ev = function (e) { return e ? "".concat(e, "px") : void 0; }, xv = Zo.div(e || (e = E(["\n  display: ", ";\n\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  flex-grow: ", ";\n  flex-shrink: ", ";\n  order: ", ";\n  align-self: ", ";\n  flex-flow: ", ";\n  flex-wrap: ", ";\n\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  gap: ", ";\n"])), (function (e) { return e.inline ? "inline-flex" : "flex"; }), (function (e) { var t = e.direction; return Sv(t); }), (function (e) { var t = e.justifyContent; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.alignItems; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.grow; return Sv(t); }), (function (e) { var t = e.shrink; return Sv(t); }), (function (e) { var t = e.order; return Sv(t); }), (function (e) { var t = e.alignSelf; return Sv(t); }), (function (e) { var t = e.flow; return Sv(t); }), (function (e) { var t = e.wrap; return Sv(t); }), (function (e) { var t = e.width; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.height; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.padding; return Ev(t); }), (function (e) { var t = e.margin; return Ev(t); }), (function (e) { var t = e.marginTop; return Ev(t); }), (function (e) { var t = e.marginRight; return Ev(t); }), (function (e) { var t = e.marginBottom; return Ev(t); }), (function (e) { var t = e.marginLeft; return Ev(t); }), (function (e) { var t = e.paddingTop; return Ev(t); }), (function (e) { var t = e.paddingRight; return Ev(t); }), (function (e) { var t = e.paddingBottom; return Ev(t); }), (function (e) { var t = e.paddingLeft; return Ev(t); }), (function (e) { var t = e.gap; return Ev(t); })), Av = Zo.div(t || (t = E(["\n  color: ", ";\n  ", ";\n"])), (function (e) { return e.color && e.theme.colors[e.color]; }), (function (e) { return e.size && e.theme.typography[e.size]; }));
+var mv = mg(hv()), gv = function (e) { var t = e.reverseOrder, n = e.position, r = void 0 === n ? "top-center" : n, o = e.toastOptions, i = e.gutter, a = e.children, s = e.containerStyle, u = e.containerClassName, l = Ig(o), c = l.toasts, f = l.handlers; return Pt.exports.createElement("div", { style: yg({ position: "fixed", zIndex: 9999, top: 16, left: 16, right: 16, bottom: 16, pointerEvents: "none" }, s), className: u, onMouseEnter: f.startPause, onMouseLeave: f.endPause }, c.map((function (e) { var n, o = e.position || r, s = function (e, t) { var n = e.includes("top"), r = n ? { top: 0 } : { bottom: 0 }, o = e.includes("center") ? { justifyContent: "center" } : e.includes("right") ? { justifyContent: "flex-end" } : {}; return yg({ left: 0, right: 0, display: "flex", position: "absolute", transition: Sg() ? void 0 : "all 230ms cubic-bezier(.21,1.02,.73,1)", transform: "translateY(" + t * (n ? 1 : -1) + "px)" }, r, o); }(o, f.calculateOffset(e, { reverseOrder: t, gutter: i, defaultPosition: r })), u = e.height ? void 0 : (n = function (t) { f.updateHeight(e.id, t.height); }, function (e) { e && setTimeout((function () { var t = e.getBoundingClientRect(); n(t); })); }); return Pt.exports.createElement("div", { ref: u, className: e.visible ? mv : "", key: e.id, style: s }, "custom" === e.type ? _g(e.message, e) : a ? a(e) : Pt.exports.createElement(pv, { toast: e, position: o })); }))); }, vv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z", fill: "#0F4447" })); }, yv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z", fill: "#590607" })); }, bv = { display: "flex", gap: "8px", padding: "8px", fontSize: "14px", borderRadius: "4px" }, wv = Object.assign(Object.assign({}, bv), { background: "#ECFFF5", boxShadow: "0px 5px 10px rgba(15, 68, 71, 0.18)", color: "#0F4447" }), _v = Object.assign(Object.assign({}, bv), { background: "#FFEEEC", boxShadow: "0px 5px 10px rgba(89, 6, 7, 0.2)", color: "#590607" }), kv = function () { return pn.createElement(gv, { containerStyle: { position: "sticky", marginTop: "4px", marginBottom: "24px" }, toastOptions: { success: { style: wv, icon: pn.createElement(vv, null) }, error: { style: _v, icon: pn.createElement(yv, null) } } }); }, Sv = function (e) { return null != e ? e : void 0; }, Ev = function (e) { return e ? "".concat(e, "px") : void 0; }, xv = Zo.div(e || (e = E(["\n  display: ", ";\n\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  flex-grow: ", ";\n  flex-shrink: ", ";\n  order: ", ";\n  align-self: ", ";\n  flex-flow: ", ";\n  flex-wrap: ", ";\n\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  gap: ", ";\n"])), (function (e) { return e.inline ? "inline-flex" : "flex"; }), (function (e) { var t = e.direction; return Sv(t); }), (function (e) { var t = e.justifyContent; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.alignItems; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.grow; return Sv(t); }), (function (e) { var t = e.shrink; return Sv(t); }), (function (e) { var t = e.order; return Sv(t); }), (function (e) { var t = e.alignSelf; return Sv(t); }), (function (e) { var t = e.flow; return Sv(t); }), (function (e) { var t = e.wrap; return Sv(t); }), (function (e) { var t = e.width; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.height; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.padding; return Ev(t); }), (function (e) { var t = e.margin; return Ev(t); }), (function (e) { var t = e.marginTop; return Ev(t); }), (function (e) { var t = e.marginRight; return Ev(t); }), (function (e) { var t = e.marginBottom; return Ev(t); }), (function (e) { var t = e.marginLeft; return Ev(t); }), (function (e) { var t = e.paddingTop; return Ev(t); }), (function (e) { var t = e.paddingRight; return Ev(t); }), (function (e) { var t = e.paddingBottom; return Ev(t); }), (function (e) { var t = e.paddingLeft; return Ev(t); }), (function (e) { var t = e.gap; return Ev(t); })), Av = Zo.div(t || (t = E(["\n  color: ", ";\n  ", ";\n"])), (function (e) { return e.color && e.theme.colors[e.color]; }), (function (e) { return e.size && e.theme.typography[e.size]; }));
 Av.defaultProps = { size: "body", color: "primary" };
 var Cv = function () { return pn.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("g", { opacity: "0.1" }, pn.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M99.9999 0C155.229 0 200 44.7715 200 99.9999C200 155.229 155.229 200 99.9999 200C44.7715 200 0 155.229 0 99.9999C0 44.7715 44.7715 0 99.9999 0Z", fill: "url(#paint0_linear_4408_12810)" })), pn.createElement("g", { opacity: "0.3" }, pn.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M99.9993 17.5723C145.523 17.5723 182.427 54.4762 182.427 99.9993C182.427 145.523 145.523 182.427 99.9993 182.427C54.4762 182.427 17.5723 145.523 17.5723 99.9993C17.5723 54.4762 54.4762 17.5723 99.9993 17.5723Z", fill: "url(#paint1_linear_4408_12810)" })), pn.createElement("g", { opacity: "0.7" }, pn.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M99.9987 32.2305C137.487 32.2305 167.877 62.6203 167.877 100.108C167.877 137.596 137.487 167.986 99.9987 167.986C62.5109 167.986 32.1211 137.596 32.1211 100.108C32.1211 62.6203 62.5109 32.2305 99.9987 32.2305Z", fill: "url(#paint2_linear_4408_12810)" })), pn.createElement("path", { d: "M100 45.8334C70.1 45.8334 45.8333 70.1 45.8333 100C45.8333 129.9 70.1 154.167 100 154.167C129.9 154.167 154.167 129.9 154.167 100C154.167 70.1 129.9 45.8334 100 45.8334ZM105.417 127.083H94.5833V116.25H105.417V127.083ZM105.417 105.417H94.5833V72.9167H105.417V105.417Z", fill: "#8B1214" }), pn.createElement("defs", null, pn.createElement("linearGradient", { id: "paint0_linear_4408_12810", x1: "-87.1375", y1: "160.384", x2: "169.669", y2: "338.297", gradientUnits: "userSpaceOnUse" }, pn.createElement("stop", { stopColor: "white" }), pn.createElement("stop", { offset: "1", stopColor: "#8B1214" })), pn.createElement("linearGradient", { id: "paint1_linear_4408_12810", x1: "-87.138", y1: "160.384", x2: "169.668", y2: "338.297", gradientUnits: "userSpaceOnUse" }, pn.createElement("stop", { stopColor: "#F7F0F0" }), pn.createElement("stop", { offset: "1", stopColor: "#8B1214" })), pn.createElement("linearGradient", { id: "paint2_linear_4408_12810", x1: "-87.1386", y1: "160.493", x2: "169.668", y2: "338.405", gradientUnits: "userSpaceOnUse" }, pn.createElement("stop", { stopColor: "#8B1214", stopOpacity: "0.01" }), pn.createElement("stop", { offset: "1", stopColor: "#E4C7C7" })))); }, Ov = Zo(Av)(n || (n = E(["\n  text-align: center;\n"]))), Tv = function (e) { var t = e.errorMessage; return pn.createElement(xv, { direction: "column", gap: 24, alignItems: "center" }, pn.createElement(Ov, { size: "header" }, "Looks like there was an error!"), pn.createElement(Cv, null), pn.createElement(Av, null, t)); }, Pv = { exports: {} }, Lv = {}, Rv = Pt.exports;
 var Iv = "function" == typeof Object.is ? Object.is : function (e, t) { return e === t && (0 !== e || 1 / e == 1 / t) || e != e && t != t; }, Mv = Rv.useState, jv = Rv.useEffect, Nv = Rv.useLayoutEffect, zv = Rv.useDebugValue;
@@ -5526,10 +5591,10 @@ var Vy, Hy, qy = Yo(o || (o = E(["\n  0% {\n    transform: rotate(0deg);\n  }\n
     case Pm.emailMagicLinks: return a.flowState.type === Lm.Organization ? pn.createElement(rb, { key: e }) : pn.createElement(ob, { key: e });
     case Pm.sso: return a.flowState.type === Lm.Organization ? pn.createElement(ab, { key: e }) : pn.createElement(pn.Fragment, null);
 } })); i.products.includes(Pm.emailMagicLinks) && i.products.includes(Pm.sso) && s.splice(1, 0, pn.createElement(cb, { key: "divider" })); var u = a.flowState.type === Lm.Discovery ? "Sign up or log in" : "Continue to ".concat(null !== (t = null === (e = a.flowState.organization) || void 0 === e ? void 0 : e.organization_name) && void 0 !== t ? t : "..."); return pn.createElement(fb, { direction: "column" }, pn.createElement(hb, { appLogo: o.logoImageUrl, orgLogo: null !== (r = null === (n = a.flowState.organization) || void 0 === n ? void 0 : n.organization_logo_url) && void 0 !== r ? r : "" }), pn.createElement(xv, { justifyContent: "center" }, pn.createElement(pb, { size: "header" }, u)), s); }, gb = function (e, t) { var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : { wrapped: !0 }; return function () { var r, o, i, a, s = (r = e, o = B(Pt.exports.useState(r), 2), i = o[0], a = o[1], Pt.exports.useEffect((function () { var e = Math.floor(1e6 * Math.random()); a("".concat(r, "-").concat(e)); }), [r]), i); return n.wrapped ? pn.createElement(xv, { height: 24, width: 24 }, pn.createElement(t, { patternId: s })) : pn.createElement(t, { patternId: s }); }; }, vb = gb("gmail", (function () { return pn.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", width: "100%", height: "100%" }, pn.createElement("path", { fill: "#4caf50", d: "M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z" }), pn.createElement("path", { fill: "#1e88e5", d: "M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z" }), pn.createElement("polygon", { fill: "#e53935", points: "35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17" }), pn.createElement("path", { fill: "#c62828", d: "M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z" }), pn.createElement("path", { fill: "#fbc02d", d: "M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z" })); })), yb = gb("outlook", (function () { return pn.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0px", y: "0px", width: "100%", height: "100%", viewBox: "0 0 103.17322 104.31332", xmlSpace: "preserve" }, pn.createElement("defs", { id: "defs43" }), pn.createElement("path", { d: "m 64.566509,22.116383 v 20.404273 l 7.130526,4.489881 c 0.188058,0.05485 0.595516,0.05877 0.783574,0 L 103.16929,26.320259 c 0,-2.44867 -2.28412,-4.203876 -3.573094,-4.203876 H 64.566509 z", id: "path3", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }), pn.createElement("path", { d: "m 64.566509,50.13308 6.507584,4.470291 c 0.916782,0.673874 2.021622,0 2.021622,0 -1.100922,0.673874 30.077495,-20.035993 30.077495,-20.035993 v 37.501863 c 0,4.082422 -2.61322,5.794531 -5.551621,5.794531 H 64.562591 V 50.13308 z", id: "path5", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }), pn.createElement("g", { id: "g23", transform: "matrix(3.9178712,0,0,3.9178712,-13.481403,-41.384473)" }, pn.createElement("path", { d: "m 11.321,20.958 c -0.566,0 -1.017,0.266 -1.35,0.797 -0.333,0.531 -0.5,1.234 -0.5,2.109 0,0.888 0.167,1.59 0.5,2.106 0.333,0.517 0.77,0.774 1.31,0.774 0.557,0 0.999,-0.251 1.325,-0.753 0.326,-0.502 0.49,-1.199 0.49,-2.09 0,-0.929 -0.158,-1.652 -0.475,-2.169 -0.317,-0.516 -0.75,-0.774 -1.3,-0.774 z", id: "path25", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }), pn.createElement("path", { d: "m 3.441,13.563 v 20.375 l 15.5,3.25 V 10.563 l -15.5,3 z m 10.372,13.632 c -0.655,0.862 -1.509,1.294 -2.563,1.294 -1.027,0 -1.863,-0.418 -2.51,-1.253 C 8.094,26.4 7.77,25.312 7.77,23.97 c 0,-1.417 0.328,-2.563 0.985,-3.438 0.657,-0.875 1.527,-1.313 2.61,-1.313 1.023,0 1.851,0.418 2.482,1.256 0.632,0.838 0.948,1.942 0.948,3.313 10e-4,1.409 -0.327,2.545 -0.982,3.407 z", id: "path27", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }))); })), bb = gb("yahoo", (function (e) { var t = e.patternId; return pn.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("rect", { width: "22", height: "22", fill: "url(#".concat(t, ")") }), pn.createElement("defs", null, pn.createElement("pattern", { id: t, patternContentUnits: "objectBoundingBox", width: "1", height: "1" }, pn.createElement("use", { href: "#yahooImage", transform: "scale(0.000976562)" })), pn.createElement("image", { id: "yahooImage", width: "1024", height: "1024", xlinkHref: "data:image/jpeg;base64,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" }))); })), wb = Zo.a(g || (g = E(["\n  all: unset;\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  }\n"])), (function (e) { return e.theme.colors.primary; })), _b = function (e) { var t = e.label, n = e.href, r = e.Icon; return pn.createElement(xv, { gap: 4 }, r, pn.createElement(wb, { href: n, target: "_blank", rel: "noopener noreferrer" }, pn.createElement(Av, null, "Open in ", t))); }, kb = function (e) { var t = e.emailDomain, n = e.reset, r = e.email, o = function (e) { if (!e)
-    return { GMAIL: "https://mail.google.com/mail/u/0/#search/in%3Aanywhere", OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/referrer=unread" }; var t = encodeURIComponent("from:@".concat(e, " in:anywhere")); return { GMAIL: "https://mail.google.com/mail/u/0/#search/".concat(t), OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/keyword=".concat(e) }; }(t), i = o.GMAIL, a = o.YAHOO, s = o.OUTLOOK; return pn.createElement(xv, { direction: "column", gap: 24 }, pn.createElement(Av, { size: "header" }, "Check your email"), pn.createElement(xv, { direction: "column", gap: 12 }, pn.createElement(Av, null, "An email was sent to ", pn.createElement("b", null, r), "."), pn.createElement(xv, { direction: "column", gap: 8 }, pn.createElement(_b, { href: i, label: "Gmail", Icon: pn.createElement(vb, null) }), pn.createElement(_b, { href: a, label: "Yahoo", Icon: pn.createElement(bb, null) }), pn.createElement(_b, { href: s, label: "Outlook", Icon: pn.createElement(yb, null) }))), pn.createElement(Uy, { onClick: n }, "Try again")); }, Sb = function () { var e, t, n, r, o, i, a, s = B(Gm(), 2), u = s[0], l = s[1], c = (n = Km(), r = $m(), o = B(Pt.exports.useState((function () { return $e(n).bootstrap.getSync().emailDomains; })), 2), i = o[0], a = o[1], Pt.exports.useEffect((function () { $e(n).bootstrap.getAsync().then((function (e) { var t = e.emailDomains; a(t); })); }), [n]), (null === (e = r.emailMagicLinksOptions) || void 0 === e ? void 0 : e.domainHint) ? null === (t = r.emailMagicLinksOptions) || void 0 === t ? void 0 : t.domainHint : 1 === i.length ? i[0] : null); return pn.createElement(kb, { emailDomain: c, reset: function () { l({ type: "set_magic_link_email", email: "" }), l({ type: "transition", screen: Bm.Main }); }, email: u.formState.magicLinkState.email }); }, Eb = Zo.button(v || (v = E(["\n  all: unset;\n  cursor: pointer;\n"]))), xb = function (e) { var t = e.color; return pn.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: t })); }, Ab = function (e) { var t = e.onClick, n = Xo(); return pn.createElement(Eb, { onClick: t }, pn.createElement(xb, { color: n.colors.primary })); }, Cb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Logging in..."), Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Ob = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Tb = Zo(xv)(y || (y = E(["\n  border: ", ";\n  border-radius: ", ";\n  > div + div {\n    border-top: ", ";\n  }\n"])), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; }), (function (e) { return e.theme.container.border; })), Pb = Zo(xv)(b || (b = E(["\n  cursor: pointer;\n"]))), Lb = Zo.img(w || (w = E(["\n  height: 40px;\n  width: 40px;\n  border-radius: 4px;\n"]))), Rb = Zo(xv)(_ || (_ = E(["\n  height: 40px;\n  width: 40px;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 4px;\n\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 25px;\n"])), (function (e) { return e.theme.buttons.primary.backgroundColor; }), (function (e) { return e.theme.buttons.primary.textColor; })), Ib = function () { return Pt.exports.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M7 0.333313L5.825 1.50831L10.475 6.16665H0.333334V7.83331H10.475L5.825 12.4916L7 13.6666L13.6667 6.99998L7 0.333313Z", fill: "#19303D" })); }, Mb = function (e) { var t = e.name, n = e.logo; return "" !== n ? Pt.exports.createElement(Lb, { src: n }) : Pt.exports.createElement(Rb, { alignItems: "center", justifyContent: "center" }, t[0]); }, jb = function (e) { var t = e.type; return "eligible_to_join_by_email_domain" === t || "pending_member" === t ? Pt.exports.createElement(Av, null, "Join") : "invited_member" === t ? Pt.exports.createElement(Av, null, "Accept Invite") : Pt.exports.createElement(Pt.exports.Fragment, null); }, Nb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = function () { return n({ type: "transition", screen: Bm.Main }); }, s = Dy("stytch.discovery.organization.create", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), u = s.trigger; return s.isMutating ? Pt.exports.createElement(Ob, null) : i ? Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, "Create an organization to get started"), Pt.exports.createElement(Uy, { onClick: function () { return u(); } }, "Create an organization"), Pt.exports.createElement(Av, null, t.formState.discoveryState.email, " does not have an account. Think this is a mistake? Try a different email address, or contact your admin.")) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, t.formState.discoveryState.email, " does not belong to any organizations."), Pt.exports.createElement(Av, null, "Make sure your email address is correct. Otherwise, you might need to be invited by your admin."), Pt.exports.createElement(Uy, { variant: "outlined", onClick: a }, "Try a different email address")); }, zb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = Dy("stytch.discovery.intermediateSessions.exchange", (function (e, n) { var i = n.arg.organizationId; return r.discovery.intermediateSessions.exchange({ organization_id: i, intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); } }), s = a.trigger, u = a.isMutating, l = Dy("stytch.discovery.create.organization", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), c = l.trigger, f = l.isMutating; return u ? Pt.exports.createElement(Cb, null) : f ? Pt.exports.createElement(Ob, null) : 0 === t.formState.discoveryState.discoveredOrganizations.length ? Pt.exports.createElement(Nb, null) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: function () { return n({ type: "transition", screen: Bm.Main }); } }), Pt.exports.createElement(Av, { size: "header" }, "Select an organization to continue"), Pt.exports.createElement(Tb, { direction: "column" }, t.formState.discoveryState.discoveredOrganizations.map((function (e) { var t = e.organization, n = e.membership; return Pt.exports.createElement(Pb, { padding: 8, justifyContent: "space-between", key: t.organization_id, alignItems: "center", onClick: function () { return s({ organizationId: t.organization_id }); } }, Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(Mb, { name: t.organization_name, logo: t.organization_logo_url }), Pt.exports.createElement(Av, null, t.organization_name)), Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(jb, { type: n.type }), Pt.exports.createElement(Ib, null))); }))), i && Pt.exports.createElement(xv, { direction: "column", gap: 8 }, Pt.exports.createElement(cb, null), Pt.exports.createElement(Uy, { variant: "outlined", onClick: function () { return c(); } }, "Create an organization"))); }, Db = function () { return Pt.exports.createElement("svg", { width: "201", height: "200", viewBox: "0 0 201 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("g", { opacity: "0.1" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 0C155.729 0 200.5 44.7715 200.5 99.9999C200.5 155.229 155.729 200 100.5 200C45.2715 200 0.5 155.229 0.5 99.9999C0.5 44.7715 45.2715 0 100.5 0Z", fill: "url(#paint0_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.3" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 17.5728C146.023 17.5728 182.927 54.4767 182.927 99.9998C182.927 145.523 146.023 182.427 100.5 182.427C54.9768 182.427 18.0729 145.523 18.0729 99.9998C18.0729 54.4767 54.9768 17.5728 100.5 17.5728Z", fill: "url(#paint1_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.7" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 32.231C137.988 32.231 168.378 62.6208 168.378 100.109C168.378 137.597 137.988 167.987 100.5 167.987C63.012 167.987 32.6222 137.597 32.6222 100.109C32.6222 62.6208 63.012 32.231 100.5 32.231Z", fill: "url(#paint2_linear_1356_5135)" })), Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "#00AC26", fillOpacity: "0.12" }), Pt.exports.createElement("mask", { id: "mask0_1356_5135", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "49", y: "48", width: "103", height: "104" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "white" })), Pt.exports.createElement("g", { mask: "url(#mask0_1356_5135)" }), Pt.exports.createElement("path", { d: "M88 117.5L70.5 100L64.6667 105.833L88 129.167L138 79.1666L132.167 73.3333L88 117.5Z", fill: "white" }), Pt.exports.createElement("defs", null, Pt.exports.createElement("linearGradient", { id: "paint0_linear_1356_5135", x1: "-86.6375", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "white" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#09F33D" })), Pt.exports.createElement("linearGradient", { id: "paint1_linear_1356_5135", x1: "-86.6374", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#00AC26", stopOpacity: "0.4" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#BDFFBC", stopOpacity: "0.58" })), Pt.exports.createElement("linearGradient", { id: "paint2_linear_1356_5135", x1: "-86.6375", y1: "160.493", x2: "170.169", y2: "338.406", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#F8FFF5" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#00AC26", stopOpacity: "0.26" })))); }, Bb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 24, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Success!"), Pt.exports.createElement(Av, null, "You have successfully logged in."), Pt.exports.createElement("div", { style: { display: "block", marginLeft: "auto", marginRight: "auto", width: "50%" } }, Pt.exports.createElement(Db, null))); }, Fb = Zo.div(k || (k = E(["\n  width: ", ";\n  font-family: ", ";\n  padding: 24px 32px;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), (function (e) { return e.theme.container.width; }), (function (e) { return e.theme.typography.fontFamily; }), (function (e) { return e.theme.container.backgroundColor; }), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; })), Ub = Zo.img(S || (S = E(["\n  width: 150px;\n"]))), Vb = function () { var e, t = B(Gm(), 2), n = t[0], r = t[1], o = Km(), i = $m(), a = Xo().displayWatermark, s = n.screen, u = (V(e = {}, Bm.Main, pn.createElement(mb, null)), V(e, Bm.EmailConfirmation, pn.createElement(Sb, null)), V(e, Bm.LoggedIn, pn.createElement(Bb, null)), V(e, Bm.Discovery, pn.createElement(zb, null)), V(e, Bm.ErrorOrganization, pn.createElement(Tv, { errorMessage: "The organization you are looking for could not be found. If you think this is a mistake, contact your admin." })), V(e, Bm.Error, pn.createElement(Tv, { errorMessage: "Something went wrong. Try again later or contact your admin for help." })), e), l = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.LoggedIn }); }, c = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.Error }); }, f = Dy("stytch.magicLinks.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.authenticate({ magic_links_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), d = f.trigger, p = f.isMutating, h = Dy("stytch.sso.authenticate", (function (e, t) { var n = t.arg.token; return o.sso.authenticate({ sso_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), m = h.trigger, g = h.isMutating, v = Dy("stytch.magicLinks.discovery.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.discovery.authenticate({ discovery_magic_links_token: n }); }), { onSuccess: function (e) { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "set_discovery_state", email: e.email_address, discoveredOrganizations: e.discovered_organizations, intermediateSessionToken: e.intermediate_session_token }), r({ type: "transition", screen: Bm.Discovery }); }, onError: c }), y = v.trigger, b = v.isMutating, w = By().isSearching; return Pt.exports.useEffect((function () { var e = new URL(window.location.href), t = e.searchParams.get("stytch_token_type"), n = e.searchParams.get("token"); n && t && ("discovery" === t ? y({ token: n }) : "sso" === t ? m({ token: n }) : "multi_tenant_magic_links" === t && d({ token: n })); }), []), p || g || b ? pn.createElement(Fb, null, pn.createElement(Cb, null)) : w ? pn.createElement(Fb, null, pn.createElement(Ob, null)) : pn.createElement(Fb, null, u[s], pn.createElement(kv, null), a && pn.createElement(xv, { justifyContent: "center", marginTop: 24 }, pn.createElement("a", { href: "https://stytch.com/", target: "_blank", rel: "noreferrer" }, pn.createElement(Ub, { alt: "Powered by Stytch", src: "https://public-assets.stytch.com/et_powered_by_stytch_logo.png" })))); }, Hb = "stytch-b2b-ui", qb = (Vy = function (e) { var t = e.client, n = e.styles, r = e.callbacks, o = e.config, i = B(Pt.exports.useState((function () { return $e(t).bootstrap.getSync().displayWatermark; })), 2), a = i[0], s = i[1]; Pt.exports.useEffect((function () { $e(t).bootstrap.getAsync().then((function (e) { var t = e.displayWatermark; s(t); })); }), [t]); var u = Object.assign(Object.assign({}, Um), { flowState: Object.assign(Object.assign({}, Um.flowState), { type: o.authFlowType }) }), l = function (e) { var t = e.styles, n = e.displayWatermark; return Pt.exports.useMemo((function () { return function (e) { var t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1]; return { typography: { fontFamily: e.fontFamily, header: { fontFamily: e.fontFamily, fontSize: 24, fontWeight: 600, lineHeight: "30px" }, body: { fontFamily: e.fontFamily, fontSize: 16, fontWeight: "normal", lineHeight: "21px" }, helper: { fontFamily: e.fontFamily, fontSize: 14, fontWeight: "400", lineHeight: "20px", whiteSpace: "pre-wrap" } }, colors: { primary: e.colors.primary, secondary: e.colors.secondary, success: e.colors.success, error: e.colors.error, disabled: "#F3F5F6", disabledText: "#8296A1" }, container: { width: e.container.width, border: "1px solid ".concat(e.container.borderColor), borderRadius: e.container.borderRadius, backgroundColor: e.container.backgroundColor }, buttons: { primary: { backgroundColor: e.buttons.primary.backgroundColor, textColor: e.buttons.primary.textColor, border: "1px solid ".concat(e.buttons.primary.borderColor), borderRadius: e.buttons.primary.borderRadius }, secondary: { backgroundColor: e.buttons.secondary.backgroundColor, textColor: e.buttons.secondary.textColor, border: "1px solid ".concat(e.buttons.secondary.borderColor), borderRadius: e.buttons.secondary.borderRadius } }, displayHeader: !e.hideHeaderText, displayWatermark: t, logo: { logoImageUrl: e.logo.logoImageUrl } }; }(Zm({}, tg, t), n); }), [t, n]); }({ styles: n, displayWatermark: a }); return pn.createElement(qm, { client: t, callbacks: r, config: o, initialState: u }, pn.createElement(Ko, { theme: l }, pn.createElement(Vb, null))); }, Hy = Hb, "undefined" == typeof window ? function () { return null; } : function (e) { var t = function (e, t) { var n = customElements.get(t); if (n)
+    return { GMAIL: "https://mail.google.com/mail/u/0/#search/in%3Aanywhere", OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/referrer=unread" }; var t = encodeURIComponent("from:@".concat(e, " in:anywhere")); return { GMAIL: "https://mail.google.com/mail/u/0/#search/".concat(t), OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/keyword=".concat(e) }; }(t), i = o.GMAIL, a = o.YAHOO, s = o.OUTLOOK; return pn.createElement(xv, { direction: "column", gap: 24 }, pn.createElement(Av, { size: "header" }, "Check your email"), pn.createElement(xv, { direction: "column", gap: 12 }, pn.createElement(Av, null, "An email was sent to ", pn.createElement("b", null, r), "."), pn.createElement(xv, { direction: "column", gap: 8 }, pn.createElement(_b, { href: i, label: "Gmail", Icon: pn.createElement(vb, null) }), pn.createElement(_b, { href: a, label: "Yahoo", Icon: pn.createElement(bb, null) }), pn.createElement(_b, { href: s, label: "Outlook", Icon: pn.createElement(yb, null) }))), pn.createElement(Uy, { onClick: n }, "Try again")); }, Sb = function () { var e, t, n, r, o, i, a, s = B(Gm(), 2), u = s[0], l = s[1], c = (n = Km(), r = $m(), o = B(Pt.exports.useState((function () { return $e(n).bootstrap.getSync().emailDomains; })), 2), i = o[0], a = o[1], Pt.exports.useEffect((function () { $e(n).bootstrap.getAsync().then((function (e) { var t = e.emailDomains; a(t); })); }), [n]), (null === (e = r.emailMagicLinksOptions) || void 0 === e ? void 0 : e.domainHint) ? null === (t = r.emailMagicLinksOptions) || void 0 === t ? void 0 : t.domainHint : 1 === i.length ? i[0] : null); return pn.createElement(kb, { emailDomain: c, reset: function () { l({ type: "set_magic_link_email", email: "" }), l({ type: "transition", screen: Bm.Main }); }, email: u.formState.magicLinkState.email }); }, Eb = Zo.button(v || (v = E(["\n  all: unset;\n  cursor: pointer;\n"]))), xb = function (e) { var t = e.color; return pn.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: t })); }, Ab = function (e) { var t = e.onClick, n = Xo(); return pn.createElement(Eb, { onClick: t }, pn.createElement(xb, { color: n.colors.primary })); }, Cb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Logging in..."), Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Ob = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Tb = Zo(xv)(y || (y = E(["\n  border: ", ";\n  border-radius: ", ";\n  > div + div {\n    border-top: ", ";\n  }\n"])), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; }), (function (e) { return e.theme.container.border; })), Pb = Zo(xv)(b || (b = E(["\n  cursor: pointer;\n"]))), Lb = Zo.img(w || (w = E(["\n  height: 40px;\n  width: 40px;\n  border-radius: 4px;\n"]))), Rb = Zo(xv)(_ || (_ = E(["\n  height: 40px;\n  width: 40px;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 4px;\n\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 25px;\n"])), (function (e) { return e.theme.buttons.primary.backgroundColor; }), (function (e) { return e.theme.buttons.primary.textColor; })), Ib = function () { return Pt.exports.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M7 0.333313L5.825 1.50831L10.475 6.16665H0.333334V7.83331H10.475L5.825 12.4916L7 13.6666L13.6667 6.99998L7 0.333313Z", fill: "#19303D" })); }, Mb = function (e) { var t = e.name, n = e.logo; return "" !== n ? Pt.exports.createElement(Lb, { src: n }) : Pt.exports.createElement(Rb, { alignItems: "center", justifyContent: "center" }, t[0]); }, jb = function (e) { var t = e.type; return "eligible_to_join_by_email_domain" === t || "pending_member" === t ? Pt.exports.createElement(Av, null, "Join") : "invited_member" === t ? Pt.exports.createElement(Av, null, "Accept Invite") : Pt.exports.createElement(Pt.exports.Fragment, null); }, Nb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = function () { return n({ type: "transition", screen: Bm.Main }); }, s = Dy("stytch.discovery.organization.create", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), u = s.trigger; return s.isMutating ? Pt.exports.createElement(Ob, null) : i ? Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, "Create an organization to get started"), Pt.exports.createElement(Uy, { onClick: function () { return u(); } }, "Create an organization"), Pt.exports.createElement(Av, null, t.formState.discoveryState.email, " does not have an account. Think this is a mistake? Try a different email address, or contact your admin.")) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, t.formState.discoveryState.email, " does not belong to any organizations."), Pt.exports.createElement(Av, null, "Make sure your email address is correct. Otherwise, you might need to be invited by your admin."), Pt.exports.createElement(Uy, { variant: "outlined", onClick: a }, "Try a different email address")); }, zb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = Dy("stytch.discovery.intermediateSessions.exchange", (function (e, n) { var i = n.arg.organizationId; return r.discovery.intermediateSessions.exchange({ organization_id: i, intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); } }), s = a.trigger, u = a.isMutating, l = Dy("stytch.discovery.organization.create", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), c = l.trigger, f = l.isMutating; return u ? Pt.exports.createElement(Cb, null) : f ? Pt.exports.createElement(Ob, null) : 0 === t.formState.discoveryState.discoveredOrganizations.length ? Pt.exports.createElement(Nb, null) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: function () { return n({ type: "transition", screen: Bm.Main }); } }), Pt.exports.createElement(Av, { size: "header" }, "Select an organization to continue"), Pt.exports.createElement(Tb, { direction: "column" }, t.formState.discoveryState.discoveredOrganizations.map((function (e) { var t = e.organization, n = e.membership; return Pt.exports.createElement(Pb, { padding: 8, justifyContent: "space-between", key: t.organization_id, alignItems: "center", onClick: function () { return s({ organizationId: t.organization_id }); } }, Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(Mb, { name: t.organization_name, logo: t.organization_logo_url }), Pt.exports.createElement(Av, null, t.organization_name)), Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(jb, { type: n.type }), Pt.exports.createElement(Ib, null))); }))), i && Pt.exports.createElement(xv, { direction: "column", gap: 8 }, Pt.exports.createElement(cb, null), Pt.exports.createElement(Uy, { variant: "outlined", onClick: function () { return c(); } }, "Create an organization"))); }, Db = function () { return Pt.exports.createElement("svg", { width: "201", height: "200", viewBox: "0 0 201 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("g", { opacity: "0.1" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 0C155.729 0 200.5 44.7715 200.5 99.9999C200.5 155.229 155.729 200 100.5 200C45.2715 200 0.5 155.229 0.5 99.9999C0.5 44.7715 45.2715 0 100.5 0Z", fill: "url(#paint0_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.3" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 17.5728C146.023 17.5728 182.927 54.4767 182.927 99.9998C182.927 145.523 146.023 182.427 100.5 182.427C54.9768 182.427 18.0729 145.523 18.0729 99.9998C18.0729 54.4767 54.9768 17.5728 100.5 17.5728Z", fill: "url(#paint1_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.7" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 32.231C137.988 32.231 168.378 62.6208 168.378 100.109C168.378 137.597 137.988 167.987 100.5 167.987C63.012 167.987 32.6222 137.597 32.6222 100.109C32.6222 62.6208 63.012 32.231 100.5 32.231Z", fill: "url(#paint2_linear_1356_5135)" })), Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "#00AC26", fillOpacity: "0.12" }), Pt.exports.createElement("mask", { id: "mask0_1356_5135", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "49", y: "48", width: "103", height: "104" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "white" })), Pt.exports.createElement("g", { mask: "url(#mask0_1356_5135)" }), Pt.exports.createElement("path", { d: "M88 117.5L70.5 100L64.6667 105.833L88 129.167L138 79.1666L132.167 73.3333L88 117.5Z", fill: "white" }), Pt.exports.createElement("defs", null, Pt.exports.createElement("linearGradient", { id: "paint0_linear_1356_5135", x1: "-86.6375", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "white" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#09F33D" })), Pt.exports.createElement("linearGradient", { id: "paint1_linear_1356_5135", x1: "-86.6374", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#00AC26", stopOpacity: "0.4" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#BDFFBC", stopOpacity: "0.58" })), Pt.exports.createElement("linearGradient", { id: "paint2_linear_1356_5135", x1: "-86.6375", y1: "160.493", x2: "170.169", y2: "338.406", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#F8FFF5" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#00AC26", stopOpacity: "0.26" })))); }, Bb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 24, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Success!"), Pt.exports.createElement(Av, null, "You have successfully logged in."), Pt.exports.createElement(Db, null)); }, Fb = Zo.div(k || (k = E(["\n  width: ", ";\n  font-family: ", ";\n  padding: 24px 32px;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), (function (e) { return e.theme.container.width; }), (function (e) { return e.theme.typography.fontFamily; }), (function (e) { return e.theme.container.backgroundColor; }), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; })), Ub = Zo.img(S || (S = E(["\n  width: 150px;\n"]))), Vb = function () { var e, t = B(Gm(), 2), n = t[0], r = t[1], o = Km(), i = $m(), a = Xo().displayWatermark, s = n.screen, u = (V(e = {}, Bm.Main, pn.createElement(mb, null)), V(e, Bm.EmailConfirmation, pn.createElement(Sb, null)), V(e, Bm.LoggedIn, pn.createElement(Bb, null)), V(e, Bm.Discovery, pn.createElement(zb, null)), V(e, Bm.ErrorOrganization, pn.createElement(Tv, { errorMessage: "The organization you are looking for could not be found. If you think this is a mistake, contact your admin." })), V(e, Bm.Error, pn.createElement(Tv, { errorMessage: "Something went wrong. Try again later or contact your admin for help." })), e), l = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.LoggedIn }); }, c = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.Error }); }, f = Dy("stytch.magicLinks.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.authenticate({ magic_links_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), d = f.trigger, p = f.isMutating, h = Dy("stytch.sso.authenticate", (function (e, t) { var n = t.arg.token; return o.sso.authenticate({ sso_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), m = h.trigger, g = h.isMutating, v = Dy("stytch.magicLinks.discovery.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.discovery.authenticate({ discovery_magic_links_token: n }); }), { onSuccess: function (e) { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "set_discovery_state", email: e.email_address, discoveredOrganizations: e.discovered_organizations, intermediateSessionToken: e.intermediate_session_token }), r({ type: "transition", screen: Bm.Discovery }); }, onError: c }), y = v.trigger, b = v.isMutating, w = By().isSearching; return Pt.exports.useEffect((function () { var e = new URL(window.location.href), t = e.searchParams.get("stytch_token_type"), n = e.searchParams.get("token"); n && t && ("discovery" === t ? y({ token: n }) : "sso" === t ? m({ token: n }) : "multi_tenant_magic_links" === t && d({ token: n })); }), []), p || g || b ? pn.createElement(Fb, null, pn.createElement(Cb, null)) : w ? pn.createElement(Fb, null, pn.createElement(Ob, null)) : pn.createElement(Fb, null, u[s], pn.createElement(kv, null), a && pn.createElement(xv, { justifyContent: "center", marginTop: 24 }, pn.createElement("a", { href: "https://stytch.com/", target: "_blank", rel: "noreferrer" }, pn.createElement(Ub, { alt: "Powered by Stytch", src: "https://public-assets.stytch.com/et_powered_by_stytch_logo.png" })))); }, Hb = "stytch-b2b-ui", qb = (Vy = function (e) { var t = e.client, n = e.styles, r = e.callbacks, o = e.config, i = B(Pt.exports.useState((function () { return $e(t).bootstrap.getSync().displayWatermark; })), 2), a = i[0], s = i[1]; Pt.exports.useEffect((function () { $e(t).bootstrap.getAsync().then((function (e) { var t = e.displayWatermark; s(t); })); }), [t]); var u = Object.assign(Object.assign({}, Um), { flowState: Object.assign(Object.assign({}, Um.flowState), { type: o.authFlowType }) }), l = function (e) { var t = e.styles, n = e.displayWatermark; return Pt.exports.useMemo((function () { return function (e) { var t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1]; return { typography: { fontFamily: e.fontFamily, header: { fontFamily: e.fontFamily, fontSize: 24, fontWeight: 600, lineHeight: "30px" }, body: { fontFamily: e.fontFamily, fontSize: 16, fontWeight: "normal", lineHeight: "21px" }, helper: { fontFamily: e.fontFamily, fontSize: 14, fontWeight: "400", lineHeight: "20px", whiteSpace: "pre-wrap" } }, colors: { primary: e.colors.primary, secondary: e.colors.secondary, success: e.colors.success, error: e.colors.error, disabled: "#F3F5F6", disabledText: "#8296A1" }, container: { width: e.container.width, border: "1px solid ".concat(e.container.borderColor), borderRadius: e.container.borderRadius, backgroundColor: e.container.backgroundColor }, buttons: { primary: { backgroundColor: e.buttons.primary.backgroundColor, textColor: e.buttons.primary.textColor, border: "1px solid ".concat(e.buttons.primary.borderColor), borderRadius: e.buttons.primary.borderRadius }, secondary: { backgroundColor: e.buttons.secondary.backgroundColor, textColor: e.buttons.secondary.textColor, border: "1px solid ".concat(e.buttons.secondary.borderColor), borderRadius: e.buttons.secondary.borderRadius } }, displayHeader: !e.hideHeaderText, displayWatermark: t, logo: { logoImageUrl: e.logo.logoImageUrl } }; }(Zm({}, tg, t), n); }), [t, n]); }({ styles: n, displayWatermark: a }); return pn.createElement(qm, { client: t, callbacks: r, config: o, initialState: u }, pn.createElement(Ko, { theme: l }, pn.createElement(Vb, null))); }, Hy = Hb, "undefined" == typeof window ? function () { return null; } : function (e) { var t = function (e, t) { var n = customElements.get(t); if (n)
     return n; var r = function (t) { P(r, C(HTMLElement)); var n = R(r); function r(e) { var t; return N(this, r), (t = n.call(this)).props = e, t.rootRef = t.attachShadow({ mode: "open" }), t; } return D(r, [{ key: "connectedCallback", value: function () { this.styleSlot = document.createElement("section"), this.rootRef.appendChild(this.styleSlot), this.mountPoint = document.createElement("span"), this.styleSlot.appendChild(this.mountPoint), this.render(this.props); } }, { key: "disconnectedCallback", value: function () { this.mountPoint && gm.unmountComponentAtNode(this.mountPoint); } }, { key: "renderOneTap", value: function (e) { var t, n, r, o = null === (r = null === (n = null === (t = null == e ? void 0 : e.config) || void 0 === t ? void 0 : t.oauthOptions) || void 0 === n ? void 0 : n.providers) || void 0 === r ? void 0 : r.find((function (e) { return e.type === fm.Google && e.one_tap; })), i = this.innerHTML.includes(Dm); o ? i || (this.innerHTML = Dm) : this.innerHTML = ""; } }, { key: "render", value: function (t) { if (!this.mountPoint)
             throw Error("Cannot render - no mount point defined"); if (!this.styleSlot)
-            throw Error("Cannot render - no style slot defined"); this.renderOneTap(t), gm.render(pn.createElement(xo, { target: this.styleSlot }, pn.createElement(e, Object.assign({}, t))), this.mountPoint); } }]), r; }(); return customElements.define(t, r), r; }(Vy, Hy); return new t(e); }); (function (e) { P(n, Tt); var t = R(n); function n() { N(this, n), function (e) { var t = "StytchUIClient" === e ? "import { createStytchUIClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchUIClient('public-token-...');\n" : "import { createStytchHeadlessClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchHeadlessClient('public-token-...');\n"; if ("undefined" == typeof window)
+            throw Error("Cannot render - no style slot defined"); this.renderOneTap(t), gm.render(pn.createElement(xo, { target: this.styleSlot }, pn.createElement(e, Object.assign({}, t))), this.mountPoint); } }]), r; }(); return customElements.define(t, r), r; }(Vy, Hy); return new t(e); }), Wb = function (e) { P(n, Tt); var t = R(n); function n() { N(this, n), function (e) { var t = "StytchUIClient" === e ? "import { createStytchUIClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchUIClient('public-token-...');\n" : "import { createStytchHeadlessClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchHeadlessClient('public-token-...');\n"; if ("undefined" == typeof window)
     throw new Error("The ".concat(e, " is not compatible with server-side environments.\nIf using nextjs, use the create").concat(e, " method instead.\n```\n").concat(t, "\n```\n")); }("StytchUIClient"); for (var e = arguments.length, r = new Array(e), o = 0; o < e; o++)
     r[o] = arguments[o]; return t.call.apply(t, [this].concat(r)); } return D(n, [{ key: "mount", value: function (e) { var t, n = e.elementId, r = e.styles, o = e.callbacks, i = e.config, a = document.querySelector(n); if (!a) {
             var s = "The selector you specified (".concat(n, ") applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mountLogin().");
@@ -5540,7 +5605,7 @@ var Vy, Hy, qy = Yo(o || (o = E(["\n  0% {\n    transform: rotate(0deg);\n  }\n
         }
         else {
             a.firstChild.render({ client: this, config: i, callbacks: o, styles: r });
-        } } }]), n; })();
+        } } }]), n; }();
 
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.
@@ -5562,4 +5627,25 @@ const createStytchB2BHeadlessClient = (...args) => {
     return new Tt(...args);
 };
 
-export { StytchB2BProvider, createStytchB2BHeadlessClient, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+const createStytchB2BUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new Wb(...args);
+};
+
+export { StytchB2B, StytchB2BProvider, createStytchB2BHeadlessClient, createStytchB2BUIClient, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };

package/dist/b2b/index.js

@@ -9,6 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
 const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
 The Stytch Javascript SDK is intended to ony be used on the client side.
 Make sure to wrap your API calls in a hook to ensure they are executed on the client.
@@ -88,6 +91,9 @@ const StytchContext = React.createContext({ isMounted: false });
 const StytchMemberContext = React.createContext(initialMember);
 const StytchMemberSessionContext = React.createContext(initialMemberSession);
 const useIsMounted__INTERNAL = () => React.useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
 /**
  * Returns the active member.
  * The Stytch SDKs are used for client-side authentication and session management.
@@ -210,6 +216,65 @@ const StytchB2BProvider = ({ stytch, children }) => {
             React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalMemberSession }, children))));
 };
 
+/**
+ * The Stytch B2B UI component.
+ * This component can only be used with a {@link StytchB2BUIClient} client constructor
+ * passed into the {@link StytchB2BProvider}
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ *
+ * @example
+ * <StytchB2B
+ *   config={{
+ *     authFlowType: "Organization",
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     ssoOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     sessionOptions: {
+ *       sessionDurationMinutes: 60,
+ *     }
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * @param props {@link StytchB2BProps}
+ */
+const StytchB2B = ({ styles, callbacks, config }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />'));
+    const stytchClient = useStytchB2BClient();
+    const containerEl = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-b2b-ui-${randId}`;
+        }
+        stytchClient.mount({
+            callbacks,
+            config,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, styles, callbacks]);
+    return React__default['default'].createElement("div", { ref: containerEl });
+};
+
 var e, t, n, r, o, i, a, s, u, l, c, f, d, p, h, m, g, v, y, b, w, _, k, S;
 function E(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 function x(e, t) { var n = "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"]; if (!n) {
@@ -894,7 +959,7 @@ catch (e) {
 catch (e) {
     i(e);
 } } function u(e) { var t; e.done ? o(e.value) : (t = e.value, t instanceof n ? t : new n((function (e) { e(t); }))).then(a, s); } u((r = r.apply(e, t || [])).next()); })); }
-var Xe = function () { function e(t, n, r, o) { N(this, e), this._publicToken = t, this._subscriptionDataLayer = n, this.baseURL = r, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new Be({ maxBatchSize: 15, intervalDurationMs: 800, logEventURL: this.buildSDKUrl("/events") }); } return D(e, [{ key: "logEvent", value: function (e) { var t = e.name, n = e.details, r = e.error, o = void 0 === r ? {} : r; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: t, details: n, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(Oe()), app_session_id: "app-session-id-".concat(Oe()), persistent_id: "persistent-id-".concat(Oe()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.13.0" } }); } }, { key: "fetchSDK", value: function (e) { var t = e.url, n = e.body, r = e.errorMessage, o = e.method; return Ye(this, void 0, void 0, j().mark((function e() { var i, a, s, u; return j().wrap((function (e) { for (;;)
+var Xe = function () { function e(t, n, r, o) { N(this, e), this._publicToken = t, this._subscriptionDataLayer = n, this.baseURL = r, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new Be({ maxBatchSize: 15, intervalDurationMs: 800, logEventURL: this.buildSDKUrl("/events") }); } return D(e, [{ key: "logEvent", value: function (e) { var t = e.name, n = e.details, r = e.error, o = void 0 === r ? {} : r; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: t, details: n, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(Oe()), app_session_id: "app-session-id-".concat(Oe()), persistent_id: "persistent-id-".concat(Oe()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.13.4" } }); } }, { key: "fetchSDK", value: function (e) { var t = e.url, n = e.body, r = e.errorMessage, o = e.method; return Ye(this, void 0, void 0, j().mark((function e() { var i, a, s, u; return j().wrap((function (e) { for (;;)
             switch (e.prev = e.next) {
                 case 0: return i = this._subscriptionDataLayer.readSessionCookie().session_token, a = "Basic " + window.btoa(this._publicToken + ":" + (i || this._publicToken)), s = window.btoa(JSON.stringify(this.createTelemetryBlob())), u = window.location.origin, e.abrupt("return", ze({ basicAuthHeader: a, body: n, errorMessage: r, finalURL: this.buildSDKUrl(t), method: o, xSDKClientHeader: s, xSDKParentHostHeader: u }));
                 case 5:
@@ -5291,7 +5356,7 @@ function uv() { var e = bg(["\n  display: flex;\n  align-items: center;\n  backg
 var lv = function (e) { return "\n0% {transform: translate3d(0," + -200 * e + "%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n"; }, cv = function (e) { return "\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0," + -150 * e + "%,-1px) scale(.6); opacity:0;}\n"; }, fv = vg("div", Pt.exports.forwardRef)(uv()), dv = vg("div")(sv()), pv = Pt.exports.memo((function (e) { var t = e.toast, n = e.position, r = e.style, o = e.children, i = null != t && t.height ? function (e, t) { var n = e.includes("top") ? 1 : -1, r = Sg() ? ["0%{opacity:0;} 100%{opacity:1;}", "0%{opacity:1;} 100%{opacity:0;}"] : [lv(n), cv(n)], o = r[1]; return { animation: t ? gg(r[0]) + " 0.35s cubic-bezier(.21,1.02,.73,1) forwards" : gg(o) + " 0.4s forwards cubic-bezier(.06,.71,.55,1)" }; }(t.position || n || "top-center", t.visible) : { opacity: 0 }, a = Pt.exports.createElement(av, { toast: t }), s = Pt.exports.createElement(dv, Object.assign({}, t.ariaProps), _g(t.message, t)); return Pt.exports.createElement(fv, { className: t.className, style: yg({}, i, r, t.style) }, "function" == typeof o ? o({ icon: a, message: s }) : Pt.exports.createElement(Pt.exports.Fragment, null, a, s)); }));
 function hv() { var e = bg(["\n  z-index: 9999;\n  > * {\n    pointer-events: auto;\n  }\n"]); return hv = function () { return e; }, e; }
 !function (e, t, n, r) { cg.p = t, ng = e, rg = n, og = r; }(Pt.exports.createElement);
-var mv = mg(hv()), gv = function (e) { var t = e.reverseOrder, n = e.position, r = void 0 === n ? "top-center" : n, o = e.toastOptions, i = e.gutter, a = e.children, s = e.containerStyle, u = e.containerClassName, l = Ig(o), c = l.toasts, f = l.handlers; return Pt.exports.createElement("div", { style: yg({ position: "fixed", zIndex: 9999, top: 16, left: 16, right: 16, bottom: 16, pointerEvents: "none" }, s), className: u, onMouseEnter: f.startPause, onMouseLeave: f.endPause }, c.map((function (e) { var n, o = e.position || r, s = function (e, t) { var n = e.includes("top"), r = n ? { top: 0 } : { bottom: 0 }, o = e.includes("center") ? { justifyContent: "center" } : e.includes("right") ? { justifyContent: "flex-end" } : {}; return yg({ left: 0, right: 0, display: "flex", position: "absolute", transition: Sg() ? void 0 : "all 230ms cubic-bezier(.21,1.02,.73,1)", transform: "translateY(" + t * (n ? 1 : -1) + "px)" }, r, o); }(o, f.calculateOffset(e, { reverseOrder: t, gutter: i, defaultPosition: r })), u = e.height ? void 0 : (n = function (t) { f.updateHeight(e.id, t.height); }, function (e) { e && setTimeout((function () { var t = e.getBoundingClientRect(); n(t); })); }); return Pt.exports.createElement("div", { ref: u, className: e.visible ? mv : "", key: e.id, style: s }, "custom" === e.type ? _g(e.message, e) : a ? a(e) : Pt.exports.createElement(pv, { toast: e, position: o })); }))); }, vv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z", fill: "#0F4447" })); }, yv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z", fill: "#590607" })); }, bv = { display: "flex", gap: "8px", padding: "8px", fontSize: "14px", borderRadius: "4px" }, wv = Object.assign(Object.assign({}, bv), { background: "#ECFFF5", boxShadow: "0px 5px 10px rgba(15, 68, 71, 0.18)", color: "#0F4447" }), _v = Object.assign(Object.assign({}, bv), { background: "#FFEEEC", boxShadow: "0px 5px 10px rgba(89, 6, 7, 0.2)", color: "#590607" }), kv = function () { return pn.createElement(gv, { containerStyle: { position: "sticky" }, toastOptions: { success: { style: wv, icon: pn.createElement(vv, null) }, error: { style: _v, icon: pn.createElement(yv, null) } } }); }, Sv = function (e) { return null != e ? e : void 0; }, Ev = function (e) { return e ? "".concat(e, "px") : void 0; }, xv = Zo.div(e || (e = E(["\n  display: ", ";\n\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  flex-grow: ", ";\n  flex-shrink: ", ";\n  order: ", ";\n  align-self: ", ";\n  flex-flow: ", ";\n  flex-wrap: ", ";\n\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  gap: ", ";\n"])), (function (e) { return e.inline ? "inline-flex" : "flex"; }), (function (e) { var t = e.direction; return Sv(t); }), (function (e) { var t = e.justifyContent; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.alignItems; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.grow; return Sv(t); }), (function (e) { var t = e.shrink; return Sv(t); }), (function (e) { var t = e.order; return Sv(t); }), (function (e) { var t = e.alignSelf; return Sv(t); }), (function (e) { var t = e.flow; return Sv(t); }), (function (e) { var t = e.wrap; return Sv(t); }), (function (e) { var t = e.width; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.height; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.padding; return Ev(t); }), (function (e) { var t = e.margin; return Ev(t); }), (function (e) { var t = e.marginTop; return Ev(t); }), (function (e) { var t = e.marginRight; return Ev(t); }), (function (e) { var t = e.marginBottom; return Ev(t); }), (function (e) { var t = e.marginLeft; return Ev(t); }), (function (e) { var t = e.paddingTop; return Ev(t); }), (function (e) { var t = e.paddingRight; return Ev(t); }), (function (e) { var t = e.paddingBottom; return Ev(t); }), (function (e) { var t = e.paddingLeft; return Ev(t); }), (function (e) { var t = e.gap; return Ev(t); })), Av = Zo.div(t || (t = E(["\n  color: ", ";\n  ", ";\n"])), (function (e) { return e.color && e.theme.colors[e.color]; }), (function (e) { return e.size && e.theme.typography[e.size]; }));
+var mv = mg(hv()), gv = function (e) { var t = e.reverseOrder, n = e.position, r = void 0 === n ? "top-center" : n, o = e.toastOptions, i = e.gutter, a = e.children, s = e.containerStyle, u = e.containerClassName, l = Ig(o), c = l.toasts, f = l.handlers; return Pt.exports.createElement("div", { style: yg({ position: "fixed", zIndex: 9999, top: 16, left: 16, right: 16, bottom: 16, pointerEvents: "none" }, s), className: u, onMouseEnter: f.startPause, onMouseLeave: f.endPause }, c.map((function (e) { var n, o = e.position || r, s = function (e, t) { var n = e.includes("top"), r = n ? { top: 0 } : { bottom: 0 }, o = e.includes("center") ? { justifyContent: "center" } : e.includes("right") ? { justifyContent: "flex-end" } : {}; return yg({ left: 0, right: 0, display: "flex", position: "absolute", transition: Sg() ? void 0 : "all 230ms cubic-bezier(.21,1.02,.73,1)", transform: "translateY(" + t * (n ? 1 : -1) + "px)" }, r, o); }(o, f.calculateOffset(e, { reverseOrder: t, gutter: i, defaultPosition: r })), u = e.height ? void 0 : (n = function (t) { f.updateHeight(e.id, t.height); }, function (e) { e && setTimeout((function () { var t = e.getBoundingClientRect(); n(t); })); }); return Pt.exports.createElement("div", { ref: u, className: e.visible ? mv : "", key: e.id, style: s }, "custom" === e.type ? _g(e.message, e) : a ? a(e) : Pt.exports.createElement(pv, { toast: e, position: o })); }))); }, vv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z", fill: "#0F4447" })); }, yv = function () { return Pt.exports.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z", fill: "#590607" })); }, bv = { display: "flex", gap: "8px", padding: "8px", fontSize: "14px", borderRadius: "4px" }, wv = Object.assign(Object.assign({}, bv), { background: "#ECFFF5", boxShadow: "0px 5px 10px rgba(15, 68, 71, 0.18)", color: "#0F4447" }), _v = Object.assign(Object.assign({}, bv), { background: "#FFEEEC", boxShadow: "0px 5px 10px rgba(89, 6, 7, 0.2)", color: "#590607" }), kv = function () { return pn.createElement(gv, { containerStyle: { position: "sticky", marginTop: "4px", marginBottom: "24px" }, toastOptions: { success: { style: wv, icon: pn.createElement(vv, null) }, error: { style: _v, icon: pn.createElement(yv, null) } } }); }, Sv = function (e) { return null != e ? e : void 0; }, Ev = function (e) { return e ? "".concat(e, "px") : void 0; }, xv = Zo.div(e || (e = E(["\n  display: ", ";\n\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  flex-grow: ", ";\n  flex-shrink: ", ";\n  order: ", ";\n  align-self: ", ";\n  flex-flow: ", ";\n  flex-wrap: ", ";\n\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  gap: ", ";\n"])), (function (e) { return e.inline ? "inline-flex" : "flex"; }), (function (e) { var t = e.direction; return Sv(t); }), (function (e) { var t = e.justifyContent; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.alignItems; return e.center ? "center" : Sv(t); }), (function (e) { var t = e.grow; return Sv(t); }), (function (e) { var t = e.shrink; return Sv(t); }), (function (e) { var t = e.order; return Sv(t); }), (function (e) { var t = e.alignSelf; return Sv(t); }), (function (e) { var t = e.flow; return Sv(t); }), (function (e) { var t = e.wrap; return Sv(t); }), (function (e) { var t = e.width; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.height; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.maxHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minWidth; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.minHeight; return "string" == typeof t ? t : Ev(t); }), (function (e) { var t = e.padding; return Ev(t); }), (function (e) { var t = e.margin; return Ev(t); }), (function (e) { var t = e.marginTop; return Ev(t); }), (function (e) { var t = e.marginRight; return Ev(t); }), (function (e) { var t = e.marginBottom; return Ev(t); }), (function (e) { var t = e.marginLeft; return Ev(t); }), (function (e) { var t = e.paddingTop; return Ev(t); }), (function (e) { var t = e.paddingRight; return Ev(t); }), (function (e) { var t = e.paddingBottom; return Ev(t); }), (function (e) { var t = e.paddingLeft; return Ev(t); }), (function (e) { var t = e.gap; return Ev(t); })), Av = Zo.div(t || (t = E(["\n  color: ", ";\n  ", ";\n"])), (function (e) { return e.color && e.theme.colors[e.color]; }), (function (e) { return e.size && e.theme.typography[e.size]; }));
 Av.defaultProps = { size: "body", color: "primary" };
 var Cv = function () { return pn.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("g", { opacity: "0.1" }, pn.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M99.9999 0C155.229 0 200 44.7715 200 99.9999C200 155.229 155.229 200 99.9999 200C44.7715 200 0 155.229 0 99.9999C0 44.7715 44.7715 0 99.9999 0Z", fill: "url(#paint0_linear_4408_12810)" })), pn.createElement("g", { opacity: "0.3" }, pn.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M99.9993 17.5723C145.523 17.5723 182.427 54.4762 182.427 99.9993C182.427 145.523 145.523 182.427 99.9993 182.427C54.4762 182.427 17.5723 145.523 17.5723 99.9993C17.5723 54.4762 54.4762 17.5723 99.9993 17.5723Z", fill: "url(#paint1_linear_4408_12810)" })), pn.createElement("g", { opacity: "0.7" }, pn.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M99.9987 32.2305C137.487 32.2305 167.877 62.6203 167.877 100.108C167.877 137.596 137.487 167.986 99.9987 167.986C62.5109 167.986 32.1211 137.596 32.1211 100.108C32.1211 62.6203 62.5109 32.2305 99.9987 32.2305Z", fill: "url(#paint2_linear_4408_12810)" })), pn.createElement("path", { d: "M100 45.8334C70.1 45.8334 45.8333 70.1 45.8333 100C45.8333 129.9 70.1 154.167 100 154.167C129.9 154.167 154.167 129.9 154.167 100C154.167 70.1 129.9 45.8334 100 45.8334ZM105.417 127.083H94.5833V116.25H105.417V127.083ZM105.417 105.417H94.5833V72.9167H105.417V105.417Z", fill: "#8B1214" }), pn.createElement("defs", null, pn.createElement("linearGradient", { id: "paint0_linear_4408_12810", x1: "-87.1375", y1: "160.384", x2: "169.669", y2: "338.297", gradientUnits: "userSpaceOnUse" }, pn.createElement("stop", { stopColor: "white" }), pn.createElement("stop", { offset: "1", stopColor: "#8B1214" })), pn.createElement("linearGradient", { id: "paint1_linear_4408_12810", x1: "-87.138", y1: "160.384", x2: "169.668", y2: "338.297", gradientUnits: "userSpaceOnUse" }, pn.createElement("stop", { stopColor: "#F7F0F0" }), pn.createElement("stop", { offset: "1", stopColor: "#8B1214" })), pn.createElement("linearGradient", { id: "paint2_linear_4408_12810", x1: "-87.1386", y1: "160.493", x2: "169.668", y2: "338.405", gradientUnits: "userSpaceOnUse" }, pn.createElement("stop", { stopColor: "#8B1214", stopOpacity: "0.01" }), pn.createElement("stop", { offset: "1", stopColor: "#E4C7C7" })))); }, Ov = Zo(Av)(n || (n = E(["\n  text-align: center;\n"]))), Tv = function (e) { var t = e.errorMessage; return pn.createElement(xv, { direction: "column", gap: 24, alignItems: "center" }, pn.createElement(Ov, { size: "header" }, "Looks like there was an error!"), pn.createElement(Cv, null), pn.createElement(Av, null, t)); }, Pv = { exports: {} }, Lv = {}, Rv = Pt.exports;
 var Iv = "function" == typeof Object.is ? Object.is : function (e, t) { return e === t && (0 !== e || 1 / e == 1 / t) || e != e && t != t; }, Mv = Rv.useState, jv = Rv.useEffect, Nv = Rv.useLayoutEffect, zv = Rv.useDebugValue;
@@ -5534,10 +5599,10 @@ var Vy, Hy, qy = Yo(o || (o = E(["\n  0% {\n    transform: rotate(0deg);\n  }\n
     case Pm.emailMagicLinks: return a.flowState.type === Lm.Organization ? pn.createElement(rb, { key: e }) : pn.createElement(ob, { key: e });
     case Pm.sso: return a.flowState.type === Lm.Organization ? pn.createElement(ab, { key: e }) : pn.createElement(pn.Fragment, null);
 } })); i.products.includes(Pm.emailMagicLinks) && i.products.includes(Pm.sso) && s.splice(1, 0, pn.createElement(cb, { key: "divider" })); var u = a.flowState.type === Lm.Discovery ? "Sign up or log in" : "Continue to ".concat(null !== (t = null === (e = a.flowState.organization) || void 0 === e ? void 0 : e.organization_name) && void 0 !== t ? t : "..."); return pn.createElement(fb, { direction: "column" }, pn.createElement(hb, { appLogo: o.logoImageUrl, orgLogo: null !== (r = null === (n = a.flowState.organization) || void 0 === n ? void 0 : n.organization_logo_url) && void 0 !== r ? r : "" }), pn.createElement(xv, { justifyContent: "center" }, pn.createElement(pb, { size: "header" }, u)), s); }, gb = function (e, t) { var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : { wrapped: !0 }; return function () { var r, o, i, a, s = (r = e, o = B(Pt.exports.useState(r), 2), i = o[0], a = o[1], Pt.exports.useEffect((function () { var e = Math.floor(1e6 * Math.random()); a("".concat(r, "-").concat(e)); }), [r]), i); return n.wrapped ? pn.createElement(xv, { height: 24, width: 24 }, pn.createElement(t, { patternId: s })) : pn.createElement(t, { patternId: s }); }; }, vb = gb("gmail", (function () { return pn.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", width: "100%", height: "100%" }, pn.createElement("path", { fill: "#4caf50", d: "M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z" }), pn.createElement("path", { fill: "#1e88e5", d: "M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z" }), pn.createElement("polygon", { fill: "#e53935", points: "35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17" }), pn.createElement("path", { fill: "#c62828", d: "M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z" }), pn.createElement("path", { fill: "#fbc02d", d: "M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z" })); })), yb = gb("outlook", (function () { return pn.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0px", y: "0px", width: "100%", height: "100%", viewBox: "0 0 103.17322 104.31332", xmlSpace: "preserve" }, pn.createElement("defs", { id: "defs43" }), pn.createElement("path", { d: "m 64.566509,22.116383 v 20.404273 l 7.130526,4.489881 c 0.188058,0.05485 0.595516,0.05877 0.783574,0 L 103.16929,26.320259 c 0,-2.44867 -2.28412,-4.203876 -3.573094,-4.203876 H 64.566509 z", id: "path3", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }), pn.createElement("path", { d: "m 64.566509,50.13308 6.507584,4.470291 c 0.916782,0.673874 2.021622,0 2.021622,0 -1.100922,0.673874 30.077495,-20.035993 30.077495,-20.035993 v 37.501863 c 0,4.082422 -2.61322,5.794531 -5.551621,5.794531 H 64.562591 V 50.13308 z", id: "path5", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }), pn.createElement("g", { id: "g23", transform: "matrix(3.9178712,0,0,3.9178712,-13.481403,-41.384473)" }, pn.createElement("path", { d: "m 11.321,20.958 c -0.566,0 -1.017,0.266 -1.35,0.797 -0.333,0.531 -0.5,1.234 -0.5,2.109 0,0.888 0.167,1.59 0.5,2.106 0.333,0.517 0.77,0.774 1.31,0.774 0.557,0 0.999,-0.251 1.325,-0.753 0.326,-0.502 0.49,-1.199 0.49,-2.09 0,-0.929 -0.158,-1.652 -0.475,-2.169 -0.317,-0.516 -0.75,-0.774 -1.3,-0.774 z", id: "path25", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }), pn.createElement("path", { d: "m 3.441,13.563 v 20.375 l 15.5,3.25 V 10.563 l -15.5,3 z m 10.372,13.632 c -0.655,0.862 -1.509,1.294 -2.563,1.294 -1.027,0 -1.863,-0.418 -2.51,-1.253 C 8.094,26.4 7.77,25.312 7.77,23.97 c 0,-1.417 0.328,-2.563 0.985,-3.438 0.657,-0.875 1.527,-1.313 2.61,-1.313 1.023,0 1.851,0.418 2.482,1.256 0.632,0.838 0.948,1.942 0.948,3.313 10e-4,1.409 -0.327,2.545 -0.982,3.407 z", id: "path27", "inkscape:connector-curvature": "0", style: { fill: "#0072c6" } }))); })), bb = gb("yahoo", (function (e) { var t = e.patternId; return pn.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("rect", { width: "22", height: "22", fill: "url(#".concat(t, ")") }), pn.createElement("defs", null, pn.createElement("pattern", { id: t, patternContentUnits: "objectBoundingBox", width: "1", height: "1" }, pn.createElement("use", { href: "#yahooImage", transform: "scale(0.000976562)" })), pn.createElement("image", { id: "yahooImage", width: "1024", height: "1024", xlinkHref: "data:image/jpeg;base64,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" }))); })), wb = Zo.a(g || (g = E(["\n  all: unset;\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  }\n"])), (function (e) { return e.theme.colors.primary; })), _b = function (e) { var t = e.label, n = e.href, r = e.Icon; return pn.createElement(xv, { gap: 4 }, r, pn.createElement(wb, { href: n, target: "_blank", rel: "noopener noreferrer" }, pn.createElement(Av, null, "Open in ", t))); }, kb = function (e) { var t = e.emailDomain, n = e.reset, r = e.email, o = function (e) { if (!e)
-    return { GMAIL: "https://mail.google.com/mail/u/0/#search/in%3Aanywhere", OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/referrer=unread" }; var t = encodeURIComponent("from:@".concat(e, " in:anywhere")); return { GMAIL: "https://mail.google.com/mail/u/0/#search/".concat(t), OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/keyword=".concat(e) }; }(t), i = o.GMAIL, a = o.YAHOO, s = o.OUTLOOK; return pn.createElement(xv, { direction: "column", gap: 24 }, pn.createElement(Av, { size: "header" }, "Check your email"), pn.createElement(xv, { direction: "column", gap: 12 }, pn.createElement(Av, null, "An email was sent to ", pn.createElement("b", null, r), "."), pn.createElement(xv, { direction: "column", gap: 8 }, pn.createElement(_b, { href: i, label: "Gmail", Icon: pn.createElement(vb, null) }), pn.createElement(_b, { href: a, label: "Yahoo", Icon: pn.createElement(bb, null) }), pn.createElement(_b, { href: s, label: "Outlook", Icon: pn.createElement(yb, null) }))), pn.createElement(Uy, { onClick: n }, "Try again")); }, Sb = function () { var e, t, n, r, o, i, a, s = B(Gm(), 2), u = s[0], l = s[1], c = (n = Km(), r = $m(), o = B(Pt.exports.useState((function () { return $e(n).bootstrap.getSync().emailDomains; })), 2), i = o[0], a = o[1], Pt.exports.useEffect((function () { $e(n).bootstrap.getAsync().then((function (e) { var t = e.emailDomains; a(t); })); }), [n]), (null === (e = r.emailMagicLinksOptions) || void 0 === e ? void 0 : e.domainHint) ? null === (t = r.emailMagicLinksOptions) || void 0 === t ? void 0 : t.domainHint : 1 === i.length ? i[0] : null); return pn.createElement(kb, { emailDomain: c, reset: function () { l({ type: "set_magic_link_email", email: "" }), l({ type: "transition", screen: Bm.Main }); }, email: u.formState.magicLinkState.email }); }, Eb = Zo.button(v || (v = E(["\n  all: unset;\n  cursor: pointer;\n"]))), xb = function (e) { var t = e.color; return pn.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: t })); }, Ab = function (e) { var t = e.onClick, n = Xo(); return pn.createElement(Eb, { onClick: t }, pn.createElement(xb, { color: n.colors.primary })); }, Cb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Logging in..."), Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Ob = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Tb = Zo(xv)(y || (y = E(["\n  border: ", ";\n  border-radius: ", ";\n  > div + div {\n    border-top: ", ";\n  }\n"])), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; }), (function (e) { return e.theme.container.border; })), Pb = Zo(xv)(b || (b = E(["\n  cursor: pointer;\n"]))), Lb = Zo.img(w || (w = E(["\n  height: 40px;\n  width: 40px;\n  border-radius: 4px;\n"]))), Rb = Zo(xv)(_ || (_ = E(["\n  height: 40px;\n  width: 40px;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 4px;\n\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 25px;\n"])), (function (e) { return e.theme.buttons.primary.backgroundColor; }), (function (e) { return e.theme.buttons.primary.textColor; })), Ib = function () { return Pt.exports.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M7 0.333313L5.825 1.50831L10.475 6.16665H0.333334V7.83331H10.475L5.825 12.4916L7 13.6666L13.6667 6.99998L7 0.333313Z", fill: "#19303D" })); }, Mb = function (e) { var t = e.name, n = e.logo; return "" !== n ? Pt.exports.createElement(Lb, { src: n }) : Pt.exports.createElement(Rb, { alignItems: "center", justifyContent: "center" }, t[0]); }, jb = function (e) { var t = e.type; return "eligible_to_join_by_email_domain" === t || "pending_member" === t ? Pt.exports.createElement(Av, null, "Join") : "invited_member" === t ? Pt.exports.createElement(Av, null, "Accept Invite") : Pt.exports.createElement(Pt.exports.Fragment, null); }, Nb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = function () { return n({ type: "transition", screen: Bm.Main }); }, s = Dy("stytch.discovery.organization.create", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), u = s.trigger; return s.isMutating ? Pt.exports.createElement(Ob, null) : i ? Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, "Create an organization to get started"), Pt.exports.createElement(Uy, { onClick: function () { return u(); } }, "Create an organization"), Pt.exports.createElement(Av, null, t.formState.discoveryState.email, " does not have an account. Think this is a mistake? Try a different email address, or contact your admin.")) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, t.formState.discoveryState.email, " does not belong to any organizations."), Pt.exports.createElement(Av, null, "Make sure your email address is correct. Otherwise, you might need to be invited by your admin."), Pt.exports.createElement(Uy, { variant: "outlined", onClick: a }, "Try a different email address")); }, zb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = Dy("stytch.discovery.intermediateSessions.exchange", (function (e, n) { var i = n.arg.organizationId; return r.discovery.intermediateSessions.exchange({ organization_id: i, intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); } }), s = a.trigger, u = a.isMutating, l = Dy("stytch.discovery.create.organization", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), c = l.trigger, f = l.isMutating; return u ? Pt.exports.createElement(Cb, null) : f ? Pt.exports.createElement(Ob, null) : 0 === t.formState.discoveryState.discoveredOrganizations.length ? Pt.exports.createElement(Nb, null) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: function () { return n({ type: "transition", screen: Bm.Main }); } }), Pt.exports.createElement(Av, { size: "header" }, "Select an organization to continue"), Pt.exports.createElement(Tb, { direction: "column" }, t.formState.discoveryState.discoveredOrganizations.map((function (e) { var t = e.organization, n = e.membership; return Pt.exports.createElement(Pb, { padding: 8, justifyContent: "space-between", key: t.organization_id, alignItems: "center", onClick: function () { return s({ organizationId: t.organization_id }); } }, Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(Mb, { name: t.organization_name, logo: t.organization_logo_url }), Pt.exports.createElement(Av, null, t.organization_name)), Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(jb, { type: n.type }), Pt.exports.createElement(Ib, null))); }))), i && Pt.exports.createElement(xv, { direction: "column", gap: 8 }, Pt.exports.createElement(cb, null), Pt.exports.createElement(Uy, { variant: "outlined", onClick: function () { return c(); } }, "Create an organization"))); }, Db = function () { return Pt.exports.createElement("svg", { width: "201", height: "200", viewBox: "0 0 201 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("g", { opacity: "0.1" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 0C155.729 0 200.5 44.7715 200.5 99.9999C200.5 155.229 155.729 200 100.5 200C45.2715 200 0.5 155.229 0.5 99.9999C0.5 44.7715 45.2715 0 100.5 0Z", fill: "url(#paint0_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.3" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 17.5728C146.023 17.5728 182.927 54.4767 182.927 99.9998C182.927 145.523 146.023 182.427 100.5 182.427C54.9768 182.427 18.0729 145.523 18.0729 99.9998C18.0729 54.4767 54.9768 17.5728 100.5 17.5728Z", fill: "url(#paint1_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.7" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 32.231C137.988 32.231 168.378 62.6208 168.378 100.109C168.378 137.597 137.988 167.987 100.5 167.987C63.012 167.987 32.6222 137.597 32.6222 100.109C32.6222 62.6208 63.012 32.231 100.5 32.231Z", fill: "url(#paint2_linear_1356_5135)" })), Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "#00AC26", fillOpacity: "0.12" }), Pt.exports.createElement("mask", { id: "mask0_1356_5135", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "49", y: "48", width: "103", height: "104" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "white" })), Pt.exports.createElement("g", { mask: "url(#mask0_1356_5135)" }), Pt.exports.createElement("path", { d: "M88 117.5L70.5 100L64.6667 105.833L88 129.167L138 79.1666L132.167 73.3333L88 117.5Z", fill: "white" }), Pt.exports.createElement("defs", null, Pt.exports.createElement("linearGradient", { id: "paint0_linear_1356_5135", x1: "-86.6375", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "white" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#09F33D" })), Pt.exports.createElement("linearGradient", { id: "paint1_linear_1356_5135", x1: "-86.6374", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#00AC26", stopOpacity: "0.4" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#BDFFBC", stopOpacity: "0.58" })), Pt.exports.createElement("linearGradient", { id: "paint2_linear_1356_5135", x1: "-86.6375", y1: "160.493", x2: "170.169", y2: "338.406", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#F8FFF5" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#00AC26", stopOpacity: "0.26" })))); }, Bb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 24, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Success!"), Pt.exports.createElement(Av, null, "You have successfully logged in."), Pt.exports.createElement("div", { style: { display: "block", marginLeft: "auto", marginRight: "auto", width: "50%" } }, Pt.exports.createElement(Db, null))); }, Fb = Zo.div(k || (k = E(["\n  width: ", ";\n  font-family: ", ";\n  padding: 24px 32px;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), (function (e) { return e.theme.container.width; }), (function (e) { return e.theme.typography.fontFamily; }), (function (e) { return e.theme.container.backgroundColor; }), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; })), Ub = Zo.img(S || (S = E(["\n  width: 150px;\n"]))), Vb = function () { var e, t = B(Gm(), 2), n = t[0], r = t[1], o = Km(), i = $m(), a = Xo().displayWatermark, s = n.screen, u = (V(e = {}, Bm.Main, pn.createElement(mb, null)), V(e, Bm.EmailConfirmation, pn.createElement(Sb, null)), V(e, Bm.LoggedIn, pn.createElement(Bb, null)), V(e, Bm.Discovery, pn.createElement(zb, null)), V(e, Bm.ErrorOrganization, pn.createElement(Tv, { errorMessage: "The organization you are looking for could not be found. If you think this is a mistake, contact your admin." })), V(e, Bm.Error, pn.createElement(Tv, { errorMessage: "Something went wrong. Try again later or contact your admin for help." })), e), l = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.LoggedIn }); }, c = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.Error }); }, f = Dy("stytch.magicLinks.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.authenticate({ magic_links_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), d = f.trigger, p = f.isMutating, h = Dy("stytch.sso.authenticate", (function (e, t) { var n = t.arg.token; return o.sso.authenticate({ sso_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), m = h.trigger, g = h.isMutating, v = Dy("stytch.magicLinks.discovery.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.discovery.authenticate({ discovery_magic_links_token: n }); }), { onSuccess: function (e) { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "set_discovery_state", email: e.email_address, discoveredOrganizations: e.discovered_organizations, intermediateSessionToken: e.intermediate_session_token }), r({ type: "transition", screen: Bm.Discovery }); }, onError: c }), y = v.trigger, b = v.isMutating, w = By().isSearching; return Pt.exports.useEffect((function () { var e = new URL(window.location.href), t = e.searchParams.get("stytch_token_type"), n = e.searchParams.get("token"); n && t && ("discovery" === t ? y({ token: n }) : "sso" === t ? m({ token: n }) : "multi_tenant_magic_links" === t && d({ token: n })); }), []), p || g || b ? pn.createElement(Fb, null, pn.createElement(Cb, null)) : w ? pn.createElement(Fb, null, pn.createElement(Ob, null)) : pn.createElement(Fb, null, u[s], pn.createElement(kv, null), a && pn.createElement(xv, { justifyContent: "center", marginTop: 24 }, pn.createElement("a", { href: "https://stytch.com/", target: "_blank", rel: "noreferrer" }, pn.createElement(Ub, { alt: "Powered by Stytch", src: "https://public-assets.stytch.com/et_powered_by_stytch_logo.png" })))); }, Hb = "stytch-b2b-ui", qb = (Vy = function (e) { var t = e.client, n = e.styles, r = e.callbacks, o = e.config, i = B(Pt.exports.useState((function () { return $e(t).bootstrap.getSync().displayWatermark; })), 2), a = i[0], s = i[1]; Pt.exports.useEffect((function () { $e(t).bootstrap.getAsync().then((function (e) { var t = e.displayWatermark; s(t); })); }), [t]); var u = Object.assign(Object.assign({}, Um), { flowState: Object.assign(Object.assign({}, Um.flowState), { type: o.authFlowType }) }), l = function (e) { var t = e.styles, n = e.displayWatermark; return Pt.exports.useMemo((function () { return function (e) { var t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1]; return { typography: { fontFamily: e.fontFamily, header: { fontFamily: e.fontFamily, fontSize: 24, fontWeight: 600, lineHeight: "30px" }, body: { fontFamily: e.fontFamily, fontSize: 16, fontWeight: "normal", lineHeight: "21px" }, helper: { fontFamily: e.fontFamily, fontSize: 14, fontWeight: "400", lineHeight: "20px", whiteSpace: "pre-wrap" } }, colors: { primary: e.colors.primary, secondary: e.colors.secondary, success: e.colors.success, error: e.colors.error, disabled: "#F3F5F6", disabledText: "#8296A1" }, container: { width: e.container.width, border: "1px solid ".concat(e.container.borderColor), borderRadius: e.container.borderRadius, backgroundColor: e.container.backgroundColor }, buttons: { primary: { backgroundColor: e.buttons.primary.backgroundColor, textColor: e.buttons.primary.textColor, border: "1px solid ".concat(e.buttons.primary.borderColor), borderRadius: e.buttons.primary.borderRadius }, secondary: { backgroundColor: e.buttons.secondary.backgroundColor, textColor: e.buttons.secondary.textColor, border: "1px solid ".concat(e.buttons.secondary.borderColor), borderRadius: e.buttons.secondary.borderRadius } }, displayHeader: !e.hideHeaderText, displayWatermark: t, logo: { logoImageUrl: e.logo.logoImageUrl } }; }(Zm({}, tg, t), n); }), [t, n]); }({ styles: n, displayWatermark: a }); return pn.createElement(qm, { client: t, callbacks: r, config: o, initialState: u }, pn.createElement(Ko, { theme: l }, pn.createElement(Vb, null))); }, Hy = Hb, "undefined" == typeof window ? function () { return null; } : function (e) { var t = function (e, t) { var n = customElements.get(t); if (n)
+    return { GMAIL: "https://mail.google.com/mail/u/0/#search/in%3Aanywhere", OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/referrer=unread" }; var t = encodeURIComponent("from:@".concat(e, " in:anywhere")); return { GMAIL: "https://mail.google.com/mail/u/0/#search/".concat(t), OUTLOOK: "https://outlook.office.com/mail/0/inbox", YAHOO: "https://mail.yahoo.com/d/search/keyword=".concat(e) }; }(t), i = o.GMAIL, a = o.YAHOO, s = o.OUTLOOK; return pn.createElement(xv, { direction: "column", gap: 24 }, pn.createElement(Av, { size: "header" }, "Check your email"), pn.createElement(xv, { direction: "column", gap: 12 }, pn.createElement(Av, null, "An email was sent to ", pn.createElement("b", null, r), "."), pn.createElement(xv, { direction: "column", gap: 8 }, pn.createElement(_b, { href: i, label: "Gmail", Icon: pn.createElement(vb, null) }), pn.createElement(_b, { href: a, label: "Yahoo", Icon: pn.createElement(bb, null) }), pn.createElement(_b, { href: s, label: "Outlook", Icon: pn.createElement(yb, null) }))), pn.createElement(Uy, { onClick: n }, "Try again")); }, Sb = function () { var e, t, n, r, o, i, a, s = B(Gm(), 2), u = s[0], l = s[1], c = (n = Km(), r = $m(), o = B(Pt.exports.useState((function () { return $e(n).bootstrap.getSync().emailDomains; })), 2), i = o[0], a = o[1], Pt.exports.useEffect((function () { $e(n).bootstrap.getAsync().then((function (e) { var t = e.emailDomains; a(t); })); }), [n]), (null === (e = r.emailMagicLinksOptions) || void 0 === e ? void 0 : e.domainHint) ? null === (t = r.emailMagicLinksOptions) || void 0 === t ? void 0 : t.domainHint : 1 === i.length ? i[0] : null); return pn.createElement(kb, { emailDomain: c, reset: function () { l({ type: "set_magic_link_email", email: "" }), l({ type: "transition", screen: Bm.Main }); }, email: u.formState.magicLinkState.email }); }, Eb = Zo.button(v || (v = E(["\n  all: unset;\n  cursor: pointer;\n"]))), xb = function (e) { var t = e.color; return pn.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, pn.createElement("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: t })); }, Ab = function (e) { var t = e.onClick, n = Xo(); return pn.createElement(Eb, { onClick: t }, pn.createElement(xb, { color: n.colors.primary })); }, Cb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Logging in..."), Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Ob = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 36, alignItems: "center" }, Pt.exports.createElement(Qy, { size: 100, thickness: 8 })); }, Tb = Zo(xv)(y || (y = E(["\n  border: ", ";\n  border-radius: ", ";\n  > div + div {\n    border-top: ", ";\n  }\n"])), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; }), (function (e) { return e.theme.container.border; })), Pb = Zo(xv)(b || (b = E(["\n  cursor: pointer;\n"]))), Lb = Zo.img(w || (w = E(["\n  height: 40px;\n  width: 40px;\n  border-radius: 4px;\n"]))), Rb = Zo(xv)(_ || (_ = E(["\n  height: 40px;\n  width: 40px;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 4px;\n\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 25px;\n"])), (function (e) { return e.theme.buttons.primary.backgroundColor; }), (function (e) { return e.theme.buttons.primary.textColor; })), Ib = function () { return Pt.exports.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("path", { d: "M7 0.333313L5.825 1.50831L10.475 6.16665H0.333334V7.83331H10.475L5.825 12.4916L7 13.6666L13.6667 6.99998L7 0.333313Z", fill: "#19303D" })); }, Mb = function (e) { var t = e.name, n = e.logo; return "" !== n ? Pt.exports.createElement(Lb, { src: n }) : Pt.exports.createElement(Rb, { alignItems: "center", justifyContent: "center" }, t[0]); }, jb = function (e) { var t = e.type; return "eligible_to_join_by_email_domain" === t || "pending_member" === t ? Pt.exports.createElement(Av, null, "Join") : "invited_member" === t ? Pt.exports.createElement(Av, null, "Accept Invite") : Pt.exports.createElement(Pt.exports.Fragment, null); }, Nb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = function () { return n({ type: "transition", screen: Bm.Main }); }, s = Dy("stytch.discovery.organization.create", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), u = s.trigger; return s.isMutating ? Pt.exports.createElement(Ob, null) : i ? Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, "Create an organization to get started"), Pt.exports.createElement(Uy, { onClick: function () { return u(); } }, "Create an organization"), Pt.exports.createElement(Av, null, t.formState.discoveryState.email, " does not have an account. Think this is a mistake? Try a different email address, or contact your admin.")) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: a }), Pt.exports.createElement(Av, { size: "header" }, t.formState.discoveryState.email, " does not belong to any organizations."), Pt.exports.createElement(Av, null, "Make sure your email address is correct. Otherwise, you might need to be invited by your admin."), Pt.exports.createElement(Uy, { variant: "outlined", onClick: a }, "Try a different email address")); }, zb = function () { var e = B(Gm(), 2), t = e[0], n = e[1], r = Km(), o = $m(), i = Fy().createOrganizationEnabled, a = Dy("stytch.discovery.intermediateSessions.exchange", (function (e, n) { var i = n.arg.organizationId; return r.discovery.intermediateSessions.exchange({ organization_id: i, intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); } }), s = a.trigger, u = a.isMutating, l = Dy("stytch.discovery.organization.create", (function () { return r.discovery.organizations.create({ intermediate_session_token: t.formState.discoveryState.intermediateSessionToken, session_duration_minutes: o.sessionOptions.sessionDurationMinutes }); }), { onSuccess: function () { n({ type: "transition", screen: Bm.LoggedIn }); }, onError: function () { n({ type: "transition", screen: Bm.Error }); } }), c = l.trigger, f = l.isMutating; return u ? Pt.exports.createElement(Cb, null) : f ? Pt.exports.createElement(Ob, null) : 0 === t.formState.discoveryState.discoveredOrganizations.length ? Pt.exports.createElement(Nb, null) : Pt.exports.createElement(xv, { direction: "column", gap: 24 }, Pt.exports.createElement(Ab, { onClick: function () { return n({ type: "transition", screen: Bm.Main }); } }), Pt.exports.createElement(Av, { size: "header" }, "Select an organization to continue"), Pt.exports.createElement(Tb, { direction: "column" }, t.formState.discoveryState.discoveredOrganizations.map((function (e) { var t = e.organization, n = e.membership; return Pt.exports.createElement(Pb, { padding: 8, justifyContent: "space-between", key: t.organization_id, alignItems: "center", onClick: function () { return s({ organizationId: t.organization_id }); } }, Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(Mb, { name: t.organization_name, logo: t.organization_logo_url }), Pt.exports.createElement(Av, null, t.organization_name)), Pt.exports.createElement(xv, { gap: 4, alignItems: "center" }, Pt.exports.createElement(jb, { type: n.type }), Pt.exports.createElement(Ib, null))); }))), i && Pt.exports.createElement(xv, { direction: "column", gap: 8 }, Pt.exports.createElement(cb, null), Pt.exports.createElement(Uy, { variant: "outlined", onClick: function () { return c(); } }, "Create an organization"))); }, Db = function () { return Pt.exports.createElement("svg", { width: "201", height: "200", viewBox: "0 0 201 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, Pt.exports.createElement("g", { opacity: "0.1" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 0C155.729 0 200.5 44.7715 200.5 99.9999C200.5 155.229 155.729 200 100.5 200C45.2715 200 0.5 155.229 0.5 99.9999C0.5 44.7715 45.2715 0 100.5 0Z", fill: "url(#paint0_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.3" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 17.5728C146.023 17.5728 182.927 54.4767 182.927 99.9998C182.927 145.523 146.023 182.427 100.5 182.427C54.9768 182.427 18.0729 145.523 18.0729 99.9998C18.0729 54.4767 54.9768 17.5728 100.5 17.5728Z", fill: "url(#paint1_linear_1356_5135)" })), Pt.exports.createElement("g", { opacity: "0.7" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.5 32.231C137.988 32.231 168.378 62.6208 168.378 100.109C168.378 137.597 137.988 167.987 100.5 167.987C63.012 167.987 32.6222 137.597 32.6222 100.109C32.6222 62.6208 63.012 32.231 100.5 32.231Z", fill: "url(#paint2_linear_1356_5135)" })), Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "#00AC26", fillOpacity: "0.12" }), Pt.exports.createElement("mask", { id: "mask0_1356_5135", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "49", y: "48", width: "103", height: "104" }, Pt.exports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M100.605 48.7734C128.955 48.7734 151.937 71.7553 151.937 100.105C151.937 128.455 128.955 151.437 100.605 151.437C72.255 151.437 49.2731 128.455 49.2731 100.105C49.2731 71.7553 72.255 48.7734 100.605 48.7734Z", fill: "white" })), Pt.exports.createElement("g", { mask: "url(#mask0_1356_5135)" }), Pt.exports.createElement("path", { d: "M88 117.5L70.5 100L64.6667 105.833L88 129.167L138 79.1666L132.167 73.3333L88 117.5Z", fill: "white" }), Pt.exports.createElement("defs", null, Pt.exports.createElement("linearGradient", { id: "paint0_linear_1356_5135", x1: "-86.6375", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "white" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#09F33D" })), Pt.exports.createElement("linearGradient", { id: "paint1_linear_1356_5135", x1: "-86.6374", y1: "160.384", x2: "170.169", y2: "338.297", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#00AC26", stopOpacity: "0.4" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#BDFFBC", stopOpacity: "0.58" })), Pt.exports.createElement("linearGradient", { id: "paint2_linear_1356_5135", x1: "-86.6375", y1: "160.493", x2: "170.169", y2: "338.406", gradientUnits: "userSpaceOnUse" }, Pt.exports.createElement("stop", { stopColor: "#F8FFF5" }), Pt.exports.createElement("stop", { offset: "1", stopColor: "#00AC26", stopOpacity: "0.26" })))); }, Bb = function () { return Pt.exports.createElement(xv, { direction: "column", gap: 24, alignItems: "center" }, Pt.exports.createElement(Av, { size: "header" }, "Success!"), Pt.exports.createElement(Av, null, "You have successfully logged in."), Pt.exports.createElement(Db, null)); }, Fb = Zo.div(k || (k = E(["\n  width: ", ";\n  font-family: ", ";\n  padding: 24px 32px;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), (function (e) { return e.theme.container.width; }), (function (e) { return e.theme.typography.fontFamily; }), (function (e) { return e.theme.container.backgroundColor; }), (function (e) { return e.theme.container.border; }), (function (e) { return e.theme.container.borderRadius; })), Ub = Zo.img(S || (S = E(["\n  width: 150px;\n"]))), Vb = function () { var e, t = B(Gm(), 2), n = t[0], r = t[1], o = Km(), i = $m(), a = Xo().displayWatermark, s = n.screen, u = (V(e = {}, Bm.Main, pn.createElement(mb, null)), V(e, Bm.EmailConfirmation, pn.createElement(Sb, null)), V(e, Bm.LoggedIn, pn.createElement(Bb, null)), V(e, Bm.Discovery, pn.createElement(zb, null)), V(e, Bm.ErrorOrganization, pn.createElement(Tv, { errorMessage: "The organization you are looking for could not be found. If you think this is a mistake, contact your admin." })), V(e, Bm.Error, pn.createElement(Tv, { errorMessage: "Something went wrong. Try again later or contact your admin for help." })), e), l = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.LoggedIn }); }, c = function () { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "transition", screen: Bm.Error }); }, f = Dy("stytch.magicLinks.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.authenticate({ magic_links_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), d = f.trigger, p = f.isMutating, h = Dy("stytch.sso.authenticate", (function (e, t) { var n = t.arg.token; return o.sso.authenticate({ sso_token: n, session_duration_minutes: i.sessionOptions.sessionDurationMinutes }); }), { onSuccess: l, onError: c }), m = h.trigger, g = h.isMutating, v = Dy("stytch.magicLinks.discovery.authenticate", (function (e, t) { var n = t.arg.token; return o.magicLinks.discovery.authenticate({ discovery_magic_links_token: n }); }), { onSuccess: function (e) { window.history.replaceState(null, window.document.title, window.location.pathname), r({ type: "set_discovery_state", email: e.email_address, discoveredOrganizations: e.discovered_organizations, intermediateSessionToken: e.intermediate_session_token }), r({ type: "transition", screen: Bm.Discovery }); }, onError: c }), y = v.trigger, b = v.isMutating, w = By().isSearching; return Pt.exports.useEffect((function () { var e = new URL(window.location.href), t = e.searchParams.get("stytch_token_type"), n = e.searchParams.get("token"); n && t && ("discovery" === t ? y({ token: n }) : "sso" === t ? m({ token: n }) : "multi_tenant_magic_links" === t && d({ token: n })); }), []), p || g || b ? pn.createElement(Fb, null, pn.createElement(Cb, null)) : w ? pn.createElement(Fb, null, pn.createElement(Ob, null)) : pn.createElement(Fb, null, u[s], pn.createElement(kv, null), a && pn.createElement(xv, { justifyContent: "center", marginTop: 24 }, pn.createElement("a", { href: "https://stytch.com/", target: "_blank", rel: "noreferrer" }, pn.createElement(Ub, { alt: "Powered by Stytch", src: "https://public-assets.stytch.com/et_powered_by_stytch_logo.png" })))); }, Hb = "stytch-b2b-ui", qb = (Vy = function (e) { var t = e.client, n = e.styles, r = e.callbacks, o = e.config, i = B(Pt.exports.useState((function () { return $e(t).bootstrap.getSync().displayWatermark; })), 2), a = i[0], s = i[1]; Pt.exports.useEffect((function () { $e(t).bootstrap.getAsync().then((function (e) { var t = e.displayWatermark; s(t); })); }), [t]); var u = Object.assign(Object.assign({}, Um), { flowState: Object.assign(Object.assign({}, Um.flowState), { type: o.authFlowType }) }), l = function (e) { var t = e.styles, n = e.displayWatermark; return Pt.exports.useMemo((function () { return function (e) { var t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1]; return { typography: { fontFamily: e.fontFamily, header: { fontFamily: e.fontFamily, fontSize: 24, fontWeight: 600, lineHeight: "30px" }, body: { fontFamily: e.fontFamily, fontSize: 16, fontWeight: "normal", lineHeight: "21px" }, helper: { fontFamily: e.fontFamily, fontSize: 14, fontWeight: "400", lineHeight: "20px", whiteSpace: "pre-wrap" } }, colors: { primary: e.colors.primary, secondary: e.colors.secondary, success: e.colors.success, error: e.colors.error, disabled: "#F3F5F6", disabledText: "#8296A1" }, container: { width: e.container.width, border: "1px solid ".concat(e.container.borderColor), borderRadius: e.container.borderRadius, backgroundColor: e.container.backgroundColor }, buttons: { primary: { backgroundColor: e.buttons.primary.backgroundColor, textColor: e.buttons.primary.textColor, border: "1px solid ".concat(e.buttons.primary.borderColor), borderRadius: e.buttons.primary.borderRadius }, secondary: { backgroundColor: e.buttons.secondary.backgroundColor, textColor: e.buttons.secondary.textColor, border: "1px solid ".concat(e.buttons.secondary.borderColor), borderRadius: e.buttons.secondary.borderRadius } }, displayHeader: !e.hideHeaderText, displayWatermark: t, logo: { logoImageUrl: e.logo.logoImageUrl } }; }(Zm({}, tg, t), n); }), [t, n]); }({ styles: n, displayWatermark: a }); return pn.createElement(qm, { client: t, callbacks: r, config: o, initialState: u }, pn.createElement(Ko, { theme: l }, pn.createElement(Vb, null))); }, Hy = Hb, "undefined" == typeof window ? function () { return null; } : function (e) { var t = function (e, t) { var n = customElements.get(t); if (n)
     return n; var r = function (t) { P(r, C(HTMLElement)); var n = R(r); function r(e) { var t; return N(this, r), (t = n.call(this)).props = e, t.rootRef = t.attachShadow({ mode: "open" }), t; } return D(r, [{ key: "connectedCallback", value: function () { this.styleSlot = document.createElement("section"), this.rootRef.appendChild(this.styleSlot), this.mountPoint = document.createElement("span"), this.styleSlot.appendChild(this.mountPoint), this.render(this.props); } }, { key: "disconnectedCallback", value: function () { this.mountPoint && gm.unmountComponentAtNode(this.mountPoint); } }, { key: "renderOneTap", value: function (e) { var t, n, r, o = null === (r = null === (n = null === (t = null == e ? void 0 : e.config) || void 0 === t ? void 0 : t.oauthOptions) || void 0 === n ? void 0 : n.providers) || void 0 === r ? void 0 : r.find((function (e) { return e.type === fm.Google && e.one_tap; })), i = this.innerHTML.includes(Dm); o ? i || (this.innerHTML = Dm) : this.innerHTML = ""; } }, { key: "render", value: function (t) { if (!this.mountPoint)
             throw Error("Cannot render - no mount point defined"); if (!this.styleSlot)
-            throw Error("Cannot render - no style slot defined"); this.renderOneTap(t), gm.render(pn.createElement(xo, { target: this.styleSlot }, pn.createElement(e, Object.assign({}, t))), this.mountPoint); } }]), r; }(); return customElements.define(t, r), r; }(Vy, Hy); return new t(e); }); (function (e) { P(n, Tt); var t = R(n); function n() { N(this, n), function (e) { var t = "StytchUIClient" === e ? "import { createStytchUIClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchUIClient('public-token-...');\n" : "import { createStytchHeadlessClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchHeadlessClient('public-token-...');\n"; if ("undefined" == typeof window)
+            throw Error("Cannot render - no style slot defined"); this.renderOneTap(t), gm.render(pn.createElement(xo, { target: this.styleSlot }, pn.createElement(e, Object.assign({}, t))), this.mountPoint); } }]), r; }(); return customElements.define(t, r), r; }(Vy, Hy); return new t(e); }), Wb = function (e) { P(n, Tt); var t = R(n); function n() { N(this, n), function (e) { var t = "StytchUIClient" === e ? "import { createStytchUIClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchUIClient('public-token-...');\n" : "import { createStytchHeadlessClient } from '@stytch/nextjs/ui';\n    \nconst stytch = createStytchHeadlessClient('public-token-...');\n"; if ("undefined" == typeof window)
     throw new Error("The ".concat(e, " is not compatible with server-side environments.\nIf using nextjs, use the create").concat(e, " method instead.\n```\n").concat(t, "\n```\n")); }("StytchUIClient"); for (var e = arguments.length, r = new Array(e), o = 0; o < e; o++)
     r[o] = arguments[o]; return t.call.apply(t, [this].concat(r)); } return D(n, [{ key: "mount", value: function (e) { var t, n = e.elementId, r = e.styles, o = e.callbacks, i = e.config, a = document.querySelector(n); if (!a) {
             var s = "The selector you specified (".concat(n, ") applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mountLogin().");
@@ -5548,7 +5613,7 @@ var Vy, Hy, qy = Yo(o || (o = E(["\n  0% {\n    transform: rotate(0deg);\n  }\n
         }
         else {
             a.firstChild.render({ client: this, config: i, callbacks: o, styles: r });
-        } } }]), n; })();
+        } } }]), n; }();
 
 /**
  * Creates a Headless Stytch client object to call the stytch B2B APIs.
@@ -5570,8 +5635,31 @@ const createStytchB2BHeadlessClient = (...args) => {
     return new Tt(...args);
 };
 
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchB2BHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BUIClient}
+ */
+const createStytchB2BUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new Wb(...args);
+};
+
+exports.StytchB2B = StytchB2B;
 exports.StytchB2BProvider = StytchB2BProvider;
 exports.createStytchB2BHeadlessClient = createStytchB2BHeadlessClient;
+exports.createStytchB2BUIClient = createStytchB2BUIClient;
 exports.useStytchB2BClient = useStytchB2BClient;
 exports.useStytchMember = useStytchMember;
 exports.useStytchMemberSession = useStytchMemberSession;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -22,7 +22,7 @@
   "author": "Stytch",
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "0.13.0",
+    "@stytch/vanilla-js": "0.13.4",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react-test-renderer": "18.0.0",
@@ -30,7 +30,7 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^0.13.0",
+    "@stytch/vanilla-js": "^0.13.4",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },