@stytch/react 18.2.0 → 18.3.1

package/dist/adminPortal/index.esm.js

@@ -1,4 +1,4 @@
-import React$d, { useRef, useLayoutEffect } from 'react';
+import React$j, { useRef, useLayoutEffect } from 'react';
 import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-8acafb28.js';
 import { i as invariant, n as noProviderError } from '../invariant-568a7633.js';
 
@@ -427,10 +427,24 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
-var LOCAL_STORAGE_KEY_PREFIX = 'stytch_sdk_state_';
-var getLocalStorageKey = function getLocalStorageKey(publicToken) {
+var debounce$2 = function debounce(func) {
+    var waitFor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+    var timeout;
+    var debounced = function debounced() {
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+            args[_key4] = arguments[_key4];
+        }
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+            return func.apply(void 0, args);
+        }, waitFor);
+    };
+    return debounced;
+};
+var PERSISTENT_STORAGE_KEY_PREFIX = 'stytch_sdk_state_';
+var getPersistentStorageKey = function getPersistentStorageKey(publicToken) {
     var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    return "".concat(LOCAL_STORAGE_KEY_PREFIX).concat(publicToken).concat(key ? "::".concat(key) : '');
+    return "".concat(PERSISTENT_STORAGE_KEY_PREFIX).concat(publicToken).concat(key ? "::".concat(key) : '');
 };
 var internalSymB2B = Symbol["for"]('stytch__internal_b2b');
 var readB2BInternals = function readB2BInternals(obj) {
@@ -598,7 +612,7 @@ function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbo
         if (didErr)
             throw err;
     } } }; }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try {
+function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) { try {
     var info = gen[key](arg);
     var value = info.value;
 }
@@ -611,7 +625,7 @@ catch (error) {
 else {
     Promise.resolve(value).then(_next, _throw);
 } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _asyncToGenerator$1(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _unsupportedIterableToArray$3(arr, i) || _nonIterableRest$2(); }
 function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray$3(o, minLen) { if (!o)
@@ -652,13 +666,13 @@ function _iterableToArrayLimit$2(r, l) { var t = null == r ? null : "undefined"
 } }
 function _arrayWithHoles$2(arr) { if (Array.isArray(arr))
     return arr; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) {
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(e);
     r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o);
 } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); });
+    r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); });
 } return e; }
 function _defineProperty$2(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) {
     Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
@@ -4044,7 +4058,7 @@ var isFunction$1 = function isFunction(v) {
     return typeof v == 'function';
 };
 var mergeObjects = function mergeObjects(a, b) {
-    return _objectSpread(_objectSpread({}, a), b);
+    return _objectSpread$1(_objectSpread$1({}, a), b);
 };
 var STR_UNDEFINED = 'undefined';
 var isWindowDefined = (typeof window === "undefined" ? "undefined" : _typeof$6(window)) != STR_UNDEFINED;
@@ -4161,7 +4175,7 @@ var rAF = function rAF(f) {
 var useIsomorphicLayoutEffect = IS_SERVER ? p$3 : y$2;
 var navigatorConnection = typeof navigator !== 'undefined' && navigator.connection;
 var slowConnection = !IS_SERVER && navigatorConnection && (['slow-2g', '2g'].includes(navigatorConnection.effectiveType) || navigatorConnection.saveData);
-var serialize = function serialize(key) {
+var serialize$1 = function serialize(key) {
     if (isFunction$1(key)) {
         try {
             key = key();
@@ -4193,20 +4207,20 @@ function internalMutate() {
     return _internalMutate.apply(this, arguments);
 }
 function _internalMutate() {
-    _internalMutate = _asyncToGenerator(/*#__PURE__*/ _regeneratorRuntime$1().mark(function _callee3() {
+    _internalMutate = _asyncToGenerator$1(/*#__PURE__*/ _regeneratorRuntime$1().mark(function _callee3() {
         var _len, args, _key2, cache, _key, _data, _opts, options, populateCache, rollbackOnErrorOption, optimisticData, revalidate, rollbackOnError, throwOnError, keyFilter, matchedKeys, it, keyIt, key, mutateByKey, _mutateByKey, _args3 = arguments;
         return _regeneratorRuntime$1().wrap(function _callee3$(_context3) {
             while (1)
                 switch (_context3.prev = _context3.next) {
                     case 0:
                         _mutateByKey = function _mutateByKey3() {
-                            _mutateByKey = _asyncToGenerator(/*#__PURE__*/ _regeneratorRuntime$1().mark(function _callee2(_k) {
+                            _mutateByKey = _asyncToGenerator$1(/*#__PURE__*/ _regeneratorRuntime$1().mark(function _callee2(_k) {
                                 var _serialize3, _serialize4, key, _createCacheHelper3, _createCacheHelper4, get, set, _SWRGlobalState$get5, _SWRGlobalState$get6, EVENT_REVALIDATORS, MUTATION, FETCH, revalidators, startRevalidate, data, error, beforeMutationTs, hasOptimisticData, state, displayedData, currentData, committedData, res;
                                 return _regeneratorRuntime$1().wrap(function _callee2$(_context2) {
                                     while (1)
                                         switch (_context2.prev = _context2.next) {
                                             case 0:
-                                                _serialize3 = serialize(_k), _serialize4 = _slicedToArray$2(_serialize3, 1), key = _serialize4[0];
+                                                _serialize3 = serialize$1(_k), _serialize4 = _slicedToArray$2(_serialize3, 1), key = _serialize4[0];
                                                 if (key) {
                                                     _context2.next = 3;
                                                     break;
@@ -4497,7 +4511,7 @@ var useSWRConfig = function useSWRConfig() {
 var middleware = function middleware(useSWRNext) {
     return function (key_, fetcher_, config) {
         var fetcher = fetcher_ && function () {
-            var key = serialize(key_)[0];
+            var key = serialize$1(key_)[0];
             var _SWRGlobalState$get = SWRGlobalState.get(cache$3), _SWRGlobalState$get2 = _slicedToArray$2(_SWRGlobalState$get, 4), PRELOAD = _SWRGlobalState$get2[3];
             var req = PRELOAD[key];
             if (req) {
@@ -4538,6 +4552,18 @@ var subscribeCallback = function subscribeCallback(key, callbacks, callback) {
         }
     };
 };
+var withMiddleware = function withMiddleware(useSWR, middleware) {
+    return function () {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key4 = 0; _key4 < _len3; _key4++) {
+            args[_key4] = arguments[_key4];
+        }
+        var _normalize3 = normalize(args), _normalize4 = _slicedToArray$2(_normalize3, 3), key = _normalize4[0], fn = _normalize4[1], config = _normalize4[2];
+        var uses = (config.use || []).concat(middleware);
+        return useSWR(key, fn, _objectSpread$1(_objectSpread$1({}, config), {}, {
+            use: uses
+        }));
+    };
+};
 setupDevTools();
 var WITH_DEDUPE = {
     dedupe: true
@@ -4545,7 +4571,7 @@ var WITH_DEDUPE = {
 var useSWRHandler = function useSWRHandler(_key, fetcher, config) {
     var cache = config.cache, compare = config.compare, suspense = config.suspense, fallbackData = config.fallbackData, revalidateOnMount = config.revalidateOnMount, revalidateIfStale = config.revalidateIfStale, refreshInterval = config.refreshInterval, refreshWhenHidden = config.refreshWhenHidden, refreshWhenOffline = config.refreshWhenOffline, keepPreviousData = config.keepPreviousData;
     var _SWRGlobalState$get3 = SWRGlobalState.get(cache), _SWRGlobalState$get4 = _slicedToArray$2(_SWRGlobalState$get3, 3), EVENT_REVALIDATORS = _SWRGlobalState$get4[0], MUTATION = _SWRGlobalState$get4[1], FETCH = _SWRGlobalState$get4[2];
-    var _serialize = serialize(_key), _serialize2 = _slicedToArray$2(_serialize, 2), key = _serialize2[0], fnArg = _serialize2[1];
+    var _serialize = serialize$1(_key), _serialize2 = _slicedToArray$2(_serialize, 2), key = _serialize2[0], fnArg = _serialize2[1];
     var initialMountedRef = _$1(false);
     var unmountedRef = _$1(false);
     var keyRef = _$1(key);
@@ -4606,7 +4632,7 @@ var useSWRHandler = function useSWRHandler(_key, fetcher, config) {
             if (!shouldStartRequest) {
                 return snapshot;
             }
-            return _objectSpread({
+            return _objectSpread$1({
                 isValidating: true,
                 isLoading: true
             }, snapshot);
@@ -4651,7 +4677,7 @@ var useSWRHandler = function useSWRHandler(_key, fetcher, config) {
     var isValidating = isUndefined(cached.isValidating) ? defaultValidatingState : cached.isValidating;
     var isLoading = isUndefined(cached.isLoading) ? defaultValidatingState : cached.isLoading;
     var revalidate = T$2(/*#__PURE__*/ function () {
-        var _ref3 = _asyncToGenerator(/*#__PURE__*/ _regeneratorRuntime$1().mark(function _callee(revalidateOpts) {
+        var _ref3 = _asyncToGenerator$1(/*#__PURE__*/ _regeneratorRuntime$1().mark(function _callee(revalidateOpts) {
             var currentFetcher, newData, startAt, loading, opts, shouldStartNewRequest, callbackSafeguard, finalState, finishRequestAndUpdateState, cleanupState, initialState, _FETCH$key, mutationInfo, cacheData, currentConfig, shouldRetryOnError;
             return _regeneratorRuntime$1().wrap(function _callee$(_context) {
                 while (1)
@@ -4901,7 +4927,13 @@ var useSWRHandler = function useSWRHandler(_key, fetcher, config) {
         }
     };
 };
+var unstable_serialize = function unstable_serialize(key) {
+    return serialize$1(key)[0];
+};
 var useSWR = withArgs(useSWRHandler);
+var passwordManagerDisableAutofillProps = {
+    'data-1p-ignore': true
+};
 var extractErrorMessage = function extractErrorMessage(error) {
     if (error && _typeof$6(error) === 'object') {
         if ('error_message' in error && typeof error.error_message === 'string') {
@@ -4914,6 +4946,28 @@ var extractErrorMessage = function extractErrorMessage(error) {
 };
 
 var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o);
+} return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); });
+} return e; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try {
+    var info = gen[key](arg);
+    var value = info.value;
+}
+catch (error) {
+    reject(error);
+    return;
+} if (info.done) {
+    resolve(value);
+}
+else {
+    Promise.resolve(value).then(_next, _throw);
+} }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) {
     raw = strings.slice(0);
 } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -6413,10 +6467,19 @@ var multiKeyStore = { set: function set(cache, key1, key2, value) { var subCache
 var ThemeContext = /*#__PURE__*/ wn.createContext(null);
 function useTheme$1() { var theme = wn.useContext(ThemeContext); return theme; }
 var jss = createJss(jssPreset());
-var generateClassName = createGenerateClassName();
+var generateClassName$1 = createGenerateClassName();
 var sheetsManager = new Map();
-var defaultOptions = { disableGeneration: false, generateClassName: generateClassName, jss: jss, sheetsCache: null, sheetsManager: sheetsManager, sheetsRegistry: null };
+var defaultOptions = { disableGeneration: false, generateClassName: generateClassName$1, jss: jss, sheetsCache: null, sheetsManager: sheetsManager, sheetsRegistry: null };
 var StylesContext = /*#__PURE__*/ wn.createContext(defaultOptions);
+var injectFirstNode;
+function StylesProvider(props) { var children = props.children, _props$injectFirst = props.injectFirst, injectFirst = _props$injectFirst === void 0 ? false : _props$injectFirst, _props$disableGenerat = props.disableGeneration, disableGeneration = _props$disableGenerat === void 0 ? false : _props$disableGenerat, localOptions = _objectWithoutProperties$1(props, ["children", "injectFirst", "disableGeneration"]); var outerOptions = wn.useContext(StylesContext); var context = _extends$2({}, outerOptions, { disableGeneration: disableGeneration }, localOptions); if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {
+    if (!injectFirstNode) {
+        var head = document.head;
+        injectFirstNode = document.createComment('mui-inject-first');
+        head.insertBefore(injectFirstNode, head.firstChild);
+    }
+    context.jss = createJss({ plugins: jssPreset().plugins, insertionPoint: injectFirstNode });
+} return /*#__PURE__*/ wn.createElement(StylesContext.Provider, { value: context }, children); }
 var indexCounter = -1e9;
 function increment() { indexCounter += 1; return indexCounter; }
 var noopTheme = {};
@@ -8527,11 +8590,14 @@ else {
     }
 } var mergedPopperProps = F$3(function () { return deepmerge({ popperOptions: { modifiers: { arrow: { enabled: Boolean(arrowRef), element: arrowRef } } } }, PopperProps); }, [arrowRef, PopperProps]); return /*#__PURE__*/ y$3(g$5, null, /*#__PURE__*/ sn(children, childrenProps), /*#__PURE__*/ y$3(PopperComponent, _extends$4({ className: clsx(classes.popper, interactive && classes.popperInteractive, arrow && classes.popperArrow), placement: placement, anchorEl: childNode, open: childNode ? open : false, id: childrenProps['aria-describedby'], transition: true }, interactiveWrapperListeners, mergedPopperProps), function (_ref) { var placementInner = _ref.placement, TransitionPropsInner = _ref.TransitionProps; return /*#__PURE__*/ y$3(TransitionComponent, _extends$4({ timeout: theme.transitions.duration.shorter }, TransitionPropsInner, TransitionProps), /*#__PURE__*/ y$3("div", { className: clsx(classes.tooltip, classes["tooltipPlacement".concat(capitalize(placementInner.split('-')[0]))], ignoreNonTouchEvents.current && classes.touch, arrow && classes.tooltipArrow) }, title, arrow ? /*#__PURE__*/ y$3("span", { className: classes.arrow, ref: setArrowRef }) : null)); })); });
 var Tooltip$2 = withStyles(styles$2, { name: 'MuiTooltip', flip: false })(Tooltip$1);
-var useStyles$p = makeStyles(function (theme) { return { root: { background: theme.styleConfig.container.backgroundColor, border: '1px solid', borderColor: theme.styleConfig.container.borderColor, borderRadius: theme.styleConfig.container.borderRadius, color: theme.styleConfig.colors.primary, width: theme.styleConfig.container.width, padding: theme.spacing(6), boxSizing: 'border-box' } }; });
-var MainContainer = function MainContainer(_ref6) { var children = _ref6.children; var classes = useStyles$p(); return /*#__PURE__*/ wn.createElement("div", { className: classes.root }, children); };
+var useStyles$q = makeStyles(function (theme) { return { root: { background: theme.styleConfig.container.backgroundColor, border: '1px solid', borderColor: theme.styleConfig.container.borderColor, borderRadius: theme.styleConfig.container.borderRadius, color: theme.styleConfig.colors.primary, width: theme.styleConfig.container.width, padding: theme.spacing(6), boxSizing: 'border-box' } }; });
+var MainContainer = function MainContainer(_ref6) { var children = _ref6.children; var classes = useStyles$q(); return /*#__PURE__*/ wn.createElement("div", { className: classes.root }, children); };
 var StytchClientContext = /*#__PURE__*/ wn.createContext({ client: null });
 var useAdminPortalContext = function useAdminPortalContext() { return q$5(StytchClientContext); };
-var useAdminPortalOrgUIConfig = function useAdminPortalOrgUIConfig() { return useAdminPortalContext().config; };
+var useAdminPortalUIConfig = function useAdminPortalUIConfig() { return useAdminPortalContext().config; };
+var useAdminPortalOrgUIConfig = useAdminPortalUIConfig;
+var classNameSeed = 'stytch-admin-portal';
+var classNamePrefix = "".concat(classNameSeed, "-");
 var CheckCircle = {};
 var interopRequireDefault = { exports: {} };
 (function (module) { function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports; })(interopRequireDefault);
@@ -8558,32 +8624,32 @@ var require$$0 = /*@__PURE__*/ getAugmentedNamespace(utils);
 var hasRequiredCreateSvgIcon;
 function requireCreateSvgIcon() { if (hasRequiredCreateSvgIcon)
     return createSvgIcon; hasRequiredCreateSvgIcon = 1; (function (exports) { Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "default", { enumerable: true, get: function get() { return _utils.createSvgIcon; } }); var _utils = require$$0; })(createSvgIcon); return createSvgIcon; }
-var _interopRequireDefault$c = interopRequireDefaultExports;
-var _interopRequireWildcard$c = interopRequireWildcardExports;
+var _interopRequireDefault$i = interopRequireDefaultExports;
+var _interopRequireWildcard$i = interopRequireWildcardExports;
 Object.defineProperty(CheckCircle, "__esModule", { value: true });
-var default_1$c = CheckCircle["default"] = void 0;
-var React$c = _interopRequireWildcard$c(require$$2);
-var _createSvgIcon$c = _interopRequireDefault$c(requireCreateSvgIcon());
-var _default$c = (0, _createSvgIcon$c["default"])(/*#__PURE__*/ React$c.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }), 'CheckCircle');
-default_1$c = CheckCircle["default"] = _default$c;
+var default_1$i = CheckCircle["default"] = void 0;
+var React$i = _interopRequireWildcard$i(require$$2);
+var _createSvgIcon$i = _interopRequireDefault$i(requireCreateSvgIcon());
+var _default$i = (0, _createSvgIcon$i["default"])(/*#__PURE__*/ React$i.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }), 'CheckCircle');
+default_1$i = CheckCircle["default"] = _default$i;
 var Close = {};
-var _interopRequireDefault$b = interopRequireDefaultExports;
-var _interopRequireWildcard$b = interopRequireWildcardExports;
+var _interopRequireDefault$h = interopRequireDefaultExports;
+var _interopRequireWildcard$h = interopRequireWildcardExports;
 Object.defineProperty(Close, "__esModule", { value: true });
-var default_1$b = Close["default"] = void 0;
-var React$b = _interopRequireWildcard$b(require$$2);
-var _createSvgIcon$b = _interopRequireDefault$b(requireCreateSvgIcon());
-var _default$b = (0, _createSvgIcon$b["default"])(/*#__PURE__*/ React$b.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }), 'Close');
-default_1$b = Close["default"] = _default$b;
+var default_1$h = Close["default"] = void 0;
+var React$h = _interopRequireWildcard$h(require$$2);
+var _createSvgIcon$h = _interopRequireDefault$h(requireCreateSvgIcon());
+var _default$h = (0, _createSvgIcon$h["default"])(/*#__PURE__*/ React$h.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }), 'Close');
+default_1$h = Close["default"] = _default$h;
 var _Error = {};
-var _interopRequireDefault$a = interopRequireDefaultExports;
-var _interopRequireWildcard$a = interopRequireWildcardExports;
+var _interopRequireDefault$g = interopRequireDefaultExports;
+var _interopRequireWildcard$g = interopRequireWildcardExports;
 Object.defineProperty(_Error, "__esModule", { value: true });
-var default_1$a = _Error["default"] = void 0;
-var React$a = _interopRequireWildcard$a(require$$2);
-var _createSvgIcon$a = _interopRequireDefault$a(requireCreateSvgIcon());
-var _default$a = (0, _createSvgIcon$a["default"])(/*#__PURE__*/ React$a.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }), 'Error');
-default_1$a = _Error["default"] = _default$a;
+var default_1$g = _Error["default"] = void 0;
+var React$g = _interopRequireWildcard$g(require$$2);
+var _createSvgIcon$g = _interopRequireDefault$g(requireCreateSvgIcon());
+var _default$g = (0, _createSvgIcon$g["default"])(/*#__PURE__*/ React$g.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }), 'Error');
+default_1$g = _Error["default"] = _default$g;
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null)
     return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
@@ -8665,12 +8731,12 @@ var makeStylesFactory = function makeStylesFactory() { for (var _len4 = argument
     styles[_key5] = arguments[_key5];
 } return makeStyles(composeStyles.apply(void 0, baseStyles.concat(styles))); }; };
 var noop = function noop() { return null; };
-var makeToastStyles = makeStylesFactory(function (theme) { return { snackbar: { bottom: theme.spacing(5) }, closeButton: { padding: theme.spacing(0.5) }, closeIcon: { height: 15, width: 15 }, toast: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({ '& .MuiAlert-icon': { marginRight: theme.spacing(1) }, '& .MuiAlert-message': { padding: 0 }, '& .MuiAlert-action': { marginRight: theme.spacing(-0.5) } }, theme.breakpoints.down('xs'), { width: '100%' }), "width", 512), "padding", theme.spacing(1, 1.5)), "display", 'flex'), "alignItems", 'center'), error: {}, errorIcon: {}, success: {}, successIcon: {} }; });
+var makeToastStyles = makeStylesFactory(function (theme) { return { snackbar: { bottom: theme.spacing(5) }, closeButton: { padding: theme.spacing(0.5) }, closeIcon: { height: 15, width: 15 }, toast: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiAlert-icon"), { marginRight: theme.spacing(1) }), "& .".concat(classNamePrefix, "MuiAlert-message"), { padding: 0 }), "& .".concat(classNamePrefix, "MuiAlert-action"), { marginRight: theme.spacing(-0.5) }), theme.breakpoints.down('xs'), { width: '100%' }), "width", 512), "padding", theme.spacing(1, 1.5)), "display", 'flex'), "alignItems", 'center'), error: {}, errorIcon: {}, success: {}, successIcon: {} }; });
 var getToastIcon = function getToastIcon(type) { switch (type) {
-    case 'error': return default_1$a;
-    default: return default_1$c;
+    case 'error': return default_1$g;
+    default: return default_1$i;
 } };
-var Toast = function Toast(_ref7) { var children = _ref7.children, _ref7$type = _ref7.type, type = _ref7$type === void 0 ? 'success' : _ref7$type, onClose = _ref7.onClose, classes = _ref7.classes, Typography = _ref7.TypographyComponent; var Icon = getToastIcon(type); return /*#__PURE__*/ wn.createElement(MUIAlert, { action: /*#__PURE__*/ wn.createElement(IconButton$1, { className: classes.closeButton, disableRipple: true, onClick: onClose }, /*#__PURE__*/ wn.createElement(default_1$b, { className: C(classes.closeIcon, _defineProperty2(_defineProperty2({}, classes.errorIcon, type === 'error'), classes.successIcon, type === 'success')) })), className: C(classes.toast, _defineProperty2(_defineProperty2({}, classes.error, type === 'error'), classes.success, type === 'success')), elevation: 6, icon: /*#__PURE__*/ wn.createElement(Icon, { className: C(_defineProperty2(_defineProperty2({}, classes.errorIcon, type === 'error'), classes.successIcon, type === 'success')), fontSize: "small" }), variant: "filled" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, children)); };
+var Toast = function Toast(_ref7) { var children = _ref7.children, _ref7$type = _ref7.type, type = _ref7$type === void 0 ? 'success' : _ref7$type, onClose = _ref7.onClose, classes = _ref7.classes, Typography = _ref7.TypographyComponent; var Icon = getToastIcon(type); return /*#__PURE__*/ wn.createElement(MUIAlert, { action: /*#__PURE__*/ wn.createElement(IconButton$1, { className: classes.closeButton, disableRipple: true, onClick: onClose }, /*#__PURE__*/ wn.createElement(default_1$h, { className: C(classes.closeIcon, _defineProperty2(_defineProperty2({}, classes.errorIcon, type === 'error'), classes.successIcon, type === 'success')) })), className: C(classes.toast, _defineProperty2(_defineProperty2({}, classes.error, type === 'error'), classes.success, type === 'success')), elevation: 6, icon: /*#__PURE__*/ wn.createElement(Icon, { className: C(_defineProperty2(_defineProperty2({}, classes.errorIcon, type === 'error'), classes.successIcon, type === 'success')), fontSize: "small" }), variant: "filled" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, children)); };
 var DEFAULT_STATE$1 = { openToast: noop, closeToast: noop };
 var ToastContext = /*#__PURE__*/ F$4(DEFAULT_STATE$1);
 var useToast = function useToast() { return q$5(ToastContext); };
@@ -8680,25 +8746,26 @@ var ToastContextProviderCore = function ToastContextProviderCore(_ref8) { var ch
 var makeTypographyStyles = makeStylesFactory(function (theme) { return { typography: { '& ul': { margin: theme.spacing(1, 0, 0) } }, disabled: {} }; });
 var colorToMUIColor = { primary: 'primary', secondary: 'textSecondary', error: 'error' };
 var TypographyCore = function TypographyCore(_ref10) { var align = _ref10.align, children = _ref10.children, color = _ref10.color, component = _ref10.component, disabled = _ref10.disabled, _ref10$variant = _ref10.variant, variant = _ref10$variant === void 0 ? 'body1' : _ref10$variant, classes = _ref10.classes; return /*#__PURE__*/ wn.createElement(Typography$2, { align: align, className: C(classes.typography, _defineProperty2({}, classes.disabled, disabled)), color: color ? colorToMUIColor[color] : disabled ? 'textSecondary' : undefined, component: component, variant: variant }, children); };
-var useStyles$o = makeTypographyStyles();
-var Typography = function Typography(props) { var classes = useStyles$o(); return /*#__PURE__*/ wn.createElement(TypographyCore, Object.assign({}, props, { classes: classes })); };
-var useStyles$n = makeToastStyles(function (theme) { return { toast: { backgroundColor: theme.styleConfig.container.backgroundColor, boxShadow: '0px 5px 10px 0px rgba(0, 0, 0, 0.20)', border: '1px solid', borderColor: theme.styleConfig.container.borderColor, borderRadius: theme.styleConfig.borderRadius }, error: { '& p': { color: theme.styleConfig.colors.error }, backgroundColor: theme.styleConfig.container.backgroundColor, color: theme.styleConfig.colors.error }, errorIcon: { color: theme.styleConfig.colors.error }, success: { '& p': { color: theme.styleConfig.colors.success }, backgroundColor: theme.styleConfig.container.backgroundColor, color: theme.styleConfig.colors.success }, successIcon: { color: theme.styleConfig.colors.success } }; });
-var ToastContextProvider = function ToastContextProvider(props) { var classes = useStyles$n(); return /*#__PURE__*/ wn.createElement(ToastContextProviderCore, Object.assign({ TypographyComponent: Typography, classes: classes }, props)); };
+var useStyles$p = makeTypographyStyles();
+var Typography = function Typography(props) { var rest = __rest(props, ["disabled"]); var classes = useStyles$p(); return /*#__PURE__*/ wn.createElement(TypographyCore, Object.assign({}, rest, { classes: classes })); };
+var useStyles$o = makeToastStyles(function (theme) { return { toast: { backgroundColor: theme.styleConfig.container.backgroundColor, boxShadow: '0px 5px 10px 0px rgba(0, 0, 0, 0.20)', border: '1px solid', borderColor: theme.styleConfig.container.borderColor, borderRadius: theme.styleConfig.borderRadius }, error: { '& p': { color: theme.styleConfig.colors.error }, backgroundColor: theme.styleConfig.container.backgroundColor, color: theme.styleConfig.colors.error }, errorIcon: { color: theme.styleConfig.colors.error }, success: { '& p': { color: theme.styleConfig.colors.success }, backgroundColor: theme.styleConfig.container.backgroundColor, color: theme.styleConfig.colors.success }, successIcon: { color: theme.styleConfig.colors.success } }; });
+var ToastContextProvider = function ToastContextProvider(props) { var classes = useStyles$o(); return /*#__PURE__*/ wn.createElement(ToastContextProviderCore, Object.assign({ TypographyComponent: Typography, classes: classes }, props)); };
 var DEFAULT_ADMIN_PORTAL_STYLE_CONFIG = { container: { backgroundColor: '#FFFFFF', borderColor: '#FFFFFF', width: '100%' }, colors: { primary: '#000000', secondary: '#5C727D', success: '#005D26', error: '#BB0003', accent: '#ECFAFF', accentText: '#000000', subtle: '#EFEFEF' }, buttons: { primary: { backgroundColor: '#000000', textColor: '#FFFFFF', borderColor: '#000000' }, secondary: { backgroundColor: '#FFFFFF', textColor: '#000000', borderColor: '#000000' }, disabled: { backgroundColor: '#EFEFEF', textColor: '#B4B4B4', borderColor: '#EFEFEF' } }, inputs: { backgroundColor: '#FFFFFF', borderColor: '#D9D9D9', placeholderColor: '#5C727D', textColor: '#000000' }, borderRadius: '4px', fontFamily: 'Arial, Helvetica, sans-serif' };
-var getTheme = function getTheme(styles) { var _a, _b, _c, _d, _e, _f; var styleConfig = merge({}, DEFAULT_ADMIN_PORTAL_STYLE_CONFIG, styles); var resolvedConfig = Object.assign(Object.assign({}, styleConfig), { buttons: { primary: Object.assign(Object.assign({}, styleConfig.buttons.primary), { borderRadius: (_a = styleConfig.buttons.primary.borderRadius) !== null && _a !== void 0 ? _a : styleConfig.borderRadius }), secondary: Object.assign(Object.assign({}, styleConfig.buttons.secondary), { borderRadius: (_b = styleConfig.buttons.secondary.borderRadius) !== null && _b !== void 0 ? _b : styleConfig.borderRadius }), disabled: Object.assign(Object.assign({}, styleConfig.buttons.disabled), { borderRadius: (_d = (_c = styleConfig.buttons.disabled) === null || _c === void 0 ? void 0 : _c.borderRadius) !== null && _d !== void 0 ? _d : styleConfig.borderRadius }) }, container: Object.assign(Object.assign({}, styleConfig.container), { borderRadius: (_e = styleConfig.container.borderRadius) !== null && _e !== void 0 ? _e : styleConfig.borderRadius }), inputs: Object.assign(Object.assign({}, styleConfig.inputs), { borderRadius: (_f = styleConfig.inputs.borderRadius) !== null && _f !== void 0 ? _f : styleConfig.borderRadius }) }); var theme = createTheme({ typography: { allVariants: { color: resolvedConfig.colors.primary }, button: { textTransform: 'none' }, fontFamily: styleConfig.fontFamily, h1: { fontSize: 30, fontWeight: 600, lineHeight: '125%' }, h2: { fontSize: 24, fontWeight: 600, lineHeight: '125%' }, h3: { fontSize: 20, fontWeight: 600, lineHeight: '125%' }, h4: { fontSize: 18, fontWeight: 600, lineHeight: '125%' }, body1: { fontSize: 18, fontWeight: 400, lineHeight: '150%' }, body2: { fontSize: 14, fontWeight: 400, lineHeight: '150%' } }, overrides: { MuiRadio: { root: { color: resolvedConfig.colors.primary }, colorPrimary: { '&$checked': { color: resolvedConfig.colors.primary }, '&.Mui-disabled': { color: resolvedConfig.colors.secondary } } }, MuiIconButton: { root: { color: resolvedConfig.colors.primary } }, MuiPaper: { root: { backgroundColor: resolvedConfig.container.backgroundColor, border: '1px solid', borderColor: resolvedConfig.colors.subtle, borderRadius: resolvedConfig.container.borderRadius } }, MuiTypography: { colorTextSecondary: { color: resolvedConfig.colors.secondary }, colorError: { color: resolvedConfig.colors.error } } }, styleConfig: resolvedConfig }); return theme; };
-var ContextProvider = function ContextProvider(_ref11) { var theme = _ref11.theme, options = _ref11.options, children = _ref11.children; var clientAndConfig = F$3(function () { return { client: options.client, config: options.config }; }, [options]); return /*#__PURE__*/ wn.createElement(ThemeProvider, { theme: theme }, /*#__PURE__*/ wn.createElement(StytchClientContext.Provider, { value: clientAndConfig }, children)); };
+var getTheme = function getTheme(styles) { var _a, _b, _c, _d, _e, _f; var styleConfig = merge({}, DEFAULT_ADMIN_PORTAL_STYLE_CONFIG, styles); var resolvedConfig = Object.assign(Object.assign({}, styleConfig), { buttons: { primary: Object.assign(Object.assign({}, styleConfig.buttons.primary), { borderRadius: (_a = styleConfig.buttons.primary.borderRadius) !== null && _a !== void 0 ? _a : styleConfig.borderRadius }), secondary: Object.assign(Object.assign({}, styleConfig.buttons.secondary), { borderRadius: (_b = styleConfig.buttons.secondary.borderRadius) !== null && _b !== void 0 ? _b : styleConfig.borderRadius }), disabled: Object.assign(Object.assign({}, styleConfig.buttons.disabled), { borderRadius: (_d = (_c = styleConfig.buttons.disabled) === null || _c === void 0 ? void 0 : _c.borderRadius) !== null && _d !== void 0 ? _d : styleConfig.borderRadius }) }, container: Object.assign(Object.assign({}, styleConfig.container), { borderRadius: (_e = styleConfig.container.borderRadius) !== null && _e !== void 0 ? _e : styleConfig.borderRadius }), inputs: Object.assign(Object.assign({}, styleConfig.inputs), { borderRadius: (_f = styleConfig.inputs.borderRadius) !== null && _f !== void 0 ? _f : styleConfig.borderRadius }) }); var theme = createTheme({ typography: { allVariants: { color: resolvedConfig.colors.primary }, button: { textTransform: 'none', fontSize: 14, fontWeight: 600, lineHeight: '250%' }, fontFamily: styleConfig.fontFamily, h1: { fontSize: 24, fontWeight: 600, lineHeight: '125%' }, h2: { fontSize: 20, fontWeight: 600, lineHeight: '125%' }, h3: { fontSize: 16, fontWeight: 600, lineHeight: '125%' }, h4: { fontSize: 14, fontWeight: 600, lineHeight: '150%' }, body1: { fontSize: 14, fontWeight: 400, lineHeight: '150%' }, body2: { fontSize: 12, fontWeight: 400, lineHeight: '150%' }, caption: { fontSize: 10, fontWeight: 400, lineHeight: '120%' } }, overrides: { MuiRadio: { root: { color: resolvedConfig.colors.primary }, colorPrimary: { '&$checked': { color: resolvedConfig.colors.primary }, '&.Mui-disabled': { color: resolvedConfig.colors.secondary } } }, MuiIconButton: { root: { color: resolvedConfig.colors.primary } }, MuiPaper: { root: { backgroundColor: resolvedConfig.container.backgroundColor, border: '1px solid', borderColor: resolvedConfig.colors.subtle, borderRadius: resolvedConfig.container.borderRadius } }, MuiTypography: { colorPrimary: { color: resolvedConfig.colors.primary }, colorTextSecondary: { color: resolvedConfig.colors.secondary }, colorError: { color: resolvedConfig.colors.error } } }, styleConfig: resolvedConfig }); return theme; };
+var generateClassName = createGenerateClassName({ seed: classNameSeed });
+var ContextProvider = function ContextProvider(_ref11) { var theme = _ref11.theme, options = _ref11.options, children = _ref11.children; var clientAndConfig = F$3(function () { return { client: options.client, config: options.config }; }, [options]); return /*#__PURE__*/ wn.createElement(StylesProvider, { generateClassName: generateClassName }, /*#__PURE__*/ wn.createElement(ThemeProvider, { theme: theme }, /*#__PURE__*/ wn.createElement(StytchClientContext.Provider, { value: clientAndConfig }, children))); };
 var AdminPortalWrapper = function AdminPortalWrapper(_ref12) { var children = _ref12.children, options = _ref12.options; var theme = getTheme(options.styles); return /*#__PURE__*/ wn.createElement(ContextProvider, { options: options, theme: theme }, /*#__PURE__*/ wn.createElement(MainContainer, null, /*#__PURE__*/ wn.createElement(ToastContextProvider, null, children))); };
 var ReportProblemOutlined = {};
-var _interopRequireDefault$9 = interopRequireDefaultExports;
-var _interopRequireWildcard$9 = interopRequireWildcardExports;
+var _interopRequireDefault$f = interopRequireDefaultExports;
+var _interopRequireWildcard$f = interopRequireWildcardExports;
 Object.defineProperty(ReportProblemOutlined, "__esModule", { value: true });
-var default_1$9 = ReportProblemOutlined["default"] = void 0;
-var React$9 = _interopRequireWildcard$9(require$$2);
-var _createSvgIcon$9 = _interopRequireDefault$9(requireCreateSvgIcon());
-var _default$9 = (0, _createSvgIcon$9["default"])(/*#__PURE__*/ React$9.createElement("path", { d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z" }), 'ReportProblemOutlined');
-default_1$9 = ReportProblemOutlined["default"] = _default$9;
-var useStyles$m = makeStyles(function (theme) { return { alert: { color: theme.styleConfig.colors.primary, padding: theme.spacing(3), backgroundColor: theme.styleConfig.colors.accent, display: 'flex', gap: theme.spacing(1) } }; });
-var Alert = function Alert(_ref13) { var children = _ref13.children; var classes = useStyles$m(); return /*#__PURE__*/ wn.createElement("div", { className: classes.alert }, /*#__PURE__*/ wn.createElement(default_1$9, null), /*#__PURE__*/ wn.createElement(Typography, null, children)); };
+var default_1$f = ReportProblemOutlined["default"] = void 0;
+var React$f = _interopRequireWildcard$f(require$$2);
+var _createSvgIcon$f = _interopRequireDefault$f(requireCreateSvgIcon());
+var _default$f = (0, _createSvgIcon$f["default"])(/*#__PURE__*/ React$f.createElement("path", { d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z" }), 'ReportProblemOutlined');
+default_1$f = ReportProblemOutlined["default"] = _default$f;
+var useStyles$n = makeStyles(function (theme) { return { alert: { color: theme.styleConfig.colors.primary, padding: theme.spacing(1.5, 3), backgroundColor: theme.styleConfig.colors.accent, display: 'flex', alignItems: 'center', gap: theme.spacing(1) } }; });
+var Alert = function Alert(_ref13) { var children = _ref13.children; var classes = useStyles$n(); return /*#__PURE__*/ wn.createElement("div", { className: classes.alert }, /*#__PURE__*/ wn.createElement(default_1$f, { style: { fontSize: 16 } }), /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, children)); };
 var PageLoadingIndicator = function PageLoadingIndicator() { return /*#__PURE__*/ wn.createElement("div", { style: { height: '100%', minHeight: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, /*#__PURE__*/ wn.createElement(CircularProgress$1, { color: "inherit" })); };
 var useStytchClient = function useStytchClient() { var client = wn.useContext(StytchClientContext).client; if (!client) {
     throw new Error('A Stytch client could not be found');
@@ -8706,22 +8773,23 @@ var useStytchClient = function useStytchClient() { var client = wn.useContext(St
 var useB2BInternals = function useB2BInternals() { var client = useStytchClient(); return readB2BInternals(client); };
 var useApiNetworkClient = function useApiNetworkClient() { var _useB2BInternals = useB2BInternals(), apiNetworkClient = _useB2BInternals.apiNetworkClient; return apiNetworkClient; };
 var useAdminPortalConfig = function useAdminPortalConfig() { var networkClient = useApiNetworkClient(); return useSWR('/b2b/admin_portal_config', function () { return networkClient.fetchSDK({ url: '/b2b/admin_portal_config', method: 'GET', errorMessage: 'Failed to fetch admin portal config' }); }); };
-var useRbac = function useRbac(resourceId, action) { var client = useStytchClient(); var memberId = Cn(client.self.onChange, function () { var _a; return (_a = client.self.getSync()) === null || _a === void 0 ? void 0 : _a.member_id; }); return useSWR(function () { return memberId && ['rbac', memberId, resourceId, action]; }, function () { return client.rbac.isAuthorized(resourceId, action); }, { keepPreviousData: true }); };
-var Add = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }));
-var ChevronLeft = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
-var DeleteOutlined = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" }));
-var EditOutlined = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" }));
+var useSelf = function useSelf() { var client = useStytchClient(); var self = Cn(client.self.onChange, function () { return client.self.getSync(); }); return { self: self, fromCache: client.self.getInfo().fromCache }; };
+var useRbac = function useRbac(resourceId, action) { var client = useStytchClient(); var _useSelf = useSelf(), self = _useSelf.self; var memberId = self === null || self === void 0 ? void 0 : self.member_id; return useSWR(function () { return memberId && ['rbac', memberId, resourceId, action]; }, function () { return client.rbac.isAuthorized(resourceId, action); }, { keepPreviousData: true }); };
+var Add$1 = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }));
+var ChevronLeft$1 = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
+var DeleteOutlined$1 = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" }));
+var EditOutlined$1 = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" }));
 var ExpandMore$1 = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }));
 var InfoOutlined = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
 var MoreVert = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }));
 var Tune = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" }));
-var VisibilityOutlined = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z" }));
-var makeButtonStyles = makeStylesFactory(function (theme) { return { button: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('xs'), { whiteSpace: 'unset', minHeight: 'fit-content' }), '&.MuiButton-fullWidth', { width: '100%' }), '&, &:active, &:hover', { boxShadow: 'none' }), "borderRadius", 3), "boxShadow", 'none'), "fontSize", 18), "minHeight", 45), "padding", '0 22px'), "whiteSpace", 'nowrap'), "width", 'fit-content'), compact: { '& .MuiButton-startIcon': { marginRight: theme.spacing(0.5) }, '& .MuiButton-endIcon': { marginLeft: theme.spacing(0.5) }, fontSize: 16, minHeight: 30, padding: '0 10px', minWidth: 'fit-content' }, iconOnly: { '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 } }, ghost: {}, primary: {}, secondary: {}, text: {}, warningGhost: {}, warningPrimary: {}, warningText: {} }; });
+var VisibilityOutlined$1 = createSvgIcon$1(/*#__PURE__*/ y$3("path", { d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z" }));
+var makeButtonStyles = makeStylesFactory(function (theme) { return { button: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('xs'), { whiteSpace: 'unset', minHeight: 'fit-content' }), "&.".concat(classNamePrefix, "MuiButton-fullWidth"), { width: '100%' }), '&, &:active, &:hover', { boxShadow: 'none' }), "borderRadius", 3), "boxShadow", 'none'), "fontSize", 18), "minHeight", 45), "padding", '0 22px'), "whiteSpace", 'nowrap'), "width", 'fit-content'), compact: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiButton-startIcon"), { marginRight: theme.spacing(0.5) }), "& .".concat(classNamePrefix, "MuiButton-endIcon"), { marginLeft: theme.spacing(0.5) }), "fontSize", 16), "minHeight", 30), "padding", '0 10px'), "minWidth", 'fit-content'), iconOnly: _defineProperty2({}, "& .".concat(classNamePrefix, "MuiButton-startIcon, & .").concat(classNamePrefix, "MuiButton-endIcon"), { margin: 0 }), ghost: {}, primary: {}, secondary: {}, text: {}, warningGhost: {}, warningPrimary: {}, warningText: {} }; });
 var variantToMUIVariant = { ghost: 'outlined', primary: 'contained', secondary: 'contained', text: 'text' };
 var ButtonCore = function ButtonCore(_a) { var children = _a.children, className = _a.className, compact = _a.compact, component = _a.component, variant = _a.variant, warning = _a.warning, classes = _a.classes, props = __rest(_a, ["children", "className", "compact", "component", "variant", "warning", "classes"]); var variantStyles = { ghost: classes.ghost, primary: classes.primary, secondary: classes.secondary, text: classes.text }; var buttonWarningStyles = { ghost: classes.warningGhost, primary: classes.warningPrimary, secondary: classes.warningPrimary, text: classes.warningText }; var buttonVariant = variant !== null && variant !== void 0 ? variant : 'primary'; var buttonStyles = warning ? buttonWarningStyles[buttonVariant] : variantStyles[buttonVariant]; return /*#__PURE__*/ wn.createElement(MUIButton, Object.assign({}, props, { className: C(classes.button, buttonStyles, _defineProperty2({}, classes.compact, compact), _defineProperty2({}, classes.iconOnly, !children), className), component: component !== null && component !== void 0 ? component : 'button', disableRipple: true, variant: variantToMUIVariant[buttonVariant] }), children); };
 var mixed = function mixed(color) { return "color-mix(in srgb, ".concat(color, " 80%, #333)"); };
-var useStyles$l = makeButtonStyles(function (theme) { var disabledStyle = { backgroundColor: theme.styleConfig.buttons.disabled.backgroundColor, borderColor: theme.styleConfig.buttons.disabled.borderColor, borderRadius: theme.styleConfig.buttons.disabled.borderRadius, color: theme.styleConfig.buttons.disabled.textColor }; return { button: { borderRadius: theme.styleConfig.borderRadius, fontWeight: 700 }, ghost: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.secondary.backgroundColor) }, backgroundColor: theme.styleConfig.buttons.secondary.backgroundColor, color: theme.styleConfig.buttons.secondary.textColor }, primary: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.primary.backgroundColor) }, backgroundColor: theme.styleConfig.buttons.primary.backgroundColor, color: theme.styleConfig.buttons.primary.textColor, borderRadius: theme.styleConfig.buttons.primary.borderRadius }, secondary: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.secondary.backgroundColor) }, backgroundColor: theme.styleConfig.buttons.secondary.backgroundColor, color: theme.styleConfig.buttons.secondary.textColor, borderRadius: theme.styleConfig.buttons.secondary.borderRadius }, text: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.1)' }, backgroundColor: 'transparent', color: theme.styleConfig.colors.primary }, warningGhost: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.secondary.backgroundColor), borderColor: theme.styleConfig.colors.error, color: theme.styleConfig.colors.error }, backgroundColor: theme.styleConfig.buttons.secondary.backgroundColor, borderColor: theme.styleConfig.colors.error, color: theme.styleConfig.colors.error }, warningPrimary: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.colors.error), color: theme.styleConfig.buttons.primary.textColor }, backgroundColor: theme.styleConfig.colors.error, color: theme.styleConfig.buttons.primary.textColor }, warningText: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.1)', color: theme.styleConfig.colors.error }, backgroundColor: 'transparent', color: theme.styleConfig.colors.error } }; });
-var Button = function Button(_a) { var props = __rest(_a, []); var classes = useStyles$l(); return /*#__PURE__*/ wn.createElement(ButtonCore, Object.assign({}, props, { classes: classes })); };
+var useStyles$m = makeButtonStyles(function (theme) { var disabledStyle = { backgroundColor: theme.styleConfig.buttons.disabled.backgroundColor, borderColor: theme.styleConfig.buttons.disabled.borderColor, borderRadius: theme.styleConfig.buttons.disabled.borderRadius, color: theme.styleConfig.buttons.disabled.textColor }; return { button: { borderRadius: theme.styleConfig.borderRadius, fontSize: theme.typography.button.fontSize, fontWeight: 700, minHeight: 44 }, compact: { fontSize: 12 }, ghost: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.secondary.backgroundColor) }, backgroundColor: theme.styleConfig.buttons.secondary.backgroundColor, color: theme.styleConfig.buttons.secondary.textColor }, primary: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.primary.backgroundColor) }, backgroundColor: theme.styleConfig.buttons.primary.backgroundColor, color: theme.styleConfig.buttons.primary.textColor, borderRadius: theme.styleConfig.buttons.primary.borderRadius }, secondary: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.secondary.backgroundColor) }, backgroundColor: theme.styleConfig.buttons.secondary.backgroundColor, color: theme.styleConfig.buttons.secondary.textColor, borderRadius: theme.styleConfig.buttons.secondary.borderRadius }, text: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.1)' }, backgroundColor: 'transparent', color: theme.styleConfig.colors.primary }, warningGhost: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.buttons.secondary.backgroundColor), borderColor: theme.styleConfig.colors.error, color: theme.styleConfig.colors.error }, backgroundColor: theme.styleConfig.buttons.secondary.backgroundColor, borderColor: theme.styleConfig.colors.error, color: theme.styleConfig.colors.error }, warningPrimary: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: mixed(theme.styleConfig.colors.error), color: theme.styleConfig.buttons.primary.textColor }, backgroundColor: theme.styleConfig.colors.error, color: theme.styleConfig.buttons.primary.textColor }, warningText: { '&:disabled': disabledStyle, '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.1)', color: theme.styleConfig.colors.error }, backgroundColor: 'transparent', color: theme.styleConfig.colors.error } }; });
+var Button = function Button(_a) { var props = __rest(_a, []); var classes = useStyles$m(); return /*#__PURE__*/ wn.createElement(ButtonCore, Object.assign({}, props, { classes: classes })); };
 var getShortId = function getShortId(prefix) { return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(Math.random().toString(36).slice(-6)); };
 var useShortId = function useShortId(prefix) { return F$3(function () { return getShortId(prefix); }, [prefix]); };
 var DEFAULT_GAP = 1;
@@ -8750,8 +8818,8 @@ var useModalState = function useModalState() { var confirmAction = arguments.len
     } }, _callee, null, [[0, 5]]); })); }; return { isOpen: isOpen, open: open, close: close, confirm: confirm }; };
 var useAsyncState = h$4;
 var MODAL_WIDTH = 800;
-var useStyles$k = makeStyles(function (theme) { return { closeButton: { position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }, contentText: { whiteSpace: 'pre-line' }, dialog: { '& .MuiDialogTitle-root': { padding: theme.spacing(4, 4, 0, 4) }, '& .MuiDialogContent-root': { padding: theme.spacing(2, 4) }, '& .MuiDialogActions-root': { justifyContent: 'flex-start', padding: theme.spacing(2, 4, 4, 4) }, '& .MuiDialogActions-spacing > :not(:first-child)': { marginLeft: theme.spacing(2) }, '& .MuiDialog-paper': _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('xs'), { width: '100%', margin: 0, borderRadius: 0 }), "backgroundColor", theme.styleConfig.container.backgroundColor), "borderRadius", theme.styleConfig.container.borderRadius), "width", MODAL_WIDTH), "maxWidth", MODAL_WIDTH), "margin", theme.spacing(6)) }, content: { display: 'flex', flexDirection: 'column', gap: theme.spacing(1.5) } }; });
-var Modal = function Modal(_ref15) { var cancelButtonText = _ref15.cancelButtonText, children = _ref15.children, description = _ref15.description, confirmButtonText = _ref15.confirmButtonText, disableConfirm = _ref15.disableConfirm, warning = _ref15.warning, close = _ref15.close, confirm = _ref15.confirm, title = _ref15.title, showLoadingOnConfirm = _ref15.showLoadingOnConfirm, noCancelButton = _ref15.noCancelButton, isOpen = _ref15.isOpen, keepOpenOnConfirm = _ref15.keepOpenOnConfirm; var classes = useStyles$k(); var _useAsyncState = useAsyncState(false), _useAsyncState2 = _slicedToArray2(_useAsyncState, 2), confirming = _useAsyncState2[0], setConfirming = _useAsyncState2[1]; var isXsScreen = useMediaQuery(function (theme) { return theme.breakpoints.down('xs'); }); var descriptionId = useShortId('confirmation-modal-description'); var titleId = useShortId('confirmation-modal-title'); var handleConfirm = function handleConfirm(e) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee2() { return _regeneratorRuntime().wrap(function _callee2$(_context2) { while (1)
+var useStyles$l = makeStyles(function (theme) { return { closeButton: { position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }, contentText: { whiteSpace: 'pre-line' }, dialog: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiDialogTitle-root"), { padding: theme.spacing(4, 4, 0, 4) }), "& .".concat(classNamePrefix, "MuiDialogContent-root"), { padding: theme.spacing(2, 4) }), "& .".concat(classNamePrefix, "MuiDialogActions-root"), { justifyContent: 'flex-start', padding: theme.spacing(2, 4, 4, 4) }), "& .".concat(classNamePrefix, "MuiDialogActions-spacing > :not(:first-child)"), { marginLeft: theme.spacing(2) }), "& .".concat(classNamePrefix, "MuiDialog-paper"), _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('xs'), { width: '100%', margin: 0, borderRadius: 0 }), "backgroundColor", theme.styleConfig.container.backgroundColor), "borderRadius", theme.styleConfig.container.borderRadius), "width", MODAL_WIDTH), "maxWidth", MODAL_WIDTH), "margin", theme.spacing(6))), content: { display: 'flex', flexDirection: 'column', gap: theme.spacing(1.5) } }; });
+var Modal = function Modal(_ref15) { var cancelButtonText = _ref15.cancelButtonText, children = _ref15.children, description = _ref15.description, confirmButtonText = _ref15.confirmButtonText, disableConfirm = _ref15.disableConfirm, warning = _ref15.warning, close = _ref15.close, confirm = _ref15.confirm, title = _ref15.title, showLoadingOnConfirm = _ref15.showLoadingOnConfirm, noCancelButton = _ref15.noCancelButton, isOpen = _ref15.isOpen, keepOpenOnConfirm = _ref15.keepOpenOnConfirm; var classes = useStyles$l(); var _useAsyncState = useAsyncState(false), _useAsyncState2 = _slicedToArray2(_useAsyncState, 2), confirming = _useAsyncState2[0], setConfirming = _useAsyncState2[1]; var isXsScreen = useMediaQuery(function (theme) { return theme.breakpoints.down('xs'); }); var descriptionId = useShortId('confirmation-modal-description'); var titleId = useShortId('confirmation-modal-title'); var handleConfirm = function handleConfirm(e) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee2() { return _regeneratorRuntime().wrap(function _callee2$(_context2) { while (1)
     switch (_context2.prev = _context2.next) {
         case 0:
             e.preventDefault();
@@ -8769,7 +8837,7 @@ var Modal = function Modal(_ref15) { var cancelButtonText = _ref15.cancelButtonT
             return _context2.finish(6);
         case 10:
         case "end": return _context2.stop();
-    } }, _callee2, null, [[2, , 6, 10]]); })); }; var onClose = function onClose() { close(); }; var confirmDisabled = confirming || disableConfirm; return /*#__PURE__*/ wn.createElement(Dialog$1, { "aria-describedby": descriptionId, "aria-labelledby": titleId, className: classes.dialog, fullScreen: isXsScreen, onClose: onClose, open: isOpen }, isXsScreen && ( /*#__PURE__*/wn.createElement(IconButton$1, { className: classes.closeButton, disableRipple: true, onClick: onClose }, /*#__PURE__*/ wn.createElement(default_1$b, { fontSize: "small" }))), /*#__PURE__*/ wn.createElement(DialogTitle$1, { id: titleId }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, title)), /*#__PURE__*/ wn.createElement("form", { onSubmit: handleConfirm }, /*#__PURE__*/ wn.createElement(DialogContent$1, { className: classes.content }, description && /*#__PURE__*/ wn.createElement(Typography, null, description), children && /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column" }, children)), /*#__PURE__*/ wn.createElement(DialogActions$1, null, !noCancelButton && ( /*#__PURE__*/wn.createElement(Button, { autoFocus: warning, disabled: confirming, onClick: onClose, variant: "ghost" }, cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : "Cancel")), /*#__PURE__*/ wn.createElement(Button, { autoFocus: !warning, disabled: confirmDisabled, type: "submit", variant: "primary", warning: warning }, confirming && showLoadingOnConfirm ? /*#__PURE__*/ wn.createElement(CircularProgress$1, { size: 18 }) : confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Ok')))); };
+    } }, _callee2, null, [[2, , 6, 10]]); })); }; var onClose = function onClose() { close(); }; var confirmDisabled = confirming || disableConfirm; return /*#__PURE__*/ wn.createElement(Dialog$1, { "aria-describedby": descriptionId, "aria-labelledby": titleId, className: classes.dialog, fullScreen: isXsScreen, onClose: onClose, open: isOpen }, isXsScreen && ( /*#__PURE__*/wn.createElement(IconButton$1, { className: classes.closeButton, disableRipple: true, onClick: onClose }, /*#__PURE__*/ wn.createElement(default_1$h, { fontSize: "small" }))), /*#__PURE__*/ wn.createElement(DialogTitle$1, { id: titleId }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, title)), /*#__PURE__*/ wn.createElement("form", { onSubmit: handleConfirm }, /*#__PURE__*/ wn.createElement(DialogContent$1, { className: classes.content }, description && /*#__PURE__*/ wn.createElement(Typography, null, description), children && /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column" }, children)), /*#__PURE__*/ wn.createElement(DialogActions$1, null, !noCancelButton && ( /*#__PURE__*/wn.createElement(Button, { autoFocus: warning, disabled: confirming, onClick: onClose, variant: "ghost" }, cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : "Cancel")), /*#__PURE__*/ wn.createElement(Button, { autoFocus: !warning, disabled: confirmDisabled, type: "submit", variant: "primary", warning: warning }, confirming && showLoadingOnConfirm ? /*#__PURE__*/ wn.createElement(CircularProgress$1, { size: 18 }) : confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Ok')))); };
 var useMutateWithToast = function useMutateWithToast(callback) { var _useToast2 = useToast(), openToast = _useToast2.openToast; var mutate = T$2(function (properties) { var _ref16 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, errorMessage = _ref16.errorMessage; return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee3() { return _regeneratorRuntime().wrap(function _callee3$(_context3) { while (1)
     switch (_context3.prev = _context3.next) {
         case 0:
@@ -8836,78 +8904,78 @@ var useDeleteConnection = function useDeleteConnection() { var _ref19 = argument
     } }, _callee5, null, [[1, 6]]); })); }; var _useModalState = useModalState(handleConfirm), close = _useModalState.close, confirm = _useModalState.confirm, isOpen = _useModalState.isOpen, open = _useModalState.open; var handleRequestDelete = T$2(function (connection) { setConnection(connection); open(); }, [open]); return { handleRequestDelete: handleRequestDelete, modalProps: { connectionName: connection === null || connection === void 0 ? void 0 : connection.displayName, isOpen: isOpen, close: close, confirm: confirm } }; };
 var makeTagStyles = makeStylesFactory(function (theme) { return { tag: { fontFamily: 'IBM Plex Mono, monospace', fontSize: 18, fontWeight: 400, lineHeight: '150%', padding: theme.spacing(0, 1), borderRadius: 4, width: 'fit-content' } }; });
 var TagCore = function TagCore(_ref20) { var children = _ref20.children, classes = _ref20.classes; return /*#__PURE__*/ wn.createElement("span", { className: classes.tag }, children); };
-var useStyles$j = makeTagStyles(function (theme) { return { tag: { fontFamily: theme.styleConfig.fontFamily, fontSize: function fontSize(_ref21) { var size = _ref21.size; return size === 'sm' ? 14 : 18; }, backgroundColor: theme.styleConfig.colors.accent, color: theme.styleConfig.colors.accentText } }; });
-var Tag = function Tag(props) { var classes = useStyles$j(props); return /*#__PURE__*/ wn.createElement(TagCore, Object.assign({}, props, { classes: classes })); };
+var useStyles$k = makeTagStyles(function (theme) { return { tag: { fontFamily: theme.styleConfig.fontFamily, fontSize: function fontSize(_ref21) { var size = _ref21.size; return size === 'small' ? theme.typography.caption.fontSize : theme.typography.body2.fontSize; }, backgroundColor: theme.styleConfig.colors.accent, padding: function padding(_ref22) { var _ref22$hasTopAndBotto = _ref22.hasTopAndBottomPadding, hasTopAndBottomPadding = _ref22$hasTopAndBotto === void 0 ? true : _ref22$hasTopAndBotto; return "".concat(hasTopAndBottomPadding ? 8 : 0, "px 11px"); }, height: 'fit-content', color: theme.styleConfig.colors.accentText } }; });
+var Tag = function Tag(props) { var classes = useStyles$k(props); return /*#__PURE__*/ wn.createElement(TagCore, Object.assign({}, props, { classes: classes })); };
 var organizationGetKey = function organizationGetKey(orgId) { return ['organization.get', orgId]; };
 var useOrgInfo = function useOrgInfo() { var _a; var client = useStytchClient(); var orgId = (_a = client.organization.getSync()) === null || _a === void 0 ? void 0 : _a.organization_id; return useSWR(organizationGetKey(orgId), function () { return client.organization.get(); }); };
 var deepEqual = createDeepEqual();
 var CODE_HORIZONTAL_PADDING = 1;
 var commonCodeStyles$1 = { code: { borderRadius: 4, width: 'fit-content' } };
 var makeCodeStyles = makeStylesFactory(commonCodeStyles$1, function (theme) { return { code: { fontFamily: 'IBM Plex Mono, monospace', fontSize: 16, fontWeight: 400, lineHeight: '150%', padding: theme.spacing(0.5, CODE_HORIZONTAL_PADDING), wordBreak: 'break-word' } }; });
-var CodeCore = function CodeCore(_ref22) { var children = _ref22.children, classes = _ref22.classes; return /*#__PURE__*/ wn.createElement("span", { className: C(classes.code) }, children); };
-var commonCodeStyles = function commonCodeStyles(theme) { return { code: { color: theme.styleConfig.colors.accentText, backgroundColor: theme.styleConfig.colors.accent } }; };
-var useStyles$i = makeCodeStyles(commonCodeStyles);
-var Code = function Code(props) { var classes = useStyles$i(); return /*#__PURE__*/ wn.createElement(CodeCore, Object.assign({}, props, { classes: classes })); };
-var useStyles$h = makeStyles(function () { return { labelContainer: { display: 'flex', alignItems: 'center' } }; });
-var LabelCore = function LabelCore(_ref23) { var children = _ref23.children, disabled = _ref23.disabled, htmlFor = _ref23.htmlFor, required = _ref23.required, _ref23$variant = _ref23.variant, variant = _ref23$variant === void 0 ? 'body2' : _ref23$variant, Typography = _ref23.TypographyComponent; var classes = useStyles$h(); return /*#__PURE__*/ wn.createElement("span", { className: classes.labelContainer }, /*#__PURE__*/ wn.createElement("label", { "aria-required": required, htmlFor: htmlFor }, /*#__PURE__*/ wn.createElement(Typography, { disabled: disabled, variant: variant }, children)), required && ( /*#__PURE__*/wn.createElement(Typography, { color: "error", disabled: disabled, variant: "body2" }, "*"))); };
+var CodeCore = function CodeCore(_ref23) { var children = _ref23.children, classes = _ref23.classes; return /*#__PURE__*/ wn.createElement("span", { className: C(classes.code) }, children); };
+var commonCodeStyles = function commonCodeStyles(theme) { return { code: { fontFamily: theme.typography.fontFamily, color: theme.styleConfig.colors.accentText, backgroundColor: theme.styleConfig.colors.accent, fontSize: theme.typography.body2.fontSize, fontWeight: theme.typography.body2.fontWeight, lineHeight: theme.typography.body2.lineHeight, padding: theme.spacing(0.5) } }; };
+var useStyles$j = makeCodeStyles(commonCodeStyles);
+var Code = function Code(props) { var classes = useStyles$j(); return /*#__PURE__*/ wn.createElement(CodeCore, Object.assign({}, props, { classes: classes })); };
+var useStyles$i = makeStyles(function () { return { labelContainer: { display: 'flex', alignItems: 'center' } }; });
+var LabelCore = function LabelCore(_ref24) { var children = _ref24.children, disabled = _ref24.disabled, htmlFor = _ref24.htmlFor, required = _ref24.required, _ref24$variant = _ref24.variant, variant = _ref24$variant === void 0 ? 'body2' : _ref24$variant, Typography = _ref24.TypographyComponent, labelColor = _ref24.labelColor; var classes = useStyles$i(); return /*#__PURE__*/ wn.createElement("span", { className: classes.labelContainer }, /*#__PURE__*/ wn.createElement("label", { "aria-required": required, htmlFor: htmlFor }, /*#__PURE__*/ wn.createElement(Typography, { color: labelColor, disabled: disabled, variant: variant }, children)), required && ( /*#__PURE__*/wn.createElement(Typography, { color: "error", disabled: disabled, variant: "body2" }, "*"))); };
 var Label = function Label(props) { return /*#__PURE__*/ wn.createElement(LabelCore, Object.assign({}, props, { TypographyComponent: Typography })); };
 var makeCopyableTextStyles = makeStylesFactory(commonCodeStyles$1, function (theme) { return { copyableText: { '&:hover': { marginRight: 0 }, '& svg': { marginRight: theme.spacing(CODE_HORIZONTAL_PADDING) }, borderRadius: 4, display: 'flex', alignItems: 'center', height: 'fit-content', width: 'fit-content', marginRight: theme.spacing(3.5) }, copyIcon: { '& svg': { marginRight: theme.spacing(CODE_HORIZONTAL_PADDING) } }, hasCopiedIcon: { marginRight: 0 }, noWrap: { '& span': { wordBreak: 'unset', whiteSpace: 'nowrap' } } }; });
-var CopyableTextCore = function CopyableTextCore(_ref24) { var children = _ref24.children, textToCopy = _ref24.textToCopy, noWrap = _ref24.noWrap, id = _ref24.id, label = _ref24.label, classes = _ref24.classes, Code = _ref24.CodeComponent, Label = _ref24.LabelComponent, Typography = _ref24.TypographyComponent, useClickToCopy = _ref24.useClickToCopy; var _a; var inputId = useShortId(id); if (children && typeof children !== 'string') {
+var CopyableTextCore = function CopyableTextCore(_ref25) { var children = _ref25.children, textToCopy = _ref25.textToCopy, noWrap = _ref25.noWrap, id = _ref25.id, label = _ref25.label, classes = _ref25.classes, Code = _ref25.CodeComponent, Label = _ref25.LabelComponent, Typography = _ref25.TypographyComponent, useClickToCopy = _ref25.useClickToCopy; var _a; var inputId = useShortId(id); if (children && typeof children !== 'string') {
     throw new Error('CopyableText children must be a string');
 } var _useClickToCopy = useClickToCopy({ text: (_a = textToCopy !== null && textToCopy !== void 0 ? textToCopy : children) !== null && _a !== void 0 ? _a : '' }), copied = _useClickToCopy.copied, copyToClipboard = _useClickToCopy.copyToClipboard, CopyIcon = _useClickToCopy.CopyIcon, containerHoverClass = _useClickToCopy.containerHoverClass; return /*#__PURE__*/ wn.createElement("div", { className: C(_defineProperty2({}, classes.noWrap, noWrap)) }, label && /*#__PURE__*/ wn.createElement(Label, { htmlFor: inputId }, label), !children && /*#__PURE__*/ wn.createElement(Typography, null, "\u2013"), children && ( /*#__PURE__*/wn.createElement("span", { className: C(containerHoverClass, classes.copyableText, classes.code, _defineProperty2({}, classes.hasCopiedIcon, copied)), onClick: copyToClipboard }, /*#__PURE__*/ wn.createElement(Code, null, children), /*#__PURE__*/ wn.createElement("div", { className: classes.copyIcon }, CopyIcon)))); };
 var CheckCircleOutlined = {};
-var _interopRequireDefault$8 = interopRequireDefaultExports;
-var _interopRequireWildcard$8 = interopRequireWildcardExports;
+var _interopRequireDefault$e = interopRequireDefaultExports;
+var _interopRequireWildcard$e = interopRequireWildcardExports;
 Object.defineProperty(CheckCircleOutlined, "__esModule", { value: true });
-var default_1$8 = CheckCircleOutlined["default"] = void 0;
-var React$8 = _interopRequireWildcard$8(require$$2);
-var _createSvgIcon$8 = _interopRequireDefault$8(requireCreateSvgIcon());
-var _default$8 = (0, _createSvgIcon$8["default"])(/*#__PURE__*/ React$8.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" }), 'CheckCircleOutlined');
-default_1$8 = CheckCircleOutlined["default"] = _default$8;
+var default_1$e = CheckCircleOutlined["default"] = void 0;
+var React$e = _interopRequireWildcard$e(require$$2);
+var _createSvgIcon$e = _interopRequireDefault$e(requireCreateSvgIcon());
+var _default$e = (0, _createSvgIcon$e["default"])(/*#__PURE__*/ React$e.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" }), 'CheckCircleOutlined');
+default_1$e = CheckCircleOutlined["default"] = _default$e;
 var FileCopyOutlined = {};
-var _interopRequireDefault$7 = interopRequireDefaultExports;
-var _interopRequireWildcard$7 = interopRequireWildcardExports;
+var _interopRequireDefault$d = interopRequireDefaultExports;
+var _interopRequireWildcard$d = interopRequireWildcardExports;
 Object.defineProperty(FileCopyOutlined, "__esModule", { value: true });
-var default_1$7 = FileCopyOutlined["default"] = void 0;
-var React$7 = _interopRequireWildcard$7(require$$2);
-var _createSvgIcon$7 = _interopRequireDefault$7(requireCreateSvgIcon());
-var _default$7 = (0, _createSvgIcon$7["default"])(/*#__PURE__*/ React$7.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" }), 'FileCopyOutlined');
-default_1$7 = FileCopyOutlined["default"] = _default$7;
+var default_1$d = FileCopyOutlined["default"] = void 0;
+var React$d = _interopRequireWildcard$d(require$$2);
+var _createSvgIcon$d = _interopRequireDefault$d(requireCreateSvgIcon());
+var _default$d = (0, _createSvgIcon$d["default"])(/*#__PURE__*/ React$d.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" }), 'FileCopyOutlined');
+default_1$d = FileCopyOutlined["default"] = _default$d;
 var makeClickToCopyStyles = makeStylesFactory({ checkCircle: { display: 'block !important' }, darkBackground: {}, containerHover: { '&:hover': { '& svg': { display: 'block' }, cursor: 'pointer' }, '& svg': { display: 'none' } } });
-var useClickToCopyCore = function useClickToCopyCore(_ref25) { var classes = _ref25.classes, darkBackground = _ref25.darkBackground, _ref25$iconSize = _ref25.iconSize, iconSize = _ref25$iconSize === void 0 ? 'small' : _ref25$iconSize, text = _ref25.text; var _h11 = h$4(false), _h12 = _slicedToArray2(_h11, 2), copied = _h12[0], setCopied = _h12[1]; var copyToClipboard = function copyToClipboard(e) { e.stopPropagation(); setCopied(true); navigator.clipboard.writeText(text); setTimeout(function () { return setCopied(false); }, 1000); }; var CopyIcon = copied ? ( /*#__PURE__*/wn.createElement(default_1$8, { className: C(classes.checkCircle, _defineProperty2({}, classes.darkBackground, darkBackground)), fontSize: iconSize })) : ( /*#__PURE__*/wn.createElement(default_1$7, { fontSize: iconSize })); return { copied: copied, copyToClipboard: copyToClipboard, CopyIcon: CopyIcon, containerHoverClass: classes.containerHover }; };
-var useStyles$g = makeClickToCopyStyles();
-var useClickToCopy = function useClickToCopy(params) { var classes = useStyles$g(); return useClickToCopyCore(Object.assign(Object.assign({}, params), { classes: classes })); };
-var useStyles$f = makeCopyableTextStyles(commonCodeStyles, { copyableText: { whiteSpace: function whiteSpace(_ref26) { var _whiteSpace = _ref26.whiteSpace; return _whiteSpace; } } });
-var CopyableText = function CopyableText(props) { var classes = useStyles$f(props); return /*#__PURE__*/ wn.createElement(CopyableTextCore, Object.assign({}, props, { CodeComponent: Code, LabelComponent: Label, TypographyComponent: Typography, classes: classes, useClickToCopy: useClickToCopy })); };
-var makeInputStyles = makeStylesFactory(function (theme) { return { inputContainer: _defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('sm'), { width: '100%', minWidth: 'unset', flex: 1 }), "width", DEFAULT_GRID_COLUMN_WIDTH), "minWidth", DEFAULT_GRID_COLUMN_WIDTH), multilineContainer: { width: '100%', maxWidth: DEFAULT_MAX_ITEM_WIDTH }, readOnlyContainer: { display: '-webkit-box', '-webkit-line-clamp': 2, '-webkit-box-orient': 'vertical', overflow: 'hidden', overflowWrap: 'break-word' }, input: { '& .MuiOutlinedInput-notchedOutline': { border: '1px solid', borderRadius: 4 }, '&.MuiOutlinedInput-multiline': { padding: 0 }, '& [class*="MuiOutlinedInput-input"]': { '&::placeholder': { opacity: 1 }, padding: theme.spacing(1) }, '&:hover .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiOutlinedInput-notchedOutline': { borderWidth: 1 } }, fullWidth: { width: '100%' }, fileUploadContainer: { alignItems: 'center', display: 'flex', marginBottom: theme.spacing(0.5), gap: theme.spacing(0.5) }, fileUploadHidden: { display: 'none' } }; });
+var useClickToCopyCore = function useClickToCopyCore(_ref26) { var classes = _ref26.classes, darkBackground = _ref26.darkBackground, _ref26$iconSize = _ref26.iconSize, iconSize = _ref26$iconSize === void 0 ? 'small' : _ref26$iconSize, text = _ref26.text; var _h11 = h$4(false), _h12 = _slicedToArray2(_h11, 2), copied = _h12[0], setCopied = _h12[1]; var copyToClipboard = function copyToClipboard(e) { e.stopPropagation(); setCopied(true); navigator.clipboard.writeText(text); setTimeout(function () { return setCopied(false); }, 1000); }; var CopyIcon = copied ? ( /*#__PURE__*/wn.createElement(default_1$e, { className: C(classes.checkCircle, _defineProperty2({}, classes.darkBackground, darkBackground)), fontSize: iconSize })) : ( /*#__PURE__*/wn.createElement(default_1$d, { fontSize: iconSize })); return { copied: copied, copyToClipboard: copyToClipboard, CopyIcon: CopyIcon, containerHoverClass: classes.containerHover }; };
+var useStyles$h = makeClickToCopyStyles(function () { return { containerHover: { '& svg': { height: 18, width: 18 }, '&:hover': { '& svg': { height: 18, width: 18 } } } }; });
+var useClickToCopy = function useClickToCopy(params) { var classes = useStyles$h(); return useClickToCopyCore(Object.assign(Object.assign({}, params), { classes: classes, iconSize: 'inherit' })); };
+var useStyles$g = makeCopyableTextStyles(commonCodeStyles, { copyableText: { whiteSpace: function whiteSpace(_ref27) { var _whiteSpace = _ref27.whiteSpace; return _whiteSpace; } } });
+var CopyableText = function CopyableText(props) { var classes = useStyles$g(props); return /*#__PURE__*/ wn.createElement(CopyableTextCore, Object.assign({}, props, { CodeComponent: Code, LabelComponent: Label, TypographyComponent: Typography, classes: classes, useClickToCopy: useClickToCopy })); };
+var makeInputStyles = makeStylesFactory(function (theme) { return { inputContainer: _defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('sm'), { width: '100%', minWidth: 'unset', flex: 1 }), "width", DEFAULT_GRID_COLUMN_WIDTH), "minWidth", DEFAULT_GRID_COLUMN_WIDTH), multilineContainer: { width: '100%', maxWidth: DEFAULT_MAX_ITEM_WIDTH }, readOnlyContainer: { display: '-webkit-box', '-webkit-line-clamp': 2, '-webkit-box-orient': 'vertical', overflow: 'hidden', overflowWrap: 'break-word' }, input: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiOutlinedInput-notchedOutline"), { border: '1px solid', borderRadius: 4 }), "&.".concat(classNamePrefix, "MuiOutlinedInput-multiline"), { padding: 0 }), "& [class*=\"".concat(classNamePrefix, "MuiOutlinedInput-input\"]"), { '&::placeholder': { opacity: 1 }, padding: theme.spacing(1) }), "&:hover .".concat(classNamePrefix, "MuiOutlinedInput-notchedOutline, &.Mui-focused .").concat(classNamePrefix, "MuiOutlinedInput-notchedOutline"), { borderWidth: 1 }), fullWidth: { width: '100%' }, fileUploadContainer: { alignItems: 'center', display: 'flex', marginBottom: theme.spacing(0.5), gap: theme.spacing(0.5) }, fileUploadHidden: { display: 'none' } }; });
 var FILE_UPLOAD_ID = 'file-upload';
-var FileUpload = function FileUpload(_ref27) { var onChange = _ref27.onChange, readOnly = _ref27.readOnly, filename = _ref27.filename, setFilename = _ref27.setFilename, classes = _ref27.classes, Button = _ref27.ButtonComponent, Typography = _ref27.TypographyComponent; var _h13 = h$4(new FileReader()), _h14 = _slicedToArray2(_h13, 1), fileReader = _h14[0]; var fileInputKey = Math.floor(Math.random() * 10000); p$3(function () { var onLoad = function onLoad() { if (typeof fileReader.result === 'string') {
+var FileUpload = function FileUpload(_ref28) { var onChange = _ref28.onChange, readOnly = _ref28.readOnly, filename = _ref28.filename, setFilename = _ref28.setFilename, classes = _ref28.classes, Button = _ref28.ButtonComponent, Typography = _ref28.TypographyComponent; var _h13 = h$4(new FileReader()), _h14 = _slicedToArray2(_h13, 1), fileReader = _h14[0]; var fileInputKey = Math.floor(Math.random() * 10000); p$3(function () { var onLoad = function onLoad() { if (typeof fileReader.result === 'string') {
     onChange === null || onChange === void 0 ? void 0 : onChange(fileReader.result);
 } }; fileReader.addEventListener('load', onLoad); return function () { return fileReader.removeEventListener('load', onLoad); }; }, [fileReader, onChange]); p$3(function () { setFilename(null); }, [readOnly, setFilename]); var onFileUpload = function onFileUpload(event) { var file = event.target.files ? event.target.files[0] : null; var filename = (file === null || file === void 0 ? void 0 : file.name) ? file.name.replace('C:\\fakepath\\', '') : null; setFilename(filename); if (file) {
     fileReader.readAsText(file);
 } }; var resetFileUpload = function resetFileUpload() { var inputElement = document.querySelector('input[type=file]'); if (inputElement) {
     inputElement.value = '';
 } }; var uploadedFilename = filename !== null && filename !== void 0 ? filename : 'No file chosen'; var fileInputId = "".concat(FILE_UPLOAD_ID, "-").concat(fileInputKey); return /*#__PURE__*/ wn.createElement("label", { className: classes.fileUploadContainer, htmlFor: fileInputId }, /*#__PURE__*/ wn.createElement("input", { className: classes.fileUploadHidden, id: fileInputId, onChange: onFileUpload, onClick: resetFileUpload, type: "file" }), /*#__PURE__*/ wn.createElement(Button, { compact: true, component: "span", variant: "secondary" }, "Choose file"), /*#__PURE__*/ wn.createElement(Typography, null, uploadedFilename)); };
-var InputCore = function InputCore(_ref28) { var caption = _ref28.caption, copyable = _ref28.copyable, disabled = _ref28.disabled, error = _ref28.error, fileUpload = _ref28.fileUpload, fullWidth = _ref28.fullWidth, id = _ref28.id, inputProps = _ref28.inputProps, inputRef = _ref28.inputRef, label = _ref28.label, multiline = _ref28.multiline, onBlur = _ref28.onBlur, onChange = _ref28.onChange, onFocus = _ref28.onFocus, onKeyDown = _ref28.onKeyDown, placeholder = _ref28.placeholder, readOnly = _ref28.readOnly, readOnlyConcealed = _ref28.readOnlyConcealed, required = _ref28.required, type = _ref28.type, value = _ref28.value, classes = _ref28.classes, ButtonComponent = _ref28.ButtonComponent, CopyableText = _ref28.CopyableTextComponent, Label = _ref28.LabelComponent, Typography = _ref28.TypographyComponent; var inputId = useShortId(id); var _h15 = h$4(null), _h16 = _slicedToArray2(_h15, 2), filename = _h16[0], setFilename = _h16[1]; var handleOnChange = function handleOnChange(e) { onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value); if (fileUpload && filename) {
+var InputCore = function InputCore(_ref29) { var caption = _ref29.caption, copyable = _ref29.copyable, disabled = _ref29.disabled, error = _ref29.error, fileUpload = _ref29.fileUpload, fullWidth = _ref29.fullWidth, id = _ref29.id, inputProps = _ref29.inputProps, inputRef = _ref29.inputRef, label = _ref29.label, multiline = _ref29.multiline, onBlur = _ref29.onBlur, onChange = _ref29.onChange, onFocus = _ref29.onFocus, onKeyDown = _ref29.onKeyDown, placeholder = _ref29.placeholder, readOnly = _ref29.readOnly, readOnlyConcealed = _ref29.readOnlyConcealed, required = _ref29.required, type = _ref29.type, value = _ref29.value, classes = _ref29.classes, ButtonComponent = _ref29.ButtonComponent, CopyableText = _ref29.CopyableTextComponent, Label = _ref29.LabelComponent, Typography = _ref29.TypographyComponent; var inputId = useShortId(id); var _h15 = h$4(null), _h16 = _slicedToArray2(_h15, 2), filename = _h16[0], setFilename = _h16[1]; var handleOnChange = function handleOnChange(e) { onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value); if (fileUpload && filename) {
     setFilename(null);
-} }; var showCaption = !!caption && !error; var concealedValue = (value === null || value === void 0 ? void 0 : value.length) ? '•'.repeat(Math.min(25, value.length)) : ''; var visibleValue = readOnlyConcealed ? concealedValue : value; var shouldDisable = disabled && !readOnly; var showCopyableText = readOnly && copyable && !!visibleValue; var showPlainText = readOnly && (!copyable || !visibleValue); return /*#__PURE__*/ wn.createElement("div", { className: C(classes.inputContainer, _defineProperty2(_defineProperty2(_defineProperty2({}, classes.multilineContainer, multiline), classes.readOnlyContainer, readOnly), classes.fullWidth, fullWidth)) }, label && ( /*#__PURE__*/wn.createElement(Label, { disabled: shouldDisable, htmlFor: inputId, required: required }, label)), showPlainText && /*#__PURE__*/ wn.createElement(Typography, null, visibleValue || '–'), showCopyableText && /*#__PURE__*/ wn.createElement(CopyableText, { textToCopy: value }, visibleValue), !readOnly && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, fileUpload && ( /*#__PURE__*/wn.createElement(FileUpload, { ButtonComponent: ButtonComponent, TypographyComponent: Typography, classes: classes, filename: filename, onChange: onChange, readOnly: shouldDisable, setFilename: setFilename })), /*#__PURE__*/ wn.createElement(OutlinedInput$1, { className: classes.input, disabled: shouldDisable, error: !!error, fullWidth: true, id: inputId, inputProps: inputProps, inputRef: inputRef, multiline: multiline, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, required: required, rows: 3, type: type, value: value }), showCaption && ( /*#__PURE__*/wn.createElement(Typography, { disabled: shouldDisable, variant: "body2" }, caption)), error && ( /*#__PURE__*/wn.createElement(Typography, { color: "error", variant: "body2" }, error))))); };
-var useStyles$e = makeInputStyles(function (theme) { return { input: { color: theme.styleConfig.inputs.textColor, '& .MuiOutlinedInput-notchedOutline': { borderColor: theme.styleConfig.inputs.borderColor }, '& [class*="MuiOutlinedInput-input"]': { '&::placeholder': { color: theme.styleConfig.inputs.placeholderColor } }, '&.Mui-disabled .MuiOutlinedInput-notchedOutline': { borderColor: theme.styleConfig.inputs.borderColor }, '&:hover .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: theme.styleConfig.inputs.borderColor }, '&.Mui-error': { color: theme.styleConfig.colors.error } } }; });
+} }; var showCaption = !!caption && !error; var concealedValue = (value === null || value === void 0 ? void 0 : value.length) ? '•'.repeat(Math.min(25, value.length)) : ''; var visibleValue = readOnlyConcealed ? concealedValue : value; var shouldDisable = disabled && !readOnly; var showCopyableText = readOnly && copyable && !!visibleValue; var showPlainText = readOnly && (!copyable || !visibleValue); return /*#__PURE__*/ wn.createElement("div", { className: C(classes.inputContainer, _defineProperty2(_defineProperty2(_defineProperty2({}, classes.multilineContainer, multiline), classes.readOnlyContainer, readOnly), classes.fullWidth, fullWidth)) }, label && ( /*#__PURE__*/wn.createElement(Label, { variant: "caption", disabled: shouldDisable, htmlFor: inputId, required: required }, label)), showPlainText && /*#__PURE__*/ wn.createElement(Typography, null, visibleValue || '–'), showCopyableText && /*#__PURE__*/ wn.createElement(CopyableText, { textToCopy: value }, visibleValue), !readOnly && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, fileUpload && ( /*#__PURE__*/wn.createElement(FileUpload, { ButtonComponent: ButtonComponent, TypographyComponent: Typography, classes: classes, filename: filename, onChange: onChange, readOnly: shouldDisable, setFilename: setFilename })), /*#__PURE__*/ wn.createElement(OutlinedInput$1, { className: classes.input, disabled: shouldDisable, error: !!error, fullWidth: true, id: inputId, inputProps: inputProps, inputRef: inputRef, multiline: multiline, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, required: required, rows: 3, type: type, value: value }), showCaption && ( /*#__PURE__*/wn.createElement(Typography, { disabled: shouldDisable, variant: "caption", color: "secondary" }, caption)), error && ( /*#__PURE__*/wn.createElement(Typography, { variant: "caption", color: "error" }, error))))); };
+var useStyles$f = makeInputStyles(function (theme) { return { input: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({ color: theme.styleConfig.inputs.textColor, fontSize: theme.typography.body2.fontSize }, "& .".concat(classNamePrefix, "MuiOutlinedInput-notchedOutline"), { borderColor: theme.styleConfig.inputs.borderColor }), "& [class*=\"".concat(classNamePrefix, "MuiOutlinedInput-input\"]"), { '&::placeholder': { color: theme.styleConfig.inputs.placeholderColor } }), "&.Mui-disabled .".concat(classNamePrefix, "MuiOutlinedInput-notchedOutline"), { borderColor: theme.styleConfig.inputs.borderColor }), "&:hover .".concat(classNamePrefix, "MuiOutlinedInput-notchedOutline, &.Mui-focused .").concat(classNamePrefix, "MuiOutlinedInput-notchedOutline"), { borderColor: theme.styleConfig.inputs.borderColor }), '&.Mui-error', { color: theme.styleConfig.colors.error }) }; });
 var LabelBody1 = function LabelBody1(props) { return /*#__PURE__*/ wn.createElement(Label, Object.assign({ variant: "body1" }, props)); };
-var Input$1 = function Input$1(_a) { var labelVariant = _a.labelVariant, props = __rest(_a, ["labelVariant"]); var classes = useStyles$e(props); return /*#__PURE__*/ wn.createElement(InputCore, Object.assign({}, props, { classes: classes, ButtonComponent: Button, CopyableTextComponent: CopyableText, LabelComponent: labelVariant === 'body1' ? LabelBody1 : Label, TypographyComponent: Typography })); };
+var Input$1 = function Input$1(_a) { var labelVariant = _a.labelVariant, props = __rest(_a, ["labelVariant"]); var classes = useStyles$f(props); return /*#__PURE__*/ wn.createElement(InputCore, Object.assign({}, props, { classes: classes, ButtonComponent: Button, CopyableTextComponent: CopyableText, LabelComponent: labelVariant === 'body1' ? LabelBody1 : Label, TypographyComponent: Typography })); };
 var AddRounded = {};
-var _interopRequireDefault$6 = interopRequireDefaultExports;
-var _interopRequireWildcard$6 = interopRequireWildcardExports;
+var _interopRequireDefault$c = interopRequireDefaultExports;
+var _interopRequireWildcard$c = interopRequireWildcardExports;
 Object.defineProperty(AddRounded, "__esModule", { value: true });
-var default_1$6 = AddRounded["default"] = void 0;
-var React$6 = _interopRequireWildcard$6(require$$2);
-var _createSvgIcon$6 = _interopRequireDefault$6(requireCreateSvgIcon());
-var _default$6 = (0, _createSvgIcon$6["default"])(/*#__PURE__*/ React$6.createElement("path", { d: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z" }), 'AddRounded');
-default_1$6 = AddRounded["default"] = _default$6;
-var ContentSpacingCore = function ContentSpacingCore(_ref29) { var children = _ref29.children, gap = _ref29.gap; var theme = useTheme(); return /*#__PURE__*/ wn.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing(gap !== null && gap !== void 0 ? gap : DEFAULT_GAP) } }, children); };
+var default_1$c = AddRounded["default"] = void 0;
+var React$c = _interopRequireWildcard$c(require$$2);
+var _createSvgIcon$c = _interopRequireDefault$c(requireCreateSvgIcon());
+var _default$c = (0, _createSvgIcon$c["default"])(/*#__PURE__*/ React$c.createElement("path", { d: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z" }), 'AddRounded');
+default_1$c = AddRounded["default"] = _default$c;
+var ContentSpacingCore = function ContentSpacingCore(_ref30) { var children = _ref30.children, gap = _ref30.gap; var theme = useTheme(); return /*#__PURE__*/ wn.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing(gap !== null && gap !== void 0 ? gap : DEFAULT_GAP) } }, children); };
 var ADD_NEW_BUTTON_TEXT = 'Add new';
 var ListEditorCore = function ListEditorCore(_a) { var title = _a.title, description = _a.description, limit = _a.limit, addModalProps = _a.addModalProps, hideAddButton = _a.hideAddButton, onAdd = _a.onAdd, addButtonText = _a.addButtonText, Button = _a.ButtonComponent, EmbeddedTable = _a.EmbeddedTableComponent, Modal = _a.ModalComponent, Typography = _a.TypographyComponent, embeddedTableProps = __rest(_a, ["title", "description", "limit", "addModalProps", "hideAddButton", "onAdd", "addButtonText", "ButtonComponent", "EmbeddedTableComponent", "ModalComponent", "TypographyComponent"]); if (!addModalProps && !onAdd) {
     throw new Error('Either addModalProps or onAdd prop must be provided');
-} addButtonText = addButtonText || ADD_NEW_BUTTON_TEXT; var modalState = useModalState(addModalProps === null || addModalProps === void 0 ? void 0 : addModalProps.confirm); var items = embeddedTableProps.items, readOnly = embeddedTableProps.readOnly; var onClose = function onClose() { var _a; (_a = addModalProps === null || addModalProps === void 0 ? void 0 : addModalProps.close) === null || _a === void 0 ? void 0 : _a.call(addModalProps); modalState.close(); }; var addNew = addModalProps ? modalState.open : onAdd; return /*#__PURE__*/ wn.createElement(ContentSpacingCore, null, addModalProps && ( /*#__PURE__*/wn.createElement(Modal, Object.assign({}, addModalProps, modalState, { close: onClose }), addModalProps.content)), /*#__PURE__*/ wn.createElement("div", null, title && /*#__PURE__*/ wn.createElement(Typography, { variant: "h4" }, title), description && /*#__PURE__*/ wn.createElement(Typography, null, description)), items && items.length > 0 && ( /*#__PURE__*/wn.createElement(EmbeddedTable, Object.assign({}, embeddedTableProps, { bottomAction: !hideAddButton && (!limit || items.length < limit) && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: addNew, startIcon: /*#__PURE__*/ wn.createElement(default_1$6, null), variant: "text" }, addButtonText)) }))), !hideAddButton && !readOnly && !items.length && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: addNew, startIcon: /*#__PURE__*/ wn.createElement(default_1$6, null), variant: "ghost" }, addButtonText))); };
+} addButtonText = addButtonText || ADD_NEW_BUTTON_TEXT; var modalState = useModalState(addModalProps === null || addModalProps === void 0 ? void 0 : addModalProps.confirm); var items = embeddedTableProps.items, readOnly = embeddedTableProps.readOnly; var onClose = function onClose() { var _a; (_a = addModalProps === null || addModalProps === void 0 ? void 0 : addModalProps.close) === null || _a === void 0 ? void 0 : _a.call(addModalProps); modalState.close(); }; var addNew = addModalProps ? modalState.open : onAdd; return /*#__PURE__*/ wn.createElement(ContentSpacingCore, null, addModalProps && ( /*#__PURE__*/wn.createElement(Modal, Object.assign({}, addModalProps, modalState, { close: onClose }), addModalProps.content)), /*#__PURE__*/ wn.createElement("div", null, title && /*#__PURE__*/ wn.createElement(Typography, { variant: "h4" }, title), description && /*#__PURE__*/ wn.createElement(Typography, null, description)), items && items.length > 0 && ( /*#__PURE__*/wn.createElement(EmbeddedTable, Object.assign({}, embeddedTableProps, { bottomAction: !hideAddButton && (!limit || items.length < limit) && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: addNew, startIcon: /*#__PURE__*/ wn.createElement(default_1$c, null), variant: "text" }, addButtonText)) }))), !hideAddButton && !readOnly && !items.length && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: addNew, startIcon: /*#__PURE__*/ wn.createElement(default_1$c, null), variant: "ghost" }, addButtonText))); };
 var validateRowKey = function validateRowKey(items, rowKeyExtractor) { var _a; if (items.length > 0 && typeof items[0] !== 'string' && (!((_a = items[0]) === null || _a === void 0 ? void 0 : _a.id) || typeof items[0].id !== 'string') && !rowKeyExtractor) {
     throw new Error('rowKeyExtractor is required if items are not strings or do not have an id property');
 } };
@@ -8918,59 +8986,60 @@ var getTableCellValue = function getTableCellValue(children) { var value = child
 } return value; };
 var useTableActionStyles = makeStyles(function (theme) { return { tableActions: { display: 'flex', gap: theme.spacing(1), margin: theme.spacing(0, -1.25) } }; });
 var TABLE_ACTIONS_HEADER = 'Actions';
-var TableActionsCore = function TableActionsCore(_ref30) { var warningAction = _ref30.warningAction, action = _ref30.action, customAction = _ref30.customAction, Button = _ref30.ButtonComponent; var classes = useTableActionStyles(); return /*#__PURE__*/ wn.createElement("div", { className: classes.tableActions }, action && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: action.onClick, variant: "text" }, action.text)), warningAction && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: warningAction.onClick, variant: "text", warning: true }, warningAction.text)), customAction); };
+var TableActionsCore = function TableActionsCore(_ref31) { var warningAction = _ref31.warningAction, action = _ref31.action, customAction = _ref31.customAction, Button = _ref31.ButtonComponent; var classes = useTableActionStyles(); return /*#__PURE__*/ wn.createElement("div", { className: classes.tableActions }, action && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: action.onClick, variant: "text" }, action.text)), warningAction && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: warningAction.onClick, variant: "text", warning: true }, warningAction.text)), customAction); };
 var makeEmbeddedTableStyles = makeStylesFactory(function (theme) { return { embeddedTableWithActions: { width: 'calc(100% - 2px)' }, tableCell: { padding: theme.spacing(0.5, 1), minWidth: 80 }, tableActionsCell: { position: 'sticky', right: 0, width: '1%' }, tableHeader: {}, bottomAction: { borderBottom: 'none' } }; });
-var EmbeddedTableCore = function EmbeddedTableCore(_ref31) { var itemRenderer = _ref31.itemRenderer, items = _ref31.items, rowKeyExtractor = _ref31.rowKeyExtractor, getItemActionProps = _ref31.getItemActionProps, readOnly = _ref31.readOnly, bottomAction = _ref31.bottomAction, initialItemState = _ref31.initialItemState, classes = _ref31.classes, TableActions = _ref31.TableActionsComponent, Typography = _ref31.TypographyComponent; var tableActionClasses = useTableActionStyles(); validateRowKey(items, rowKeyExtractor); var getId = T$2(function (item) { return rowKeyExtractor ? rowKeyExtractor(item) : typeof item === 'string' ? item : item.id; }, [rowKeyExtractor]); var itemState = initialItemState !== null && initialItemState !== void 0 ? initialItemState : {}; var _h17 = h$4(items.reduce(function (acc, item) { return Object.assign(Object.assign({}, acc), _defineProperty2({}, getId(item), itemState)); }, {})), _h18 = _slicedToArray2(_h17, 2), itemsState = _h18[0], setItemsState = _h18[1]; var setItemState = function setItemState(item, state) { var id = getId(item); setItemsState(function (prevState) { return Object.assign(Object.assign({}, prevState), _defineProperty2({}, id, state)); }); }; p$3(function () { setItemsState(items.reduce(function (acc, item) { var _a; return Object.assign(Object.assign({}, acc), _defineProperty2({}, getId(item), (_a = itemsState[getId(item)]) !== null && _a !== void 0 ? _a : itemState)); }, {})); }, [items, getId]); return /*#__PURE__*/ wn.createElement(TableContainer$1, null, /*#__PURE__*/ wn.createElement(MUITable, { className: C(_defineProperty2({}, classes.embeddedTableWithActions, getItemActionProps)) }, /*#__PURE__*/ wn.createElement(TableHead$1, null, /*#__PURE__*/ wn.createElement(MUITableRow, null, itemRenderer.map(function (column) { return /*#__PURE__*/ wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableHeader), key: "col-header-".concat(column.title) }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, column.title)); }), !readOnly && getItemActionProps && ( /*#__PURE__*/wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableActionsCell, classes.tableHeader) }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, TABLE_ACTIONS_HEADER))))), /*#__PURE__*/ wn.createElement(TableBody$1, null, items.map(function (item) { var id = getId(item); return /*#__PURE__*/ wn.createElement(MUITableRow, { key: id }, itemRenderer.map(function (column, i) { var children = column.getValue(item, itemsState[id]); var value = getTableCellValue(children); return /*#__PURE__*/ wn.createElement(MUITableCell, { className: classes.tableCell, key: "col-".concat(column.title, "-").concat(i) }, typeof value === 'string' ? /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, value) : value); }), !readOnly && getItemActionProps && ( /*#__PURE__*/wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableActionsCell) }, /*#__PURE__*/ wn.createElement(TableActions, Object.assign({}, getItemActionProps(item, function (state) { return state && setItemState(item, state); }, itemsState[id])))))); }), !readOnly && bottomAction && ( /*#__PURE__*/wn.createElement(MUITableRow, null, /*#__PURE__*/ wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.bottomAction), colSpan: getItemActionProps ? itemRenderer.length : itemRenderer.length - 1 }), /*#__PURE__*/ wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableActionsCell, classes.bottomAction) }, /*#__PURE__*/ wn.createElement("div", { className: tableActionClasses.tableActions }, bottomAction))))))); };
+var EmbeddedTableCore = function EmbeddedTableCore(_ref32) { var itemRenderer = _ref32.itemRenderer, items = _ref32.items, rowKeyExtractor = _ref32.rowKeyExtractor, getItemActionProps = _ref32.getItemActionProps, readOnly = _ref32.readOnly, bottomAction = _ref32.bottomAction, initialItemState = _ref32.initialItemState, classes = _ref32.classes, TableActions = _ref32.TableActionsComponent, Typography = _ref32.TypographyComponent; var tableActionClasses = useTableActionStyles(); validateRowKey(items, rowKeyExtractor); var getId = T$2(function (item) { return rowKeyExtractor ? rowKeyExtractor(item) : typeof item === 'string' ? item : item.id; }, [rowKeyExtractor]); var itemState = initialItemState !== null && initialItemState !== void 0 ? initialItemState : {}; var _h17 = h$4(items.reduce(function (acc, item) { return Object.assign(Object.assign({}, acc), _defineProperty2({}, getId(item), itemState)); }, {})), _h18 = _slicedToArray2(_h17, 2), itemsState = _h18[0], setItemsState = _h18[1]; var setItemState = function setItemState(item, state) { var id = getId(item); setItemsState(function (prevState) { return Object.assign(Object.assign({}, prevState), _defineProperty2({}, id, state)); }); }; p$3(function () { setItemsState(items.reduce(function (acc, item) { var _a; return Object.assign(Object.assign({}, acc), _defineProperty2({}, getId(item), (_a = itemsState[getId(item)]) !== null && _a !== void 0 ? _a : itemState)); }, {})); }, [items, getId]); return /*#__PURE__*/ wn.createElement(TableContainer$1, null, /*#__PURE__*/ wn.createElement(MUITable, { className: C(_defineProperty2({}, classes.embeddedTableWithActions, getItemActionProps)) }, /*#__PURE__*/ wn.createElement(TableHead$1, null, /*#__PURE__*/ wn.createElement(MUITableRow, null, itemRenderer.map(function (column) { return /*#__PURE__*/ wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableHeader), key: "col-header-".concat(column.title) }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, column.title)); }), !readOnly && getItemActionProps && ( /*#__PURE__*/wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableActionsCell, classes.tableHeader) }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, TABLE_ACTIONS_HEADER))))), /*#__PURE__*/ wn.createElement(TableBody$1, null, items.map(function (item) { var id = getId(item); return /*#__PURE__*/ wn.createElement(MUITableRow, { key: id }, itemRenderer.map(function (column, i) { var children = column.getValue(item, itemsState[id]); var value = getTableCellValue(children); return /*#__PURE__*/ wn.createElement(MUITableCell, { className: classes.tableCell, key: "col-".concat(column.title, "-").concat(i) }, typeof value === 'string' ? /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, value) : value); }), !readOnly && getItemActionProps && ( /*#__PURE__*/wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableActionsCell) }, /*#__PURE__*/ wn.createElement(TableActions, Object.assign({}, getItemActionProps(item, function (state) { return state && setItemState(item, state); }, itemsState[id])))))); }), !readOnly && bottomAction && ( /*#__PURE__*/wn.createElement(MUITableRow, null, /*#__PURE__*/ wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.bottomAction), colSpan: getItemActionProps ? itemRenderer.length : itemRenderer.length - 1 }), /*#__PURE__*/ wn.createElement(MUITableCell, { className: C(classes.tableCell, classes.tableActionsCell, classes.bottomAction) }, /*#__PURE__*/ wn.createElement("div", { className: tableActionClasses.tableActions }, bottomAction))))))); };
 makeStyles(function (theme) { return { tableActions: { display: 'flex', gap: theme.spacing(1), margin: theme.spacing(0, -1.25) } }; });
 var TableActions = function TableActions(props) { return /*#__PURE__*/ wn.createElement(TableActionsCore, Object.assign({}, props, { ButtonComponent: Button })); };
-var useStyles$d = makeEmbeddedTableStyles(function (theme) { return { tableHeader: { borderBottomColor: theme.styleConfig.colors.subtle } }; });
-var EmbeddedTable = function EmbeddedTable(props) { var classes = useStyles$d(); return /*#__PURE__*/ wn.createElement(EmbeddedTableCore, Object.assign({}, props, { TableActionsComponent: TableActions, TypographyComponent: Typography, classes: classes })); };
+var useStyles$e = makeEmbeddedTableStyles(function (theme) { return { tableHeader: { borderBottomColor: theme.styleConfig.colors.subtle } }; });
+var TypographyCustom = function TypographyCustom(props) { return /*#__PURE__*/ wn.createElement(Typography, Object.assign({}, props, { variant: "caption", color: "secondary" })); };
+var EmbeddedTable = function EmbeddedTable(props) { var classes = useStyles$e(); return /*#__PURE__*/ wn.createElement(EmbeddedTableCore, Object.assign({}, props, { TableActionsComponent: TableActions, TypographyComponent: TypographyCustom, classes: classes })); };
 var ListEditor = function ListEditor(props) { return /*#__PURE__*/ wn.createElement(ListEditorCore, Object.assign({}, props, { ButtonComponent: Button, EmbeddedTableComponent: EmbeddedTable, ModalComponent: Modal, TypographyComponent: Typography })); };
 var CheckRounded = {};
-var _interopRequireDefault$5 = interopRequireDefaultExports;
-var _interopRequireWildcard$5 = interopRequireWildcardExports;
+var _interopRequireDefault$b = interopRequireDefaultExports;
+var _interopRequireWildcard$b = interopRequireWildcardExports;
 Object.defineProperty(CheckRounded, "__esModule", { value: true });
-var default_1$5 = CheckRounded["default"] = void 0;
-var React$5 = _interopRequireWildcard$5(require$$2);
-var _createSvgIcon$5 = _interopRequireDefault$5(requireCreateSvgIcon());
-var _default$5 = (0, _createSvgIcon$5["default"])(/*#__PURE__*/ React$5.createElement("path", { d: "M9 16.17L5.53 12.7a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.9959.9959 0 00-1.41 0L9 16.17z" }), 'CheckRounded');
-default_1$5 = CheckRounded["default"] = _default$5;
+var default_1$b = CheckRounded["default"] = void 0;
+var React$b = _interopRequireWildcard$b(require$$2);
+var _createSvgIcon$b = _interopRequireDefault$b(requireCreateSvgIcon());
+var _default$b = (0, _createSvgIcon$b["default"])(/*#__PURE__*/ React$b.createElement("path", { d: "M9 16.17L5.53 12.7a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.9959.9959 0 00-1.41 0L9 16.17z" }), 'CheckRounded');
+default_1$b = CheckRounded["default"] = _default$b;
 var DoneAll = {};
-var _interopRequireDefault$4 = interopRequireDefaultExports;
-var _interopRequireWildcard$4 = interopRequireWildcardExports;
+var _interopRequireDefault$a = interopRequireDefaultExports;
+var _interopRequireWildcard$a = interopRequireWildcardExports;
 Object.defineProperty(DoneAll, "__esModule", { value: true });
-var default_1$4 = DoneAll["default"] = void 0;
-var React$4 = _interopRequireWildcard$4(require$$2);
-var _createSvgIcon$4 = _interopRequireDefault$4(requireCreateSvgIcon());
-var _default$4 = (0, _createSvgIcon$4["default"])(/*#__PURE__*/ React$4.createElement("path", { d: "M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z" }), 'DoneAll');
-default_1$4 = DoneAll["default"] = _default$4;
+var default_1$a = DoneAll["default"] = void 0;
+var React$a = _interopRequireWildcard$a(require$$2);
+var _createSvgIcon$a = _interopRequireDefault$a(requireCreateSvgIcon());
+var _default$a = (0, _createSvgIcon$a["default"])(/*#__PURE__*/ React$a.createElement("path", { d: "M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z" }), 'DoneAll');
+default_1$a = DoneAll["default"] = _default$a;
 var ExpandMore = {};
-var _interopRequireDefault$3 = interopRequireDefaultExports;
-var _interopRequireWildcard$3 = interopRequireWildcardExports;
+var _interopRequireDefault$9 = interopRequireDefaultExports;
+var _interopRequireWildcard$9 = interopRequireWildcardExports;
 Object.defineProperty(ExpandMore, "__esModule", { value: true });
-var default_1$3 = ExpandMore["default"] = void 0;
-var React$3 = _interopRequireWildcard$3(require$$2);
-var _createSvgIcon$3 = _interopRequireDefault$3(requireCreateSvgIcon());
-var _default$3 = (0, _createSvgIcon$3["default"])(/*#__PURE__*/ React$3.createElement("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }), 'ExpandMore');
-default_1$3 = ExpandMore["default"] = _default$3;
+var default_1$9 = ExpandMore["default"] = void 0;
+var React$9 = _interopRequireWildcard$9(require$$2);
+var _createSvgIcon$9 = _interopRequireDefault$9(requireCreateSvgIcon());
+var _default$9 = (0, _createSvgIcon$9["default"])(/*#__PURE__*/ React$9.createElement("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }), 'ExpandMore');
+default_1$9 = ExpandMore["default"] = _default$9;
 var RemoveRounded = {};
-var _interopRequireDefault$2 = interopRequireDefaultExports;
-var _interopRequireWildcard$2 = interopRequireWildcardExports;
+var _interopRequireDefault$8 = interopRequireDefaultExports;
+var _interopRequireWildcard$8 = interopRequireWildcardExports;
 Object.defineProperty(RemoveRounded, "__esModule", { value: true });
-var default_1$2 = RemoveRounded["default"] = void 0;
-var React$2 = _interopRequireWildcard$2(require$$2);
-var _createSvgIcon$2 = _interopRequireDefault$2(requireCreateSvgIcon());
-var _default$2 = (0, _createSvgIcon$2["default"])(/*#__PURE__*/ React$2.createElement("path", { d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z" }), 'RemoveRounded');
-default_1$2 = RemoveRounded["default"] = _default$2;
+var default_1$8 = RemoveRounded["default"] = void 0;
+var React$8 = _interopRequireWildcard$8(require$$2);
+var _createSvgIcon$8 = _interopRequireDefault$8(requireCreateSvgIcon());
+var _default$8 = (0, _createSvgIcon$8["default"])(/*#__PURE__*/ React$8.createElement("path", { d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z" }), 'RemoveRounded');
+default_1$8 = RemoveRounded["default"] = _default$8;
 var MULTISELECT_VALUE = 'all_values';
-var makeSelectStyles = makeStylesFactory(function (theme) { return { checkIcon: {}, menuPaper: { marginTop: theme.spacing(0.5), maxHeight: 280, maxWidth: DEFAULT_GRID_COLUMN_WIDTH }, readOnlyContainer: { display: '-webkit-box', '-webkit-line-clamp': 2, '-webkit-box-orient': 'vertical', overflow: 'hidden' }, select: { '& .MuiInputBase-root': { padding: 0 }, '& .MuiInputBase-input': { padding: theme.spacing(1, 3, 1, 1) }, '& .MuiSelect-icon': { fontSize: 20, marginRight: theme.spacing(0.5), marginTop: theme.spacing(0.25) }, '& .MuiSelect-select': { '&:focus': { backgroundColor: 'transparent' } }, '&:hover': {}, border: '1px solid', borderRadius: 4 }, selectContainer: _defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('sm'), { width: '100%', minWidth: 'unset', flex: 1 }), "width", DEFAULT_GRID_COLUMN_WIDTH), "minWidth", DEFAULT_GRID_COLUMN_WIDTH), selectContainerOpen: {}, disabled: {}, fullWidth: { width: '100%' } }; });
-var SelectCore = function SelectCore(_ref32) { var caption = _ref32.caption, disabled = _ref32.disabled, fullWidth = _ref32.fullWidth, id = _ref32.id, label = _ref32.label, menuAnchorHorizontal = _ref32.menuAnchorHorizontal, selectItems = _ref32.selectItems, multiple = _ref32.multiple, onChange = _ref32.onChange, placeholder = _ref32.placeholder, readOnly = _ref32.readOnly, required = _ref32.required, value = _ref32.value, classes = _ref32.classes, Label = _ref32.LabelComponent, MenuItem = _ref32.MenuItemComponent, Typography = _ref32.TypographyComponent; var _a; var selectId = useShortId(id); var _h19 = h$4(false), _h20 = _slicedToArray2(_h19, 2), isOpen = _h20[0], setIsOpen = _h20[1]; var totalOptions = selectItems.filter(function (item) { return !item.disabled; }).length; var isMultiSelect = multiple && Array.isArray(value); var hasMoreThanOneChild = totalOptions > 1; var MultiSelectIcon; var canSelectAll; if (isMultiSelect && hasMoreThanOneChild) {
+var makeSelectStyles = makeStylesFactory(function (theme) { return { checkIcon: {}, menuPaper: { marginTop: theme.spacing(0.5), maxHeight: 280, maxWidth: DEFAULT_GRID_COLUMN_WIDTH }, readOnlyContainer: { display: '-webkit-box', '-webkit-line-clamp': 2, '-webkit-box-orient': 'vertical', overflow: 'hidden' }, select: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiInputBase-root"), { padding: 0 }), "& .".concat(classNamePrefix, "MuiInputBase-input"), { padding: theme.spacing(1, 3, 1, 1) }), "& .".concat(classNamePrefix, "MuiSelect-icon"), { fontSize: 20, marginRight: theme.spacing(0.5), marginTop: theme.spacing(0.25) }), "& .".concat(classNamePrefix, "MuiSelect-select"), { '&:focus': { backgroundColor: 'transparent' } }), '&:hover', {}), "border", '1px solid'), "borderRadius", 4), selectContainer: _defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('sm'), { width: '100%', minWidth: 'unset', flex: 1 }), "width", DEFAULT_GRID_COLUMN_WIDTH), "minWidth", DEFAULT_GRID_COLUMN_WIDTH), selectContainerOpen: {}, disabled: {}, fullWidth: { width: '100%' } }; });
+var SelectCore = function SelectCore(_ref33) { var caption = _ref33.caption, disabled = _ref33.disabled, fullWidth = _ref33.fullWidth, id = _ref33.id, label = _ref33.label, menuAnchorHorizontal = _ref33.menuAnchorHorizontal, selectItems = _ref33.selectItems, multiple = _ref33.multiple, onChange = _ref33.onChange, placeholder = _ref33.placeholder, readOnly = _ref33.readOnly, required = _ref33.required, value = _ref33.value, classes = _ref33.classes, Label = _ref33.LabelComponent, MenuItem = _ref33.MenuItemComponent, Typography = _ref33.TypographyComponent; var _a; var selectId = useShortId(id); var _h19 = h$4(false), _h20 = _slicedToArray2(_h19, 2), isOpen = _h20[0], setIsOpen = _h20[1]; var totalOptions = selectItems.filter(function (item) { return !item.disabled; }).length; var isMultiSelect = multiple && Array.isArray(value); var hasMoreThanOneChild = totalOptions > 1; var MultiSelectIcon; var canSelectAll; if (isMultiSelect && hasMoreThanOneChild) {
     if (value.length > 0) {
-        MultiSelectIcon = default_1$2;
+        MultiSelectIcon = default_1$8;
         canSelectAll = false;
     }
     else {
-        MultiSelectIcon = default_1$4;
+        MultiSelectIcon = default_1$a;
         canSelectAll = true;
     }
 } var handleChange = function handleChange(event) { if (Array.isArray(event.target.value) && event.target.value.includes(MULTISELECT_VALUE)) {
@@ -8984,22 +9053,22 @@ var SelectCore = function SelectCore(_ref32) { var caption = _ref32.caption, dis
 } if (Array.isArray(value)) {
     var valueSet = new Set(value);
     return selectItems.filter(function (item) { return valueSet.has(item.value); }).map(function (item) { return item.label; }).join(', ');
-} return (_a = selectItems.find(function (item) { return item.value === value; })) === null || _a === void 0 ? void 0 : _a.label; }; var renderValue = function renderValue(val) { var renderText = getRenderValue(val); if (!renderText) {
+} return (_a = selectItems.find(function (item) { return item.value === value; })) === null || _a === void 0 ? void 0 : _a.label; }; var _renderValue = function renderValue(val) { var renderText = getRenderValue(val); if (!renderText) {
     return placeholder || 'Select option...';
 }
 else if (Array.isArray(val) && val.length === totalOptions && hasMoreThanOneChild) {
     return 'All';
-} return renderText; }; var shouldDisable = disabled && !readOnly; return /*#__PURE__*/ wn.createElement("div", { className: C(classes.selectContainer, _defineProperty2(_defineProperty2(_defineProperty2({}, classes.selectContainerOpen, isOpen), classes.readOnlyContainer, readOnly), classes.fullWidth, fullWidth)) }, label && ( /*#__PURE__*/wn.createElement(Label, { disabled: shouldDisable, htmlFor: selectId, required: required }, label)), readOnly && /*#__PURE__*/ wn.createElement(Typography, null, (_a = getRenderValue(value)) !== null && _a !== void 0 ? _a : 'None selected'), !readOnly && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(MuiSelect, { IconComponent: default_1$3, MenuProps: { anchorOrigin: { horizontal: menuAnchorHorizontal !== null && menuAnchorHorizontal !== void 0 ? menuAnchorHorizontal : 'center', vertical: 'bottom' }, getContentAnchorEl: null, transformOrigin: { horizontal: 'center', vertical: 'top' }, PopoverClasses: { paper: classes.menuPaper } }, className: C(classes.select, _defineProperty2({}, classes.disabled, disabled)), disableUnderline: true, disabled: shouldDisable, displayEmpty: true, fullWidth: true, id: selectId, multiple: multiple, onChange: handleChange, onClose: function onClose() { return setIsOpen(false); }, onOpen: function onOpen() { return setIsOpen(true); }, renderValue: renderValue, value: value !== null && value !== void 0 ? value : '' }, isMultiSelect && hasMoreThanOneChild && ( /*#__PURE__*/wn.createElement(MenuItem, { Icon: MultiSelectIcon ? /*#__PURE__*/ wn.createElement(MultiSelectIcon, { className: classes.checkIcon, fontSize: "small" }) : /*#__PURE__*/ wn.createElement("div", null), forceSelected: !!MultiSelectIcon, label: canSelectAll ? 'Select all' : 'Unselect', onClick: canSelectAll ? selectAll : deselectAll, value: MULTISELECT_VALUE })), selectItems.map(function (menuItem) { return /*#__PURE__*/ wn.createElement(MenuItem, Object.assign({ Icon: /*#__PURE__*/ wn.createElement(default_1$5, { className: classes.checkIcon, fontSize: "small" }), key: menuItem.value }, menuItem)); })), caption && ( /*#__PURE__*/wn.createElement(Typography, { disabled: shouldDisable, variant: "body2" }, caption))))); };
-var useStyles$c = makeStyles(function (theme) { return { container: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, icon: { '& .MuiSvgIcon-root': { marginTop: theme.spacing(0.5) }, display: 'flex', marginRight: theme.spacing(1), visibility: 'hidden' }, iconVisible: { visibility: 'visible' }, text: { display: 'flex', flexDirection: 'column', textWrap: 'wrap' }, menuItem: { display: 'flex', alignItems: 'flex-start', padding: theme.spacing(1), flex: 1 }, premiumButton: { marginRight: theme.spacing(1) } }; });
-var MenuItemCore = function MenuItemCore(_ref33) { var Icon = _ref33.Icon, disabled = _ref33.disabled, footer = _ref33.footer, forceSelected = _ref33.forceSelected, label = _ref33.label, onClick = _ref33.onClick, selected = _ref33.selected, subtext = _ref33.subtext, Typography = _ref33.TypographyComponent; var classes = useStyles$c(); return /*#__PURE__*/ wn.createElement("div", { className: classes.container }, /*#__PURE__*/ wn.createElement(MenuItem$2, { button: !!onClick || undefined, className: classes.menuItem, "data-value": label, disableRipple: true, disabled: disabled, onClick: onClick }, Icon && /*#__PURE__*/ wn.createElement("div", { className: C(classes.icon, _defineProperty2({}, classes.iconVisible, selected || forceSelected)) }, Icon), /*#__PURE__*/ wn.createElement("div", { className: classes.text }, /*#__PURE__*/ wn.createElement(Typography, null, label), /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, subtext))), footer); };
+} return renderText; }; var shouldDisable = disabled && !readOnly; return /*#__PURE__*/ wn.createElement("div", { className: C(classes.selectContainer, _defineProperty2(_defineProperty2(_defineProperty2({}, classes.selectContainerOpen, isOpen), classes.readOnlyContainer, readOnly), classes.fullWidth, fullWidth)) }, label && ( /*#__PURE__*/wn.createElement(Label, { variant: "caption", disabled: shouldDisable, htmlFor: selectId, required: required }, label)), readOnly && /*#__PURE__*/ wn.createElement(Typography, null, (_a = getRenderValue(value)) !== null && _a !== void 0 ? _a : 'None selected'), !readOnly && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(MuiSelect, { IconComponent: default_1$9, MenuProps: { anchorOrigin: { horizontal: menuAnchorHorizontal !== null && menuAnchorHorizontal !== void 0 ? menuAnchorHorizontal : 'center', vertical: 'bottom' }, getContentAnchorEl: null, transformOrigin: { horizontal: 'center', vertical: 'top' }, PopoverClasses: { paper: classes.menuPaper } }, className: C(classes.select, _defineProperty2({}, classes.disabled, disabled)), disableUnderline: true, disabled: shouldDisable, displayEmpty: true, fullWidth: true, id: selectId, multiple: multiple, onChange: handleChange, onClose: function onClose() { return setIsOpen(false); }, onOpen: function onOpen() { return setIsOpen(true); }, renderValue: function renderValue(value) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, _renderValue(value)); }, value: value !== null && value !== void 0 ? value : '' }, isMultiSelect && hasMoreThanOneChild && ( /*#__PURE__*/wn.createElement(MenuItem, { Icon: MultiSelectIcon ? /*#__PURE__*/ wn.createElement(MultiSelectIcon, { className: classes.checkIcon, fontSize: "small" }) : /*#__PURE__*/ wn.createElement("div", null), forceSelected: !!MultiSelectIcon, label: canSelectAll ? 'Select all' : 'Unselect', onClick: canSelectAll ? selectAll : deselectAll, value: MULTISELECT_VALUE })), selectItems.map(function (menuItem) { return /*#__PURE__*/ wn.createElement(MenuItem, Object.assign({ Icon: /*#__PURE__*/ wn.createElement(default_1$b, { className: classes.checkIcon, fontSize: "small" }), key: menuItem.value }, menuItem)); })), caption && ( /*#__PURE__*/wn.createElement(Typography, { variant: "caption", disabled: shouldDisable }, caption))))); };
+var useStyles$d = makeStyles(function (theme) { return { container: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, icon: { display: 'flex', marginRight: theme.spacing(1), visibility: 'hidden' }, iconVisible: { visibility: 'visible' }, text: { display: 'flex', flexDirection: 'column', textWrap: 'wrap' }, menuItem: { display: 'flex', alignItems: 'flex-start', padding: theme.spacing(1), flex: 1 }, premiumButton: { marginRight: theme.spacing(1) } }; });
+var MenuItemCore = function MenuItemCore(_ref34) { var Icon = _ref34.Icon, disabled = _ref34.disabled, footer = _ref34.footer, forceSelected = _ref34.forceSelected, label = _ref34.label, onClick = _ref34.onClick, selected = _ref34.selected, subtext = _ref34.subtext, Typography = _ref34.TypographyComponent; var classes = useStyles$d(); return /*#__PURE__*/ wn.createElement("div", { className: classes.container }, /*#__PURE__*/ wn.createElement(MenuItem$2, { button: !!onClick || undefined, className: classes.menuItem, "data-value": label, disableRipple: true, disabled: disabled, onClick: onClick }, Icon && /*#__PURE__*/ wn.createElement("div", { className: C(classes.icon, _defineProperty2({}, classes.iconVisible, selected || forceSelected)) }, Icon), /*#__PURE__*/ wn.createElement("div", { className: classes.text }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, label), /*#__PURE__*/ wn.createElement(Typography, { variant: "caption" }, subtext))), footer); };
 var MenuItem = function MenuItem(props) { return /*#__PURE__*/ wn.createElement(MenuItemCore, Object.assign({}, props, { TypographyComponent: Typography })); };
-var useStyles$b = makeSelectStyles(function (theme) { return { checkIcon: { color: theme.styleConfig.colors.primary }, menuPaper: { backgroundColor: theme.styleConfig.container.backgroundColor, color: theme.styleConfig.colors.primary }, select: { color: theme.styleConfig.colors.primary, '& .MuiSelect-icon': { color: theme.styleConfig.colors.primary }, borderColor: theme.styleConfig.inputs.borderColor }, selectContainer: { width: function width(props) { return props === null || props === void 0 ? void 0 : props.width; } } }; });
-var Select = function Select(props) { var classes = useStyles$b(props); return /*#__PURE__*/ wn.createElement(SelectCore, Object.assign({}, props, { LabelComponent: Label, MenuItemComponent: MenuItem, TypographyComponent: Typography, classes: classes })); };
-var useStyles$a = makeStyles(function (theme) { return { settingsContainer: { border: '1px solid', borderColor: theme.styleConfig.colors.subtle, borderRadius: theme.styleConfig.borderRadius, backgroundColor: theme.styleConfig.container.backgroundColor }, titleContainer: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('xs'), { flexDirection: 'column', alignItems: 'flex-start', gap: theme.spacing(1) }), "padding", theme.spacing(1.5, 2)), "borderBottom", '1px solid'), "borderBottomColor", theme.styleConfig.colors.subtle), "display", 'flex'), "justifyContent", 'space-between'), "alignItems", 'center'), content: { padding: theme.spacing(2) }, actions: { display: 'flex', gap: theme.spacing(1), alignItems: 'center' } }; });
+var useStyles$c = makeSelectStyles(function (theme) { return { checkIcon: { color: theme.styleConfig.colors.primary }, menuPaper: { backgroundColor: theme.styleConfig.container.backgroundColor, color: theme.styleConfig.colors.primary }, select: _defineProperty2(_defineProperty2({ color: theme.styleConfig.colors.primary }, "& .".concat(classNamePrefix, "MuiSelect-icon"), { color: theme.styleConfig.colors.primary }), "borderColor", theme.styleConfig.inputs.borderColor), selectContainer: { width: function width(props) { return props === null || props === void 0 ? void 0 : props.width; } } }; });
+var Select = function Select(props) { var classes = useStyles$c(props); return /*#__PURE__*/ wn.createElement(SelectCore, Object.assign({}, props, { LabelComponent: Label, MenuItemComponent: MenuItem, TypographyComponent: Typography, classes: classes })); };
+var useStyles$b = makeStyles(function (theme) { return { settingsContainer: { border: '1px solid', borderColor: theme.styleConfig.colors.subtle, borderRadius: theme.styleConfig.borderRadius, backgroundColor: theme.styleConfig.container.backgroundColor }, titleContainer: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, theme.breakpoints.down('xs'), { flexDirection: 'column', alignItems: 'flex-start', gap: theme.spacing(1) }), "padding", theme.spacing(1.5, 2)), "borderBottom", '1px solid'), "borderBottomColor", theme.styleConfig.colors.subtle), "display", 'flex'), "justifyContent", 'space-between'), "alignItems", 'center'), content: { padding: theme.spacing(2) }, actions: { display: 'flex', gap: theme.spacing(1), alignItems: 'center' } }; });
 var DEFAULT_STATE = { editing: false, setEditing: noop };
 var SettingsContext = /*#__PURE__*/ F$4(DEFAULT_STATE);
 var useSettingsContainer = function useSettingsContainer() { return q$5(SettingsContext); };
-var SettingsContainer = function SettingsContainer(_ref34) { var _ref34$canEdit = _ref34.canEdit, canEdit = _ref34$canEdit === void 0 ? true : _ref34$canEdit, disableSave = _ref34.disableSave, children = _ref34.children, hasCTA = _ref34.hasCTA, onCancel = _ref34.onCancel, onSave = _ref34.onSave, title = _ref34.title, customCTA = _ref34.customCTA, creating = _ref34.creating, externalEditing = _ref34.editing, externalSetEditing = _ref34.setEditing, modalDescription = _ref34.modalDescription, useBlockNavigation = _ref34.useBlockNavigation; var classes = useStyles$a(); var _h21 = h$4(creating !== null && creating !== void 0 ? creating : false), _h22 = _slicedToArray2(_h21, 2), internalEditing = _h22[0], internalSetEditing = _h22[1]; var _h23 = h$4(false), _h24 = _slicedToArray2(_h23, 2), isSaving = _h24[0], setIsSaving = _h24[1]; var _useToast3 = useToast(), openToast = _useToast3.openToast, closeToast = _useToast3.closeToast; var shouldUseExternalEditing = externalEditing !== undefined && !!externalSetEditing; var editing = shouldUseExternalEditing ? externalEditing : internalEditing; var setEditing = shouldUseExternalEditing ? externalSetEditing : internalSetEditing; var _useBlockNavigation = useBlockNavigation(editing && !isSaving), allowNavigation = _useBlockNavigation.allowNavigation, blocked = _useBlockNavigation.blocked, cancelNavigation = _useBlockNavigation.cancelNavigation; var edit = function edit() { setEditing(true); }; var cancel = function cancel() { onCancel === null || onCancel === void 0 ? void 0 : onCancel(); closeToast(); setEditing(false); }; var save = function save() { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee6() { var message; return _regeneratorRuntime().wrap(function _callee6$(_context6) { while (1)
+var SettingsContainer = function SettingsContainer(_ref35) { var _ref35$canEdit = _ref35.canEdit, canEdit = _ref35$canEdit === void 0 ? true : _ref35$canEdit, disableSave = _ref35.disableSave, children = _ref35.children, hasCTA = _ref35.hasCTA, onCancel = _ref35.onCancel, onSave = _ref35.onSave, title = _ref35.title, customCTA = _ref35.customCTA, creating = _ref35.creating, externalEditing = _ref35.editing, externalSetEditing = _ref35.setEditing, modalDescription = _ref35.modalDescription, useBlockNavigation = _ref35.useBlockNavigation; var classes = useStyles$b(); var _h21 = h$4(creating !== null && creating !== void 0 ? creating : false), _h22 = _slicedToArray2(_h21, 2), internalEditing = _h22[0], internalSetEditing = _h22[1]; var _h23 = h$4(false), _h24 = _slicedToArray2(_h23, 2), isSaving = _h24[0], setIsSaving = _h24[1]; var _useToast3 = useToast(), openToast = _useToast3.openToast, closeToast = _useToast3.closeToast; var shouldUseExternalEditing = externalEditing !== undefined && !!externalSetEditing; var editing = shouldUseExternalEditing ? externalEditing : internalEditing; var setEditing = shouldUseExternalEditing ? externalSetEditing : internalSetEditing; var _useBlockNavigation = useBlockNavigation(editing && !isSaving), allowNavigation = _useBlockNavigation.allowNavigation, blocked = _useBlockNavigation.blocked, cancelNavigation = _useBlockNavigation.cancelNavigation; var edit = function edit() { setEditing(true); }; var cancel = function cancel() { onCancel === null || onCancel === void 0 ? void 0 : onCancel(); closeToast(); setEditing(false); }; var save = function save() { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee6() { var message; return _regeneratorRuntime().wrap(function _callee6$(_context6) { while (1)
     switch (_context6.prev = _context6.next) {
         case 0:
             setIsSaving(true);
@@ -9026,20 +9095,20 @@ var SettingsContainer = function SettingsContainer(_ref34) { var _ref34$canEdit
     } }, _callee6, null, [[1, 7, 11, 14]]); })); }; var modalState = useModalState(save); if (!modalDescription) {
     modalDescription = 'Double check before saving your changes.';
 } return /*#__PURE__*/ wn.createElement(SettingsContext.Provider, { value: { editing: editing, setEditing: setEditing } }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, modalState, { confirmButtonText: "Save changes", description: modalDescription, title: "Save changes?", warning: true })), /*#__PURE__*/ wn.createElement(Modal, { isOpen: blocked, close: cancelNavigation, confirm: function confirm() { allowNavigation(); return Promise.resolve(); }, confirmButtonText: "Navigate without saving", cancelButtonText: "Keep editing", description: 'Your changes are unsaved – are you sure you want to navigate away?', title: "Save changes?", warning: true }), /*#__PURE__*/ wn.createElement("div", { className: classes.settingsContainer }, /*#__PURE__*/ wn.createElement("div", { className: classes.titleContainer }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h3" }, title), /*#__PURE__*/ wn.createElement("div", { className: classes.actions }, hasCTA && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, editing ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Button, { compact: true, onClick: cancel, variant: "ghost" }, "Cancel"), /*#__PURE__*/ wn.createElement(Button, { compact: true, disabled: disableSave, onClick: modalState.open }, "Save"))) : ( /*#__PURE__*/wn.createElement(wn.Fragment, null, customCTA ? customCTA : canEdit && ( /*#__PURE__*/wn.createElement(Button, { compact: true, onClick: edit, variant: "ghost" }, "Edit")))))))), /*#__PURE__*/ wn.createElement("div", { className: classes.content }, children))); };
-var SettingsList = function SettingsList(_ref35) { var children = _ref35.children; return /*#__PURE__*/ wn.createElement("dl", { style: { margin: 0 } }, children); };
-var SettingsListItem = function SettingsListItem(_ref36) { var children = _ref36.children, title = _ref36.title; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Typography, { component: "dt" }, title), /*#__PURE__*/ wn.createElement("dd", { style: { margin: '0 0 8px' } }, children)); };
-var makeInfoIconStyles = makeStylesFactory(function () { return { infoIconContainer: { width: 'fit-content' } }; });
-var InfoIconCore = function InfoIconCore(_ref37) { var tooltipText = _ref37.tooltipText, classes = _ref37.classes, Tooltip = _ref37.TooltipComponent; return /*#__PURE__*/ wn.createElement("div", { className: classes.infoIconContainer }, /*#__PURE__*/ wn.createElement(Tooltip, { text: tooltipText }, /*#__PURE__*/ wn.createElement(InfoOutlined, null))); };
-var makeTooltipStyles = makeStylesFactory(function (theme) { return { targetWrapper: { display: 'flex', width: 'fit-content' }, tooltip: { '& .MuiTooltip-tooltip': { maxWidth: 240, padding: theme.spacing(1), borderRadius: 4 }, '& .MuiTooltip-tooltipPlacementRight': { margin: theme.spacing(0, 1) }, '& .MuiTooltip-tooltipPlacementLeft': { margin: theme.spacing(0, 1) }, zIndex: 2000 } }; });
-var TooltipCore = function TooltipCore(_ref38) { var text = _ref38.text, children = _ref38.children, disabled = _ref38.disabled, _ref38$placement = _ref38.placement, placement = _ref38$placement === void 0 ? 'right' : _ref38$placement, classes = _ref38.classes, Typography = _ref38.TypographyComponent; if (disabled) {
+var SettingsList = function SettingsList(_ref36) { var children = _ref36.children; return /*#__PURE__*/ wn.createElement("dl", { style: { margin: 0 } }, children); };
+var SettingsListItem = function SettingsListItem(_ref37) { var children = _ref37.children, title = _ref37.title; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2", color: "secondary", component: "dt" }, title), /*#__PURE__*/ wn.createElement("dd", { style: { margin: '0 0 8px' } }, children)); };
+var makeInfoIconStyles = makeStylesFactory(function () { return { infoIconContainer: { width: 'fit-content' }, infoIcon: {} }; });
+var InfoIconCore = function InfoIconCore(_ref38) { var tooltipText = _ref38.tooltipText, classes = _ref38.classes, Tooltip = _ref38.TooltipComponent; return /*#__PURE__*/ wn.createElement("div", { className: classes.infoIconContainer }, /*#__PURE__*/ wn.createElement(Tooltip, { text: tooltipText }, /*#__PURE__*/ wn.createElement(InfoOutlined, { className: classes.infoIcon }))); };
+var makeTooltipStyles = makeStylesFactory(function (theme) { return { targetWrapper: { display: 'flex', width: 'fit-content' }, tooltip: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiTooltip-tooltip"), { maxWidth: 240, padding: theme.spacing(1), borderRadius: 4 }), "& .".concat(classNamePrefix, "MuiTooltip-tooltipPlacementRight"), { margin: theme.spacing(0, 1) }), "& .".concat(classNamePrefix, "MuiTooltip-tooltipPlacementLeft"), { margin: theme.spacing(0, 1) }), "zIndex", 2000) }; });
+var TooltipCore = function TooltipCore(_ref39) { var text = _ref39.text, children = _ref39.children, disabled = _ref39.disabled, _ref39$placement = _ref39.placement, placement = _ref39$placement === void 0 ? 'right' : _ref39$placement, classes = _ref39.classes, Typography = _ref39.TypographyComponent; if (disabled) {
     return children;
 } return /*#__PURE__*/ wn.createElement(Tooltip$2, { PopperProps: { className: classes.tooltip }, interactive: true, placement: placement, title: /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, text) }, /*#__PURE__*/ wn.createElement("span", { className: classes.targetWrapper }, children)); };
-var useStyles$9 = makeTooltipStyles(function (theme) { return { tooltip: { '& .MuiTooltip-tooltip': { '& p': { color: theme.styleConfig.buttons.primary.textColor }, backgroundColor: theme.styleConfig.buttons.primary.backgroundColor } } }; });
-var Tooltip = function Tooltip(props) { var classes = useStyles$9(); return /*#__PURE__*/ wn.createElement(TooltipCore, Object.assign({}, props, { TypographyComponent: Typography, classes: classes })); };
-var useStyles$8 = makeInfoIconStyles(function (theme) { return { infoIconContainer: { color: theme.styleConfig.colors.primary } }; });
-var InfoIcon = function InfoIcon(props) { var classes = useStyles$8(); return /*#__PURE__*/ wn.createElement(InfoIconCore, Object.assign({}, props, { classes: classes, TooltipComponent: Tooltip })); };
-var SettingsSection = function SettingsSection(_ref39) { var children = _ref39.children, title = _ref39.title, tooltipText = _ref39.tooltipText; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 0.5 }, /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", flexDirection: "row", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h4" }, title), tooltipText && /*#__PURE__*/ wn.createElement(InfoIcon, { tooltipText: tooltipText })), children); };
-var useFormState = function useFormState(_ref40) { var remoteState = _ref40.remoteState; var _h25 = h$4(remoteState), _h26 = _slicedToArray2(_h25, 2), localState = _h26[0], setLocalState = _h26[1]; var resetLocalState = T$2(function () { setLocalState(remoteState); }, [remoteState]); var _h27 = h$4(false), _h28 = _slicedToArray2(_h27, 2), editing = _h28[0], setEditing = _h28[1]; var handleSetEditing = T$2(function (newEditing) { if (newEditing) {
+var useStyles$a = makeTooltipStyles(function (theme) { return { tooltip: _defineProperty2({}, "& .".concat(classNamePrefix, "MuiTooltip-tooltip"), { '& p': { color: theme.styleConfig.buttons.primary.textColor }, backgroundColor: theme.styleConfig.buttons.primary.backgroundColor }) }; });
+var Tooltip = function Tooltip(props) { var classes = useStyles$a(); return /*#__PURE__*/ wn.createElement(TooltipCore, Object.assign({}, props, { TypographyComponent: Typography, classes: classes })); };
+var useStyles$9 = makeInfoIconStyles(function (theme) { return { infoIconContainer: { color: theme.styleConfig.colors.primary }, infoIcon: { width: 18, height: 18 } }; });
+var InfoIcon = function InfoIcon(props) { var classes = useStyles$9(); return /*#__PURE__*/ wn.createElement(InfoIconCore, Object.assign({}, props, { classes: classes, TooltipComponent: Tooltip })); };
+var SettingsSection = function SettingsSection(_ref40) { var children = _ref40.children, title = _ref40.title, tooltipText = _ref40.tooltipText; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 0.5 }, /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", flexDirection: "row", gap: 0.5 }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h4" }, title), tooltipText && /*#__PURE__*/ wn.createElement(InfoIcon, { tooltipText: tooltipText })), children); };
+var useFormState = function useFormState(_ref41) { var remoteState = _ref41.remoteState; var _h25 = h$4(remoteState), _h26 = _slicedToArray2(_h25, 2), localState = _h26[0], setLocalState = _h26[1]; var resetLocalState = T$2(function () { setLocalState(remoteState); }, [remoteState]); var _h27 = h$4(false), _h28 = _slicedToArray2(_h27, 2), editing = _h28[0], setEditing = _h28[1]; var handleSetEditing = T$2(function (newEditing) { if (newEditing) {
     resetLocalState();
 } setEditing(newEditing); }, [resetLocalState]); return { localState: localState, setLocalState: setLocalState, editing: editing, handleSetEditing: handleSetEditing }; };
 var useStateSliceSetter = function useStateSliceSetter(setState, key) { return T$2(function (value) { setState(function (state) { return Object.assign(Object.assign({}, state), _defineProperty2({}, key, value)); }); }, [key, setState]); };
@@ -9054,13 +9123,13 @@ else {
     return { idp: oidcIdpMap[_idpKey], type: type };
 } };
 var getIdpAndConnectionInfo = function getIdpAndConnectionInfo(connection) { return Object.assign(Object.assign({}, getIdpInfo(connection.identity_provider, connection.connectionType)), { connection: connection }); };
-var AppDetails = function AppDetails(_ref41) { var connectionProp = _ref41.connection; var _getIdpAndConnectionI = getIdpAndConnectionInfo(connectionProp), connection = _getIdpAndConnectionI.connection, idp = _getIdpAndConnectionI.idp, type = _getIdpAndConnectionI.type; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, type === 'saml' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.acsUrlLabel }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.acs_url)), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.audienceUriLabel }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.audience_uri)))), type === 'oidc' && ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.redirectUrlLabel }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.redirect_url))), type === 'saml' && ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.nameIdFormatLabel }, /*#__PURE__*/ wn.createElement(Typography, { color: "secondary" }, idp.nameIdFormatValue)))); };
+var AppDetails = function AppDetails(_ref42) { var connectionProp = _ref42.connection; var _getIdpAndConnectionI = getIdpAndConnectionInfo(connectionProp), connection = _getIdpAndConnectionI.connection, idp = _getIdpAndConnectionI.idp, type = _getIdpAndConnectionI.type; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, type === 'saml' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.acsUrlLabel }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.acs_url)), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.audienceUriLabel }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.audience_uri)))), type === 'oidc' && ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.redirectUrlLabel }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.redirect_url))), type === 'saml' && ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.nameIdFormatLabel }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, idp.nameIdFormatValue)))); };
 var collator = Intl.Collator();
 var nameKeys = new Set(['full_name', 'first_name', 'last_name']);
 var requiredKeys = new Set([].concat(_toConsumableArray2(nameKeys), ['email']));
-var attributeMappingItemRenderer = [{ title: 'Key', getValue: function getValue(_ref42) { var key = _ref42.key; var isRequiredKey = requiredKeys.has(key); var label = key; return /*#__PURE__*/ wn.createElement(Typography, { color: "secondary" }, label, isRequiredKey && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, ' ', /*#__PURE__*/ wn.createElement(Typography, { component: "span", color: "error" }, "*")))); } }, { title: 'Value', getValue: function getValue(_ref43) { var value = _ref43.value; return /*#__PURE__*/ wn.createElement(Typography, { color: "secondary" }, value); } }];
-var attributeMappingKeyExtractor = function attributeMappingKeyExtractor(_ref44) { var key = _ref44.key; return key; };
-var AttributeMappingTable = function AttributeMappingTable(_ref45) { var editing = _ref45.editing, localState = _ref45.localState, remoteState = _ref45.remoteState, setLocalState = _ref45.setLocalState; var _ref46 = editing ? localState : remoteState, attributeMapping = _ref46.attributeMapping; var attributeMappingItems = F$3(function () { return Object.entries(attributeMapping).map(function (_ref47) { var _ref48 = _slicedToArray2(_ref47, 2), key = _ref48[0], value = _ref48[1]; return { key: key, value: value }; }).sort(function (a, b) { return collator.compare(a.key, b.key); }); }, [attributeMapping]); var _h29 = h$4([['', '']]), _h30 = _slicedToArray2(_h29, 2), pendingAttributeMapping = _h30[0], setPendingAttributeMapping = _h30[1]; var _h31 = h$4('key'), _h32 = _slicedToArray2(_h31, 2), editMode = _h32[0], setEditMode = _h32[1]; var _h33 = h$4(''), _h34 = _slicedToArray2(_h33, 2), editedAttributeMappingKey = _h34[0], setEditedAttributeMappingKey = _h34[1]; var _h35 = h$4(''), _h36 = _slicedToArray2(_h35, 2), editedAttributeMappingValue = _h36[0], setEditedAttributeMappingValue = _h36[1]; var _h37 = h$4(''), _h38 = _slicedToArray2(_h37, 2), editedAttributeMappingLastNameValue = _h38[0], setEditedAttributeMappingLastNameValue = _h38[1]; var editAttributeMappingModalProps = useModalState(function () { var editedMapping = editMode === 'name' && editedAttributeMappingKey === 'first_name' ? { first_name: editedAttributeMappingValue, last_name: editedAttributeMappingLastNameValue } : _defineProperty2({}, editedAttributeMappingKey, editedAttributeMappingValue); setLocalState(function (state) { var mergedMapping = Object.assign(Object.assign({}, state.attributeMapping), editedMapping); if (editMode === 'name') {
+var attributeMappingItemRenderer = [{ title: 'Key', getValue: function getValue(_ref43) { var key = _ref43.key; var isRequiredKey = requiredKeys.has(key); var label = key; return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, label, isRequiredKey && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, ' ', /*#__PURE__*/ wn.createElement(Typography, { component: "span", color: "error" }, "*")))); } }, { title: 'Value', getValue: function getValue(_ref44) { var value = _ref44.value; return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, value); } }];
+var attributeMappingKeyExtractor = function attributeMappingKeyExtractor(_ref45) { var key = _ref45.key; return key; };
+var AttributeMappingTable = function AttributeMappingTable(_ref46) { var editing = _ref46.editing, localState = _ref46.localState, remoteState = _ref46.remoteState, setLocalState = _ref46.setLocalState; var _ref47 = editing ? localState : remoteState, attributeMapping = _ref47.attributeMapping; var attributeMappingItems = F$3(function () { return Object.entries(attributeMapping).map(function (_ref48) { var _ref49 = _slicedToArray2(_ref48, 2), key = _ref49[0], value = _ref49[1]; return { key: key, value: value }; }).sort(function (a, b) { return collator.compare(a.key, b.key); }); }, [attributeMapping]); var _h29 = h$4([['', '']]), _h30 = _slicedToArray2(_h29, 2), pendingAttributeMapping = _h30[0], setPendingAttributeMapping = _h30[1]; var _h31 = h$4('key'), _h32 = _slicedToArray2(_h31, 2), editMode = _h32[0], setEditMode = _h32[1]; var _h33 = h$4(''), _h34 = _slicedToArray2(_h33, 2), editedAttributeMappingKey = _h34[0], setEditedAttributeMappingKey = _h34[1]; var _h35 = h$4(''), _h36 = _slicedToArray2(_h35, 2), editedAttributeMappingValue = _h36[0], setEditedAttributeMappingValue = _h36[1]; var _h37 = h$4(''), _h38 = _slicedToArray2(_h37, 2), editedAttributeMappingLastNameValue = _h38[0], setEditedAttributeMappingLastNameValue = _h38[1]; var editAttributeMappingModalProps = useModalState(function () { var editedMapping = editMode === 'name' && editedAttributeMappingKey === 'first_name' ? { first_name: editedAttributeMappingValue, last_name: editedAttributeMappingLastNameValue } : _defineProperty2({}, editedAttributeMappingKey, editedAttributeMappingValue); setLocalState(function (state) { var mergedMapping = Object.assign(Object.assign({}, state.attributeMapping), editedMapping); if (editMode === 'name') {
     if (editedAttributeMappingKey === 'full_name') {
         delete mergedMapping.first_name;
         delete mergedMapping.last_name;
@@ -9087,11 +9156,11 @@ else {
 else {
     setPendingDeleteAttributeMappingKey(key);
     deleteAttributeMappingModalProps.open();
-} }, [deleteAttributeMapping, deleteAttributeMappingModalProps]); return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, editAttributeMappingModalProps, { title: "Edit custom mapping", confirmButtonText: "Save" }), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, editMode === 'name' ? ( /*#__PURE__*/wn.createElement(Select, { selectItems: [{ label: 'Full Name', value: 'full_name' }, { label: 'First Name, Last Name', value: 'first_last_name' }], fullWidth: true, caption: "You can change the format of the key.", value: editedAttributeMappingKey === 'full_name' ? 'full_name' : 'first_last_name', onChange: function onChange(value) { setEditedAttributeMappingKey(value === 'full_name' ? 'full_name' : 'first_name'); } })) : ( /*#__PURE__*/wn.createElement(Input$1, { label: "Key", fullWidth: true, value: editedAttributeMappingKey, onChange: setEditedAttributeMappingKey })), editMode === 'name' && (editedAttributeMappingKey === 'first_name' || editedAttributeMappingKey === 'last_name') ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(FlexBox, { gap: 2 }, /*#__PURE__*/ wn.createElement(Input$1, { label: "First Name", fullWidth: true, value: editedAttributeMappingValue, onChange: setEditedAttributeMappingValue }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Last Name", fullWidth: true, value: editedAttributeMappingLastNameValue, onChange: setEditedAttributeMappingLastNameValue })))) : ( /*#__PURE__*/wn.createElement(Input$1, { label: "Value", fullWidth: true, value: editedAttributeMappingValue, onChange: setEditedAttributeMappingValue })))), /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, deleteAttributeMappingModalProps, { title: "Delete mapping?", confirmButtonText: "Delete", warning: true }), /*#__PURE__*/ wn.createElement(Typography, null, "Deleting the Groups attribute mapping will also disable any Group Role assignments you have added above. They will not be deleted, but you must add a Groups mapping to make edits.")), /*#__PURE__*/ wn.createElement(ListEditor, { items: attributeMappingItems, itemRenderer: attributeMappingItemRenderer, rowKeyExtractor: attributeMappingKeyExtractor, addModalProps: { confirm: function confirm() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { attributeMapping: Object.assign(Object.assign({}, state.attributeMapping), Object.fromEntries(pendingAttributeMapping.filter(function (_ref50) { var _ref51 = _slicedToArray2(_ref50, 2), key = _ref51[0], value = _ref51[1]; return key && value && !state.attributeMapping[key]; }))) }); }); return Promise.resolve(); }, title: 'Add custom mapping', content: ( /*#__PURE__*/wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, pendingAttributeMapping.map(function (_ref52, i) { var _ref53 = _slicedToArray2(_ref52, 2), key = _ref53[0], value = _ref53[1]; return /*#__PURE__*/ wn.createElement(FlexBox, { gap: 1, key: i }, /*#__PURE__*/ wn.createElement(Input$1, { label: "Key", fullWidth: true, value: key, onChange: function onChange(value) { setPendingAttributeMapping(function (state) { return state.map(function (item, index) { return index === i ? [value, item[1]] : item; }); }); } }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Value", fullWidth: true, value: value, onChange: function onChange(value) { setPendingAttributeMapping(function (state) { return state.map(function (item, index) { return index === i ? [item[0], value] : item; }); }); } })); }), /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(Add, null), fullWidth: true, onClick: function onClick() { setPendingAttributeMapping(function (state) { return [].concat(_toConsumableArray2(state), [['', '']]); }); } }, "Add custom mapping"))) }, hideAddButton: !editing, getItemActionProps: editing ? function (item) { return { action: item.key === 'email' && item.value === 'NameID' ? undefined : { text: 'Edit', onClick: function onClick() { handleEditAttributeMapping(item.key); } }, warningAction: item.key === 'email' || nameKeys.has(item.key) && !(hasFirstAndLastNameKeys && hasFullNameKey) ? undefined : { text: 'Delete', onClick: function onClick() { handleRequestDeleteAttributeMapping(item.key); } } }; } : undefined })); };
+} }, [deleteAttributeMapping, deleteAttributeMappingModalProps]); return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, editAttributeMappingModalProps, { title: "Edit custom mapping", confirmButtonText: "Save" }), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, editMode === 'name' ? ( /*#__PURE__*/wn.createElement(Select, { selectItems: [{ label: 'Full Name', value: 'full_name' }, { label: 'First Name, Last Name', value: 'first_last_name' }], fullWidth: true, caption: "You can change the format of the key.", value: editedAttributeMappingKey === 'full_name' ? 'full_name' : 'first_last_name', onChange: function onChange(value) { setEditedAttributeMappingKey(value === 'full_name' ? 'full_name' : 'first_name'); } })) : ( /*#__PURE__*/wn.createElement(Input$1, { label: "Key", fullWidth: true, value: editedAttributeMappingKey, onChange: setEditedAttributeMappingKey })), editMode === 'name' && (editedAttributeMappingKey === 'first_name' || editedAttributeMappingKey === 'last_name') ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(FlexBox, { gap: 2 }, /*#__PURE__*/ wn.createElement(Input$1, { label: "First Name", fullWidth: true, value: editedAttributeMappingValue, onChange: setEditedAttributeMappingValue }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Last Name", fullWidth: true, value: editedAttributeMappingLastNameValue, onChange: setEditedAttributeMappingLastNameValue })))) : ( /*#__PURE__*/wn.createElement(Input$1, { label: "Value", fullWidth: true, value: editedAttributeMappingValue, onChange: setEditedAttributeMappingValue })))), /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, deleteAttributeMappingModalProps, { title: "Delete mapping?", confirmButtonText: "Delete", warning: true }), /*#__PURE__*/ wn.createElement(Typography, null, "Deleting the Groups attribute mapping will also disable any Group Role assignments you have added above. They will not be deleted, but you must add a Groups mapping to make edits.")), /*#__PURE__*/ wn.createElement(ListEditor, { items: attributeMappingItems, itemRenderer: attributeMappingItemRenderer, rowKeyExtractor: attributeMappingKeyExtractor, addModalProps: { confirm: function confirm() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { attributeMapping: Object.assign(Object.assign({}, state.attributeMapping), Object.fromEntries(pendingAttributeMapping.filter(function (_ref51) { var _ref52 = _slicedToArray2(_ref51, 2), key = _ref52[0], value = _ref52[1]; return key && value && !state.attributeMapping[key]; }))) }); }); return Promise.resolve(); }, title: 'Add custom mapping', content: ( /*#__PURE__*/wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, pendingAttributeMapping.map(function (_ref53, i) { var _ref54 = _slicedToArray2(_ref53, 2), key = _ref54[0], value = _ref54[1]; return /*#__PURE__*/ wn.createElement(FlexBox, { gap: 1, key: i }, /*#__PURE__*/ wn.createElement(Input$1, { label: "Key", fullWidth: true, value: key, onChange: function onChange(value) { setPendingAttributeMapping(function (state) { return state.map(function (item, index) { return index === i ? [value, item[1]] : item; }); }); } }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Value", fullWidth: true, value: value, onChange: function onChange(value) { setPendingAttributeMapping(function (state) { return state.map(function (item, index) { return index === i ? [item[0], value] : item; }); }); } })); }), /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(Add$1, null), fullWidth: true, onClick: function onClick() { setPendingAttributeMapping(function (state) { return [].concat(_toConsumableArray2(state), [['', '']]); }); } }, "Add custom mapping"))) }, hideAddButton: !editing, getItemActionProps: editing ? function (item) { return { action: item.key === 'email' && item.value === 'NameID' ? undefined : { text: 'Edit', onClick: function onClick() { handleEditAttributeMapping(item.key); } }, warningAction: item.key === 'email' || nameKeys.has(item.key) && !(hasFirstAndLastNameKeys && hasFullNameKey) ? undefined : { text: 'Delete', onClick: function onClick() { handleRequestDeleteAttributeMapping(item.key); } } }; } : undefined })); };
 var makeSamlOption = function makeSamlOption(idpName) { return { idp: samlIdpMap[idpName], idpName: idpName, type: 'saml' }; };
 var makeOidcOption = function makeOidcOption(idpName) { return { idp: oidcIdpMap[idpName], idpName: idpName, type: 'oidc' }; };
 var idpOptions = { 'saml:google-workspace': makeSamlOption('google-workspace'), 'saml:okta': makeSamlOption('okta'), 'oidc:okta': makeOidcOption('okta'), 'saml:microsoft-entra': makeSamlOption('microsoft-entra'), 'oidc:microsoft-entra': makeOidcOption('microsoft-entra'), 'saml:generic': makeSamlOption('generic'), 'oidc:generic': makeOidcOption('generic') };
-var idpSelectItems = Object.entries(idpOptions).map(function (_ref54) { var _ref55 = _slicedToArray2(_ref54, 2), idpKey = _ref55[0], idp = _ref55[1].idp; return { label: idp.displayName, value: idpKey }; });
+var idpSelectItems = Object.entries(idpOptions).map(function (_ref55) { var _ref56 = _slicedToArray2(_ref55, 2), idpKey = _ref56[0], idp = _ref56[1].idp; return { label: idp.displayName, value: idpKey }; });
 var samlIdpSelectItems = Object.values(idpOptions).filter(function (item) { return item.type === 'saml'; }).map(function (item) { return { label: item.idp.displayName, value: item.idpName }; });
 var oidcIdpSelectItems = Object.values(idpOptions).filter(function (item) { return item.type === 'oidc'; }).map(function (item) { return { label: item.idp.displayName, value: item.idpName }; });
 var useBeforeUnloadNavigationBlock = function useBeforeUnloadNavigationBlock(shouldWarn) { p$3(function () { if (shouldWarn) {
@@ -9126,14 +9195,14 @@ var routerReducer = function routerReducer(state, action) { switch (action.type)
     case 'cancelNavigation': return Object.assign(Object.assign({}, state), { pendingRoute: undefined });
     default: return state;
 } };
-var createRouter = function createRouter() { var initialState = { blockersActive: new Set() }; var StateContext = /*#__PURE__*/ wn.createContext({}); var ControllerContext = /*#__PURE__*/ wn.createContext({ navigate: noop, useBlockNavigation: function useBlockNavigation() { return { blocked: false, allowNavigation: noop, cancelNavigation: noop }; } }); var useRouterState = function useRouterState() { return wn.useContext(StateContext); }; var useRouterController = function useRouterController() { return wn.useContext(ControllerContext); }; var Router = function Router(_ref56) { var routeMap = _ref56.routeMap; var _useRouterState = useRouterState(), currentRoute = _useRouterState.currentRoute; var ChildComponent = routeMap[currentRoute.screen]; var childComponentProps = currentRoute.params; return ChildComponent ? /*#__PURE__*/ wn.createElement(ChildComponent, Object.assign({}, childComponentProps)) : null; }; var RouterProvider = function RouterProvider(_ref57) { var children = _ref57.children, initialRoute = _ref57.initialRoute; var _wn$useReducer = wn.useReducer(routerReducer, Object.assign(Object.assign({}, initialState), { currentRoute: initialRoute })), _wn$useReducer2 = _slicedToArray2(_wn$useReducer, 2), state = _wn$useReducer2[0], dispatch = _wn$useReducer2[1]; var navigate = T$2(function (destination) { dispatch({ type: 'navigate', payload: destination }); }, []); var routerState = F$3(function () { return { currentRoute: state.currentRoute }; }, [state.currentRoute]); var isNavigationBlocked = !!state.pendingRoute; var useBlockNavigation = T$2(function (enableBlock) { var callback = F$3(function () { return typeof enableBlock === 'function' ? enableBlock : function () { return enableBlock; }; }, [enableBlock]); p$3(function () { var shouldEnableBlock = callback(); if (shouldEnableBlock) {
+var createRouter = function createRouter() { var initialState = { blockersActive: new Set() }; var StateContext = /*#__PURE__*/ wn.createContext({}); var ControllerContext = /*#__PURE__*/ wn.createContext({ navigate: noop, useBlockNavigation: function useBlockNavigation() { return { blocked: false, allowNavigation: noop, cancelNavigation: noop }; } }); var useRouterState = function useRouterState() { return wn.useContext(StateContext); }; var useRouterController = function useRouterController() { return wn.useContext(ControllerContext); }; var Router = function Router(_ref57) { var routeMap = _ref57.routeMap; var _useRouterState = useRouterState(), currentRoute = _useRouterState.currentRoute; var ChildComponent = routeMap[currentRoute.screen]; var childComponentProps = currentRoute.params; return ChildComponent ? /*#__PURE__*/ wn.createElement(ChildComponent, Object.assign({}, childComponentProps)) : null; }; var RouterProvider = function RouterProvider(_ref58) { var children = _ref58.children, initialRoute = _ref58.initialRoute; var _wn$useReducer = wn.useReducer(routerReducer, Object.assign(Object.assign({}, initialState), { currentRoute: initialRoute })), _wn$useReducer2 = _slicedToArray2(_wn$useReducer, 2), state = _wn$useReducer2[0], dispatch = _wn$useReducer2[1]; var navigate = T$2(function (destination) { dispatch({ type: 'navigate', payload: destination }); }, []); var routerState = F$3(function () { return { currentRoute: state.currentRoute }; }, [state.currentRoute]); var isNavigationBlocked = !!state.pendingRoute; var useBlockNavigation = T$2(function (enableBlock) { var callback = F$3(function () { return typeof enableBlock === 'function' ? enableBlock : function () { return enableBlock; }; }, [enableBlock]); p$3(function () { var shouldEnableBlock = callback(); if (shouldEnableBlock) {
     dispatch({ type: 'addBlocker', payload: { callback: callback } });
     return function () { dispatch({ type: 'removeBlocker', payload: { callback: callback } }); };
 } }, [callback, enableBlock]); return { blocked: isNavigationBlocked, allowNavigation: function allowNavigation() { dispatch({ type: 'approveNavigation' }); }, cancelNavigation: function cancelNavigation() { dispatch({ type: 'cancelNavigation' }); } }; }, [isNavigationBlocked]); useBeforeUnloadNavigationBlock(state.blockersActive.size > 0); var controller = F$3(function () { return { navigate: navigate, useBlockNavigation: useBlockNavigation }; }, [navigate, useBlockNavigation]); return /*#__PURE__*/ wn.createElement(ControllerContext.Provider, { value: controller }, /*#__PURE__*/ wn.createElement(StateContext.Provider, { value: routerState }, children)); }; return { RouterProvider: RouterProvider, Router: Router, useRouterController: useRouterController, useRouterState: useRouterState }; };
 var _createRouter = createRouter(), SsoRouterProvider = _createRouter.RouterProvider, SsoRouter = _createRouter.Router, useSsoRouterController = _createRouter.useRouterController;
-var certItemRenderer = [{ title: 'Issuer', getValue: function getValue(item) { return /*#__PURE__*/ wn.createElement(Typography, { color: "secondary" }, 'issuer' in item ? item.issuer : 'Pending'); } }, { title: 'Created', getValue: function getValue(item) { return /*#__PURE__*/ wn.createElement(Typography, { color: "secondary" }, 'created_at' in item ? new Date(item.created_at).toLocaleString() : 'Pending'); } }, { title: 'Expires', getValue: function getValue(item) { return /*#__PURE__*/ wn.createElement(Typography, { color: "secondary" }, 'expires_at' in item ? new Date(item.expires_at).toLocaleString() : 'Pending'); } }];
+var certItemRenderer = [{ title: 'Issuer', getValue: function getValue(item) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, 'issuer' in item ? item.issuer : 'Pending'); } }, { title: 'Created', getValue: function getValue(item) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, 'created_at' in item ? new Date(item.created_at).toLocaleString() : 'Pending'); } }, { title: 'Expires', getValue: function getValue(item) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, 'expires_at' in item ? new Date(item.expires_at).toLocaleString() : 'Pending'); } }];
 var certKeyExtractor = function certKeyExtractor(item) { return 'certificate_id' in item ? item.certificate_id : 'new-certificate-id-pending'; };
-var CertificateTable = function CertificateTable(_ref49) { var editing = _ref49.editing, localState = _ref49.localState, manualConfiguration = _ref49.manualConfiguration, remoteState = _ref49.remoteState, setLocalState = _ref49.setLocalState; var _a, _b, _c; var certificates = F$3(function () { if (!remoteState) {
+var CertificateTable = function CertificateTable(_ref50) { var editing = _ref50.editing, localState = _ref50.localState, manualConfiguration = _ref50.manualConfiguration, remoteState = _ref50.remoteState, setLocalState = _ref50.setLocalState; var _a, _b, _c; var certificates = F$3(function () { if (!remoteState) {
     return undefined;
 } var remoteCertificates = remoteState; if (!editing) {
     return remoteCertificates;
@@ -9150,8 +9219,8 @@ var CertificateTable = function CertificateTable(_ref49) { var editing = _ref49.
             else if ('certificate_id' in item) {
                 setLocalState(function (state) { var _a; return Object.assign(Object.assign({}, state), { deletedCertificateIds: [].concat(_toConsumableArray2((_a = state.deletedCertificateIds) !== null && _a !== void 0 ? _a : []), [item.certificate_id]) }); });
             } } } : undefined }; }, hideAddButton: !canAddCertificate })); };
-var DetailsSectionBody = function DetailsSectionBody(_ref58) { var taggedConnection = _ref58.connection, localState = _ref58.localState, remoteState = _ref58.remoteState, setLocalState = _ref58.setLocalState; var _a, _b; var _useSettingsContainer = useSettingsContainer(), editing = _useSettingsContainer.editing; var _ref59 = editing ? localState : remoteState, displayName = _ref59.displayName, identityProvider = _ref59.identityProvider; var handleDisplayNameChange = useStateSliceSetter(setLocalState, 'displayName'); var handleIdentityProviderChange = useStateSliceSetter(setLocalState, 'identityProvider'); var handleMetadataUrlChange = useStateSliceSetter(setLocalState, 'metadataUrl'); var handleSsoUrlChange = useStateSliceSetter(setLocalState, 'ssoUrl'); var handleEntityIdChange = useStateSliceSetter(setLocalState, 'entityId'); var handleClientIdChange = useStateSliceSetter(setLocalState, 'clientId'); var handleClientSecretChange = useStateSliceSetter(setLocalState, 'clientSecret'); var handleIssuerChange = useStateSliceSetter(setLocalState, 'issuer'); var handleIssuerDerivedValueChange = useStateSliceSetter(setLocalState, 'issuerDerivedValue'); var handleAuthorizationUrlChange = useStateSliceSetter(setLocalState, 'authorizationUrl'); var handleTokenUrlChange = useStateSliceSetter(setLocalState, 'tokenUrl'); var handleUserInfoUrlChange = useStateSliceSetter(setLocalState, 'userInfoUrl'); var handleJwksUrlChange = useStateSliceSetter(setLocalState, 'jwksUrl'); var _getIdpAndConnectionI2 = getIdpAndConnectionInfo(taggedConnection), connection = _getIdpAndConnectionI2.connection, idp = _getIdpAndConnectionI2.idp, type = _getIdpAndConnectionI2.type; var idpRequiresManualConfig = type === 'saml' && idp.metadataUrlLabel === false; var manualConfiguration = localState.manualConfiguration || idpRequiresManualConfig; var setManualConfiguration = useStateSliceSetter(setLocalState, 'manualConfiguration'); return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Display Name" }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { value: displayName, onChange: handleDisplayNameChange })) : ( /*#__PURE__*/wn.createElement(Typography, null, displayName))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "IdP" }, editing ? ( /*#__PURE__*/wn.createElement(Select, { placeholder: "Select", selectItems: type === 'saml' ? samlIdpSelectItems : oidcIdpSelectItems, value: identityProvider, onChange: handleIdentityProviderChange })) : ( /*#__PURE__*/wn.createElement(Typography, null, idp.displayName))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "App Values", tooltipText: "Copy these App (Service Provider) Values into your IdP." }, /*#__PURE__*/ wn.createElement(SettingsList, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Connection ID" }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.connection_id)), /*#__PURE__*/ wn.createElement(AppDetails, { connection: connection }))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "IdP Values" }, /*#__PURE__*/ wn.createElement(SettingsList, null, type === 'saml' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, editing && !manualConfiguration ? ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.metadataUrlLabel }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.metadataUrlLabel), value: localState.metadataUrl || '', onChange: handleMetadataUrlChange }))) : ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.idpSsoUrlLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.idpSsoUrlLabel), value: localState.ssoUrl || '', onChange: handleSsoUrlChange })) : ( /*#__PURE__*/wn.createElement(Typography, { color: "secondary" }, connection.idp_sso_url || '–'))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.idpEntityIdLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.idpEntityIdLabel), value: localState.entityId || '', onChange: handleEntityIdChange })) : ( /*#__PURE__*/wn.createElement(Typography, { color: "secondary" }, connection.idp_entity_id || '–'))))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.x509CertificateLabel }, /*#__PURE__*/ wn.createElement(CertificateTable, { editing: editing, remoteState: connection.verification_certificates, localState: localState, setLocalState: setLocalState, manualConfiguration: manualConfiguration })), editing && !idpRequiresManualConfig && ( /*#__PURE__*/wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat(idp.metadataUrlLabel) : 'Configure manually')))), type === 'oidc' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.clientIdLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.clientIdLabel), value: localState.clientId || '', onChange: handleClientIdChange })) : ( /*#__PURE__*/wn.createElement(Typography, { color: "secondary" }, connection.client_id || '–'))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.clientSecretLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.clientSecretLabel), value: localState.clientSecret || '', onChange: handleClientSecretChange })) : ( /*#__PURE__*/wn.createElement(Typography, { color: "secondary" }, connection.client_secret || '–'))), idp.issuerDerivedLabel ? ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.issuerDerivedLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.issuerDerivedLabel), value: localState.issuerDerivedValue || '', onChange: handleIssuerDerivedValueChange })) : ( /*#__PURE__*/wn.createElement(Typography, { color: "secondary" }, ((_a = idp.extractIssuerFromInput) === null || _a === void 0 ? void 0 : _a.call(idp, connection.issuer)) || '–')))) : ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.issuerLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "URL", value: localState.issuer || '', onChange: handleIssuerChange })) : ( /*#__PURE__*/wn.createElement(Typography, { color: "secondary" }, connection.issuer || '–')))), editing && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, manualConfiguration && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Authorization URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter Authorization URL", value: localState.authorizationUrl || '', onChange: handleAuthorizationUrlChange })), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Token URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter Token URL", value: localState.tokenUrl || '', onChange: handleTokenUrlChange })), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "User info URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter User info URL", value: localState.userInfoUrl || '', onChange: handleUserInfoUrlChange })), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "JWKS URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter JWKS URL", value: localState.jwksUrl || '', onChange: handleJwksUrlChange })))), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat((_b = idp.issuerDerivedLabel) !== null && _b !== void 0 ? _b : idp.issuerLabel) : 'Configure manually'))))))), type === 'saml' && ( /*#__PURE__*/wn.createElement(SettingsSection, { title: idp.attributeMappingLabel }, /*#__PURE__*/ wn.createElement(AttributeMappingTable, { editing: editing, localState: localState, remoteState: remoteState, setLocalState: setLocalState })))); };
-var DetailsSection = function DetailsSection(_ref60) { var canUpdateConnection = _ref60.canUpdateConnection, connectionProp = _ref60.connection; var _getIdpAndConnectionI3 = getIdpAndConnectionInfo(connectionProp), idp = _getIdpAndConnectionI3.idp, connection = _getIdpAndConnectionI3.connection, type = _getIdpAndConnectionI3.type; var remoteState = F$3(function () { var _a; return { displayName: connection.display_name, identityProvider: connection.identity_provider, attributeMapping: 'attribute_mapping' in connection ? connection.attribute_mapping : {}, manualConfiguration: false, authorizationUrl: 'authorization_url' in connection ? connection.authorization_url : undefined, clientId: 'client_id' in connection ? connection.client_id : undefined, clientSecret: 'client_secret' in connection ? connection.client_secret : undefined, entityId: 'idp_entity_id' in connection ? connection.idp_entity_id : undefined, issuer: 'issuer' in connection ? connection.issuer : undefined, issuerDerivedValue: type === 'oidc' ? (_a = idp.extractIssuerFromInput) === null || _a === void 0 ? void 0 : _a.call(idp, connection.issuer) : undefined, jwksUrl: 'jwks_url' in connection ? connection.jwks_url : undefined, ssoUrl: 'idp_sso_url' in connection ? connection.idp_sso_url : undefined, tokenUrl: 'token_url' in connection ? connection.token_url : undefined, userInfoUrl: 'userinfo_url' in connection ? connection.userinfo_url : undefined }; }, [connection, idp, type]); var _useFormState = useFormState({ remoteState: remoteState }), localState = _useFormState.localState, setLocalState = _useFormState.setLocalState, editing = _useFormState.editing, handleSetEditing = _useFormState.handleSetEditing; var _useMutateSsoConnecti = useMutateSsoConnection(type), mutate = _useMutateSsoConnecti.mutate; var _useDeleteSsoConnecti2 = useDeleteSsoConnectionCert(), deleteCertificate = _useDeleteSsoConnecti2.mutate; var _useMutateSsoConnecti2 = useMutateSsoConnectionByUrl(), mutateByUrl = _useMutateSsoConnecti2.mutate; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee7() { var _a, baseOptions, mutatedProperties, idpRequiresManualConfig, isManualConfig, _iterator, _step, _loop, _ret, getIssuer, issuer; return _regeneratorRuntime().wrap(function _callee7$(_context8) { while (1)
+var DetailsSectionBody = function DetailsSectionBody(_ref59) { var taggedConnection = _ref59.connection, localState = _ref59.localState, remoteState = _ref59.remoteState, setLocalState = _ref59.setLocalState; var _a, _b; var _useSettingsContainer = useSettingsContainer(), editing = _useSettingsContainer.editing; var _ref60 = editing ? localState : remoteState, displayName = _ref60.displayName, identityProvider = _ref60.identityProvider; var handleDisplayNameChange = useStateSliceSetter(setLocalState, 'displayName'); var handleIdentityProviderChange = useStateSliceSetter(setLocalState, 'identityProvider'); var handleMetadataUrlChange = useStateSliceSetter(setLocalState, 'metadataUrl'); var handleSsoUrlChange = useStateSliceSetter(setLocalState, 'ssoUrl'); var handleEntityIdChange = useStateSliceSetter(setLocalState, 'entityId'); var handleClientIdChange = useStateSliceSetter(setLocalState, 'clientId'); var handleClientSecretChange = useStateSliceSetter(setLocalState, 'clientSecret'); var handleIssuerChange = useStateSliceSetter(setLocalState, 'issuer'); var handleIssuerDerivedValueChange = useStateSliceSetter(setLocalState, 'issuerDerivedValue'); var handleAuthorizationUrlChange = useStateSliceSetter(setLocalState, 'authorizationUrl'); var handleTokenUrlChange = useStateSliceSetter(setLocalState, 'tokenUrl'); var handleUserInfoUrlChange = useStateSliceSetter(setLocalState, 'userInfoUrl'); var handleJwksUrlChange = useStateSliceSetter(setLocalState, 'jwksUrl'); var _getIdpAndConnectionI2 = getIdpAndConnectionInfo(taggedConnection), connection = _getIdpAndConnectionI2.connection, idp = _getIdpAndConnectionI2.idp, type = _getIdpAndConnectionI2.type; var idpRequiresManualConfig = type === 'saml' && idp.metadataUrlLabel === false; var manualConfiguration = localState.manualConfiguration || idpRequiresManualConfig; var setManualConfiguration = useStateSliceSetter(setLocalState, 'manualConfiguration'); return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Display Name" }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { value: displayName, onChange: handleDisplayNameChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, displayName))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "IdP" }, editing ? ( /*#__PURE__*/wn.createElement(Select, { width: 360, placeholder: "Select", selectItems: type === 'saml' ? samlIdpSelectItems : oidcIdpSelectItems, value: identityProvider, onChange: handleIdentityProviderChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, idp.displayName))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "App Values", tooltipText: "Copy these App (Service Provider) Values into your IdP." }, /*#__PURE__*/ wn.createElement(SettingsList, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Connection ID" }, /*#__PURE__*/ wn.createElement(CopyableText, null, connection.connection_id)), /*#__PURE__*/ wn.createElement(AppDetails, { connection: connection }))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "IdP Values" }, /*#__PURE__*/ wn.createElement(SettingsList, null, type === 'saml' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, editing && !manualConfiguration ? ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.metadataUrlLabel }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.metadataUrlLabel), value: localState.metadataUrl || '', onChange: handleMetadataUrlChange }))) : ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.idpSsoUrlLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.idpSsoUrlLabel), value: localState.ssoUrl || '', onChange: handleSsoUrlChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, connection.idp_sso_url || '–'))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.idpEntityIdLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.idpEntityIdLabel), value: localState.entityId || '', onChange: handleEntityIdChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, connection.idp_entity_id || '–'))))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.x509CertificateLabel }, /*#__PURE__*/ wn.createElement(CertificateTable, { editing: editing, remoteState: connection.verification_certificates, localState: localState, setLocalState: setLocalState, manualConfiguration: manualConfiguration })), editing && !idpRequiresManualConfig && ( /*#__PURE__*/wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat(idp.metadataUrlLabel) : 'Configure manually')))), type === 'oidc' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.clientIdLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.clientIdLabel), value: localState.clientId || '', onChange: handleClientIdChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, connection.client_id || '–'))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: idp.clientSecretLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.clientSecretLabel), value: localState.clientSecret || '', onChange: handleClientSecretChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, connection.client_secret || '–'))), idp.issuerDerivedLabel ? ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.issuerDerivedLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.issuerDerivedLabel), value: localState.issuerDerivedValue || '', onChange: handleIssuerDerivedValueChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, ((_a = idp.extractIssuerFromInput) === null || _a === void 0 ? void 0 : _a.call(idp, connection.issuer)) || '–')))) : ( /*#__PURE__*/wn.createElement(SettingsListItem, { title: idp.issuerLabel }, editing ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "URL", value: localState.issuer || '', onChange: handleIssuerChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, connection.issuer || '–')))), editing && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, manualConfiguration && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Authorization URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter Authorization URL", value: localState.authorizationUrl || '', onChange: handleAuthorizationUrlChange })), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Token URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter Token URL", value: localState.tokenUrl || '', onChange: handleTokenUrlChange })), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "User info URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter User info URL", value: localState.userInfoUrl || '', onChange: handleUserInfoUrlChange })), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "JWKS URL" }, /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter JWKS URL", value: localState.jwksUrl || '', onChange: handleJwksUrlChange })))), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat((_b = idp.issuerDerivedLabel) !== null && _b !== void 0 ? _b : idp.issuerLabel) : 'Configure manually'))))))), type === 'saml' && ( /*#__PURE__*/wn.createElement(SettingsSection, { title: idp.attributeMappingLabel }, /*#__PURE__*/ wn.createElement(AttributeMappingTable, { editing: editing, localState: localState, remoteState: remoteState, setLocalState: setLocalState })))); };
+var DetailsSection = function DetailsSection(_ref61) { var canUpdateConnection = _ref61.canUpdateConnection, connectionProp = _ref61.connection; var _getIdpAndConnectionI3 = getIdpAndConnectionInfo(connectionProp), idp = _getIdpAndConnectionI3.idp, connection = _getIdpAndConnectionI3.connection, type = _getIdpAndConnectionI3.type; var remoteState = F$3(function () { var _a; return { displayName: connection.display_name, identityProvider: connection.identity_provider, attributeMapping: 'attribute_mapping' in connection ? connection.attribute_mapping : {}, manualConfiguration: false, authorizationUrl: 'authorization_url' in connection ? connection.authorization_url : undefined, clientId: 'client_id' in connection ? connection.client_id : undefined, clientSecret: 'client_secret' in connection ? connection.client_secret : undefined, entityId: 'idp_entity_id' in connection ? connection.idp_entity_id : undefined, issuer: 'issuer' in connection ? connection.issuer : undefined, issuerDerivedValue: type === 'oidc' ? (_a = idp.extractIssuerFromInput) === null || _a === void 0 ? void 0 : _a.call(idp, connection.issuer) : undefined, jwksUrl: 'jwks_url' in connection ? connection.jwks_url : undefined, ssoUrl: 'idp_sso_url' in connection ? connection.idp_sso_url : undefined, tokenUrl: 'token_url' in connection ? connection.token_url : undefined, userInfoUrl: 'userinfo_url' in connection ? connection.userinfo_url : undefined }; }, [connection, idp, type]); var _useFormState = useFormState({ remoteState: remoteState }), localState = _useFormState.localState, setLocalState = _useFormState.setLocalState, editing = _useFormState.editing, handleSetEditing = _useFormState.handleSetEditing; var _useMutateSsoConnecti = useMutateSsoConnection(type), mutate = _useMutateSsoConnecti.mutate; var _useDeleteSsoConnecti2 = useDeleteSsoConnectionCert(), deleteCertificate = _useDeleteSsoConnecti2.mutate; var _useMutateSsoConnecti2 = useMutateSsoConnectionByUrl(), mutateByUrl = _useMutateSsoConnecti2.mutate; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee7() { var _a, baseOptions, mutatedProperties, idpRequiresManualConfig, isManualConfig, _iterator, _step, _loop, _ret, getIssuer, issuer; return _regeneratorRuntime().wrap(function _callee7$(_context8) { while (1)
     switch (_context8.prev = _context8.next) {
         case 0:
             baseOptions = { connection_id: connection.connection_id };
@@ -9316,8 +9385,8 @@ var useMutateOrganization = function useMutateOrganization() { var _useSWRConfig
         case "end": return _context10.stop();
     } }, _callee9); })); }, [client.organization, mutateSWR])); };
 var SetDefaultConfirmModal = function SetDefaultConfirmModal(_a) { var connectionName = _a.connectionName, defaultConnectionName = _a.defaultConnectionName, modalProps = __rest(_a, ["connectionName", "defaultConnectionName"]); return /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, modalProps, { title: "Set ".concat(connectionName || '', " as default?"), confirmButtonText: "Set as default" }), /*#__PURE__*/ wn.createElement(Typography, null, "This will be the default SSO connection for your entire organization. The default connection ID is used to initiate the SSO authentication flow if the connection ID is missing and you only specify the org ID or slug."), defaultConnectionName && ( /*#__PURE__*/wn.createElement(Typography, { color: "error" }, "This will replace ", defaultConnectionName, " as the default connection for your organization."))); };
-var useMutateDefaultConnection = function useMutateDefaultConnection() { var _useMutateOrganizatio = useMutateOrganization(), mutate = _useMutateOrganizatio.mutate; var setDefault = function setDefault(_ref61) { var connectionId = _ref61.connectionId, connectionName = _ref61.connectionName; return mutate({ sso_default_connection_id: connectionId }, { errorMessage: "Failed to set ".concat(connectionName, " as default connection") }); }; return { setDefault: setDefault }; };
-var useSetDefaultConnection = function useSetDefaultConnection(_ref62) { var defaultConnectionName = _ref62.defaultConnectionName; var _h45 = h$4(), _h46 = _slicedToArray2(_h45, 2), connection = _h46[0], setConnection = _h46[1]; var _h47 = h$4(defaultConnectionName), _h48 = _slicedToArray2(_h47, 2), cachedDefaultConnectionName = _h48[0], setCachedDefaultConnectionName = _h48[1]; var _useToggleState2 = useToggleState(), isOpen = _useToggleState2.isOpen, open = _useToggleState2.open, close = _useToggleState2.close; var handleRequestSetDefault = T$2(function (connection) { setConnection(connection); setCachedDefaultConnectionName(defaultConnectionName); open(); }, [defaultConnectionName, open]); var _useMutateDefaultConn = useMutateDefaultConnection(), setDefault = _useMutateDefaultConn.setDefault; var confirm = function confirm() { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee10() { return _regeneratorRuntime().wrap(function _callee10$(_context11) { while (1)
+var useMutateDefaultConnection = function useMutateDefaultConnection() { var _useMutateOrganizatio = useMutateOrganization(), mutate = _useMutateOrganizatio.mutate; var setDefault = function setDefault(_ref62) { var connectionId = _ref62.connectionId, connectionName = _ref62.connectionName; return mutate({ sso_default_connection_id: connectionId }, { errorMessage: "Failed to set ".concat(connectionName, " as default connection") }); }; return { setDefault: setDefault }; };
+var useSetDefaultConnection = function useSetDefaultConnection(_ref63) { var defaultConnectionName = _ref63.defaultConnectionName; var _h45 = h$4(), _h46 = _slicedToArray2(_h45, 2), connection = _h46[0], setConnection = _h46[1]; var _h47 = h$4(defaultConnectionName), _h48 = _slicedToArray2(_h47, 2), cachedDefaultConnectionName = _h48[0], setCachedDefaultConnectionName = _h48[1]; var _useToggleState2 = useToggleState(), isOpen = _useToggleState2.isOpen, open = _useToggleState2.open, close = _useToggleState2.close; var handleRequestSetDefault = T$2(function (connection) { setConnection(connection); setCachedDefaultConnectionName(defaultConnectionName); open(); }, [defaultConnectionName, open]); var _useMutateDefaultConn = useMutateDefaultConnection(), setDefault = _useMutateDefaultConn.setDefault; var confirm = function confirm() { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee10() { return _regeneratorRuntime().wrap(function _callee10$(_context11) { while (1)
     switch (_context11.prev = _context11.next) {
         case 0:
             if (!connection) {
@@ -9330,8 +9399,16 @@ var useSetDefaultConnection = function useSetDefaultConnection(_ref62) { var def
         case 4:
         case "end": return _context11.stop();
     } }, _callee10); })); }; return { handleRequestSetDefault: handleRequestSetDefault, modalProps: { connectionName: connection === null || connection === void 0 ? void 0 : connection.displayName, defaultConnectionName: cachedDefaultConnectionName, isOpen: isOpen, close: close, confirm: confirm } }; };
-var OrganizationUpdatesSectionBody = function OrganizationUpdatesSectionBody(_ref63) { var connection = _ref63.connection, defaultConnectionName = _ref63.defaultConnectionName, orgJitProvisioningPolicy = _ref63.orgJitProvisioningPolicy, localState = _ref63.localState, setLocalState = _ref63.setLocalState, remoteState = _ref63.remoteState; var _useSettingsContainer2 = useSettingsContainer(), editing = _useSettingsContainer2.editing; var _useSetDefaultConnect = useSetDefaultConnection({ defaultConnectionName: defaultConnectionName }), handleRequestSetDefault = _useSetDefaultConnect.handleRequestSetDefault, modalProps = _useSetDefaultConnect.modalProps; var _ref64 = editing ? localState : remoteState, isDefaultConnection = _ref64.isDefaultConnection, jitProvisioningEnabled = _ref64.jitProvisioningEnabled; var _useRbac = useRbac('stytch.organization', 'update.settings.default-sso-connection'), canSetDefaultConnection = _useRbac.data; var _useRbac2 = useRbac('stytch.organization', 'update.settings.sso-jit-provisioning'), canSetSsoJitProvisioning = _useRbac2.data; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, editing && ( /*#__PURE__*/wn.createElement(SetDefaultConfirmModal, Object.assign({}, modalProps, { confirm: function confirm() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { isDefaultConnection: true }); }); return Promise.resolve(); } }))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Set as default SSO Connection", tooltipText: "The default connection ID is used to initiate the SSO authentication flow if the connection ID is missing and you only specify the org ID or slug. You can only have one default connection. " }, editing && !remoteState.isDefaultConnection && canSetDefaultConnection ? isDefaultConnection ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Typography, null, "This connection will be set as the default upon saving."), /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { isDefaultConnection: false }); }); } }, "Cancel"))) : ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Typography, null, "This will replace your existing default SSO connection."), /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { handleRequestSetDefault({ displayName: connection.display_name, id: connection.connection_id }); } }, "Set as default"))) : isDefaultConnection ? ( /*#__PURE__*/wn.createElement(Typography, null, "This connection is already set as the default.")) : ( /*#__PURE__*/wn.createElement(Typography, null, "This connection is not set as the default."))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "JIT provisioning via this connection", tooltipText: "If enabled, users who successfully authenticate through this SSO Connection will be automatically granted an account if they do not already exist within your organization." }, editing && canSetSsoJitProvisioning && (orgJitProvisioningPolicy === 'RESTRICTED' || orgJitProvisioningPolicy === 'NOT_ALLOWED') ? jitProvisioningEnabled ? ( /*#__PURE__*/wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { jitProvisioningEnabled: false }); }); }, warning: true }, "Disable")) : ( /*#__PURE__*/wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { jitProvisioningEnabled: true }); }); } }, "Enable")) : ( /*#__PURE__*/wn.createElement(Typography, null, orgJitProvisioningPolicy === 'ALL_ALLOWED' ? 'Enabled at the organization level for all SSO connections.' : !jitProvisioningEnabled || orgJitProvisioningPolicy === 'NOT_ALLOWED' ? 'Disabled' : 'Enabled')))); };
-var OrganizationUpdatesSection = function OrganizationUpdatesSection(_ref65) { var connection = _ref65.connection, defaultConnectionName = _ref65.defaultConnectionName, isDefaultConnection = _ref65.isDefaultConnection; var _useRbac3 = useRbac('stytch.organization', 'update.settings.default-sso-connection'), canSetDefaultConnection = _useRbac3.data; var _useRbac4 = useRbac('stytch.organization', 'update.settings.sso-jit-provisioning'), canSetSsoJitProvisioning = _useRbac4.data; var _useOrgInfo = useOrgInfo(), organization = _useOrgInfo.data; var orgJitProvisioningPolicy = organization === null || organization === void 0 ? void 0 : organization.sso_jit_provisioning; var remoteState = F$3(function () { return { isDefaultConnection: isDefaultConnection, jitProvisioningEnabled: !!(orgJitProvisioningPolicy === 'ALL_ALLOWED' || orgJitProvisioningPolicy === 'RESTRICTED' && (organization === null || organization === void 0 ? void 0 : organization.sso_jit_provisioning_allowed_connections.includes(connection.connection_id))) }; }, [connection.connection_id, isDefaultConnection, orgJitProvisioningPolicy, organization === null || organization === void 0 ? void 0 : organization.sso_jit_provisioning_allowed_connections]); var _useFormState2 = useFormState({ remoteState: remoteState }), localState = _useFormState2.localState, setLocalState = _useFormState2.setLocalState, editing = _useFormState2.editing, handleSetEditing = _useFormState2.handleSetEditing; var _useMutateDefaultConn2 = useMutateDefaultConnection(), setDefault = _useMutateDefaultConn2.setDefault; var _useMutateOrganizatio2 = useMutateOrganization(), mutate = _useMutateOrganizatio2.mutate; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee11() { var _a, _b, promises, allowedConnections, _allowedConnections; return _regeneratorRuntime().wrap(function _callee11$(_context12) { while (1)
+var useStyles$8 = makeStyles(function (theme) { var primary = theme.styleConfig.buttons.primary.backgroundColor; var secondary = theme.styleConfig.colors.secondary; var containerBackground = theme.styleConfig.container.backgroundColor; return { root: { width: 38, height: 24, padding: 8, marginLeft: 4, display: 'flex', alignItems: 'center', boxSizing: 'border-box' }, switchBase: { transition: theme.transitions.create(['opacity', 'background-color']), margin: '0px 3px', '&$checked': _defineProperty2({ margin: '0px -8px' }, "& + .".concat(classNamePrefix, "MuiSwitch-track"), { opacity: 1, backgroundColor: primary }), '&.Mui-disabled': _defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiSwitch-thumb"), { color: secondary }), "& + .".concat(classNamePrefix, "MuiSwitch-track"), { border: '2.5px solid', borderColor: secondary, opacity: 1, backgroundColor: containerBackground }), '&$checked', _defineProperty2(_defineProperty2({}, "& + .".concat(classNamePrefix, "MuiSwitch-track"), { opacity: 1, backgroundColor: secondary }), "& .".concat(classNamePrefix, "MuiSwitch-thumb"), { color: containerBackground })), '&$checked $thumb': { color: containerBackground } }, thumb: { height: 6, width: 6, boxShadow: 'none', color: primary }, colorSecondary: { '&:hover': { backgroundColor: alpha(containerBackground, 0) }, '&$checked': { '&:hover': { backgroundColor: alpha(containerBackground, 0) } } }, track: { border: '2.5px solid', borderColor: primary, backgroundColor: containerBackground, borderRadius: 24 / 2, height: 8, opacity: 1 }, checked: {}, disabled: {} }; });
+var stopPropagateOnClick = function stopPropagateOnClick(e) { e.stopPropagation(); };
+var Switch = function Switch(_ref64) { var checked = _ref64.checked, label = _ref64.label, onChange = _ref64.onChange, readOnly = _ref64.readOnly; var classes = useStyles$8(); var handleChange = function handleChange(e) { onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked); }; return /*#__PURE__*/ wn.createElement(FormControlLabel$1, { control: /*#__PURE__*/ wn.createElement(MUISwitch, { "aria-label": "".concat(checked ? 'Disable' : 'Enable', " ").concat(label), checked: checked, classes: classes, disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, disabled: readOnly, onChange: handleChange, onClick: stopPropagateOnClick }), disabled: readOnly, label: /*#__PURE__*/ wn.createElement(FlexBox, null, label && ( /*#__PURE__*/wn.createElement(Typography, { variant: 'body2', disabled: readOnly }, label))) }); };
+var OrganizationUpdatesSectionBody = function OrganizationUpdatesSectionBody(_ref65) { var connection = _ref65.connection, defaultConnectionName = _ref65.defaultConnectionName, orgJitProvisioningPolicy = _ref65.orgJitProvisioningPolicy, localState = _ref65.localState, setLocalState = _ref65.setLocalState, remoteState = _ref65.remoteState; var _useSettingsContainer2 = useSettingsContainer(), editing = _useSettingsContainer2.editing; var _useSetDefaultConnect = useSetDefaultConnection({ defaultConnectionName: defaultConnectionName }), handleRequestSetDefault = _useSetDefaultConnect.handleRequestSetDefault, modalProps = _useSetDefaultConnect.modalProps; var _ref66 = editing ? localState : remoteState, isDefaultConnection = _ref66.isDefaultConnection, jitProvisioningEnabled = _ref66.jitProvisioningEnabled; var _useRbac = useRbac('stytch.organization', 'update.settings.default-sso-connection'), canSetDefaultConnection = _useRbac.data; var _useRbac2 = useRbac('stytch.organization', 'update.settings.sso-jit-provisioning'), canSetSsoJitProvisioning = _useRbac2.data; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, editing && ( /*#__PURE__*/wn.createElement(SetDefaultConfirmModal, Object.assign({}, modalProps, { confirm: function confirm() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { isDefaultConnection: true }); }); return Promise.resolve(); } }))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Default SSO connection", tooltipText: "The default connection ID is used to initiate the SSO authentication flow if the connection ID is missing and you only specify the org ID or slug. You can only have one default connection. " }, remoteState.isDefaultConnection ? ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, "This connection is already set as the default.")) : ( /*#__PURE__*/wn.createElement(Switch, { readOnly: !editing || !canSetDefaultConnection, label: "Set this connection as the default SSO connection. This will replace your existing default SSO connection.", checked: isDefaultConnection, onChange: function onChange() { if (isDefaultConnection) {
+        setLocalState(function (state) { return Object.assign(Object.assign({}, state), { isDefaultConnection: false }); });
+    }
+    else {
+        handleRequestSetDefault({ displayName: connection.display_name, id: connection.connection_id });
+    } } }))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "JIT provisioning", tooltipText: "If enabled, users who successfully authenticate through this SSO Connection will be automatically granted an account if they do not already exist within your organization." }, /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !(canSetSsoJitProvisioning && orgJitProvisioningPolicy === 'RESTRICTED'), label: "Allow JIT provisioning for users who successfully authenticate through this SSO connection.", checked: jitProvisioningEnabled, onChange: function onChange(value) { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { jitProvisioningEnabled: value }); }); } }))); };
+var OrganizationUpdatesSection = function OrganizationUpdatesSection(_ref67) { var connection = _ref67.connection, defaultConnectionName = _ref67.defaultConnectionName, isDefaultConnection = _ref67.isDefaultConnection; var _useRbac3 = useRbac('stytch.organization', 'update.settings.default-sso-connection'), canSetDefaultConnection = _useRbac3.data; var _useRbac4 = useRbac('stytch.organization', 'update.settings.sso-jit-provisioning'), canSetSsoJitProvisioning = _useRbac4.data; var _useOrgInfo = useOrgInfo(), organization = _useOrgInfo.data; var orgJitProvisioningPolicy = organization === null || organization === void 0 ? void 0 : organization.sso_jit_provisioning; var remoteState = F$3(function () { return { isDefaultConnection: isDefaultConnection, jitProvisioningEnabled: !!(orgJitProvisioningPolicy === 'ALL_ALLOWED' || orgJitProvisioningPolicy === 'RESTRICTED' && (organization === null || organization === void 0 ? void 0 : organization.sso_jit_provisioning_allowed_connections.includes(connection.connection_id))) }; }, [connection.connection_id, isDefaultConnection, orgJitProvisioningPolicy, organization === null || organization === void 0 ? void 0 : organization.sso_jit_provisioning_allowed_connections]); var _useFormState2 = useFormState({ remoteState: remoteState }), localState = _useFormState2.localState, setLocalState = _useFormState2.setLocalState, editing = _useFormState2.editing, handleSetEditing = _useFormState2.handleSetEditing; var _useMutateDefaultConn2 = useMutateDefaultConnection(), setDefault = _useMutateDefaultConn2.setDefault; var _useMutateOrganizatio2 = useMutateOrganization(), mutate = _useMutateOrganizatio2.mutate; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee11() { var _a, _b, promises, allowedConnections, _allowedConnections; return _regeneratorRuntime().wrap(function _callee11$(_context12) { while (1)
     switch (_context12.prev = _context12.next) {
         case 0:
             if (organization) {
@@ -9772,44 +9849,56 @@ var Autocomplete$1 = /*#__PURE__*/ N$1(function Autocomplete(props, ref) { props
     return renderGroup({ key: option.key, group: option.group, children: option.options.map(function (option2, index2) { return renderListOption(option2, option.index + index2); }) });
 } return renderListOption(option, index); })) : null)) : null); });
 var MuiAutocomplete = withStyles(styles, { name: 'MuiAutocomplete' })(Autocomplete$1);
-var AutocompleteTag = function AutocompleteTag(_a) { var children = _a.children, onDelete = _a.onDelete, props = __rest(_a, ["children", "onDelete"]); return /*#__PURE__*/ wn.createElement(Tag, Object.assign({}, props, { size: "sm" }), /*#__PURE__*/ wn.createElement(FlexBox, { gap: 0.5, alignItems: "center" }, children, onDelete && ( /*#__PURE__*/wn.createElement(IconButton$1, { size: "small", onClick: onDelete }, /*#__PURE__*/ wn.createElement(default_1$b, { fontSize: "inherit" }))))); };
+var AutocompleteTag = function AutocompleteTag(_a) { var children = _a.children, onDelete = _a.onDelete, props = __rest(_a, ["children", "onDelete"]); return /*#__PURE__*/ wn.createElement(Tag, Object.assign({}, props, { size: "small", hasTopAndBottomPadding: false }), /*#__PURE__*/ wn.createElement(FlexBox, { gap: 0.5, alignItems: "center" }, children, onDelete && ( /*#__PURE__*/wn.createElement(IconButton$1, { size: "small", onClick: onDelete }, /*#__PURE__*/ wn.createElement(default_1$h, { fontSize: "inherit" }))))); };
 var Input = function Input(props) { return /*#__PURE__*/ wn.createElement(TextField$1, Object.assign({}, props, { variant: "outlined" })); };
-var useStyles$7 = makeStyles(function (theme) { return { autocomplete: { '& .MuiInputBase-root': { padding: theme.spacing(1), gap: theme.spacing(0.5) }, '& .MuiOutlinedInput-input.MuiAutocomplete-input': { padding: 0, height: 24, '&::placeholder': { color: theme.styleConfig.inputs.placeholderColor, opacity: 1 } }, '& .MuiOutlinedInput-notchedOutline': { border: '1px solid', borderRadius: theme.styleConfig.inputs.borderRadius, borderColor: theme.styleConfig.inputs.borderColor }, '&:hover .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiOutlinedInput-notchedOutline': { borderWidth: 1, borderColor: theme.styleConfig.inputs.borderColor }, '& .MuiAutocomplete-endAdornment .MuiIconButton-root': { fontSize: 20 } } }; });
+var useStyles$7 = makeStyles(function (theme) { return { autocomplete: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiInputBase-root"), { padding: theme.spacing(1), gap: theme.spacing(0.5) }), "& .".concat(classNamePrefix, "MuiOutlinedInput-input.").concat(classNamePrefix, "MuiAutocomplete-input"), { padding: 0, height: 24, '&::placeholder': { color: theme.styleConfig.inputs.placeholderColor, opacity: 1 } }), "& .".concat(classNamePrefix, "MuiOutlinedInput-notchedOutline"), { border: '1px solid', borderRadius: theme.styleConfig.inputs.borderRadius, borderColor: theme.styleConfig.inputs.borderColor }), "&:hover .".concat(classNamePrefix, "MuiOutlinedInput-notchedOutline, &.Mui-focused .").concat(classNamePrefix, "MuiOutlinedInput-notchedOutline"), { borderWidth: 1, borderColor: theme.styleConfig.inputs.borderColor }), "& .".concat(classNamePrefix, "MuiAutocomplete-endAdornment .").concat(classNamePrefix, "MuiIconButton-root"), { fontSize: 20 }) }; });
 var defaultGetOptionLabel = function defaultGetOptionLabel(item) { return item; };
-var Autocomplete = function Autocomplete(_ref66) { var caption = _ref66.caption, fullWidth = _ref66.fullWidth, _ref66$getOptionLabel = _ref66.getOptionLabel, getOptionLabel = _ref66$getOptionLabel === void 0 ? defaultGetOptionLabel : _ref66$getOptionLabel, id = _ref66.id, label = _ref66.label, _onChange = _ref66.onChange, placeholder = _ref66.placeholder, required = _ref66.required, selectItems = _ref66.selectItems, value = _ref66.value; var selectId = useShortId(id); var _h49 = h$4(false), _h50 = _slicedToArray2(_h49, 2), isOpen = _h50[0], setIsOpen = _h50[1]; var autocompleteClasses = useStyles$7(); var selectClasses = useStyles$b(); return /*#__PURE__*/ wn.createElement("div", { className: C(selectClasses.selectContainer, _defineProperty2({}, selectClasses.fullWidth, fullWidth)) }, label && ( /*#__PURE__*/wn.createElement(Label, { htmlFor: selectId, required: required }, label)), /*#__PURE__*/ wn.createElement(MuiAutocomplete, { popupIcon: /*#__PURE__*/ wn.createElement(default_1$3, null), className: autocompleteClasses.autocomplete, fullWidth: true, id: selectId, multiple: true, onChange: function onChange(_, value) { _onChange === null || _onChange === void 0 ? void 0 : _onChange(value); }, onClose: function onClose() { return setIsOpen(false); }, onOpen: function onOpen() { return setIsOpen(true); }, open: isOpen, value: value, options: selectItems, getOptionLabel: getOptionLabel, renderOption: function renderOption(option, state) { return /*#__PURE__*/ wn.createElement(FlexBox, { gap: 0.5, alignItems: "center" }, /*#__PURE__*/ wn.createElement(default_1$5, { fontSize: "small", style: { visibility: state.selected ? 'visible' : 'hidden' }, "aria-visibility": state.selected }), getOptionLabel(option)); }, renderInput: function renderInput(params) { return /*#__PURE__*/ wn.createElement(Input, Object.assign({}, params, { placeholder: placeholder })); }, renderTags: function renderTags(value, getTagProps) { return value.map(function (option, index) { return /*#__PURE__*/ wn.createElement(AutocompleteTag, Object.assign({}, getTagProps({ index: index })), getOptionLabel(option)); }); } }), caption && /*#__PURE__*/ wn.createElement(Typography$2, { variant: "body2" }, caption)); };
+var Autocomplete = function Autocomplete(_ref68) { var caption = _ref68.caption, fullWidth = _ref68.fullWidth, getOptionDescription = _ref68.getOptionDescription, getOptionDisabled = _ref68.getOptionDisabled, _ref68$getOptionLabel = _ref68.getOptionLabel, getOptionLabel = _ref68$getOptionLabel === void 0 ? defaultGetOptionLabel : _ref68$getOptionLabel, id = _ref68.id, label = _ref68.label, _onChange = _ref68.onChange, placeholder = _ref68.placeholder, required = _ref68.required, selectItems = _ref68.selectItems, value = _ref68.value; var selectId = useShortId(id); var _h49 = h$4(false), _h50 = _slicedToArray2(_h49, 2), isOpen = _h50[0], setIsOpen = _h50[1]; var autocompleteClasses = useStyles$7(); var selectClasses = useStyles$c(); return /*#__PURE__*/ wn.createElement("div", { className: C(selectClasses.selectContainer, _defineProperty2({}, selectClasses.fullWidth, fullWidth)) }, label && ( /*#__PURE__*/wn.createElement(Label, { htmlFor: selectId, required: required }, label)), /*#__PURE__*/ wn.createElement(MuiAutocomplete, { popupIcon: /*#__PURE__*/ wn.createElement(default_1$9, null), className: autocompleteClasses.autocomplete, fullWidth: true, id: selectId, multiple: true, onChange: function onChange(_, newValue, reason) { if (_onChange) {
+        if (reason === 'clear' && getOptionDisabled) {
+            _onChange(value.filter(function (item) { return getOptionDisabled(item); }));
+        }
+        else {
+            _onChange(newValue);
+        }
+    } }, onClose: function onClose() { return setIsOpen(false); }, onOpen: function onOpen() { return setIsOpen(true); }, open: isOpen, value: value, options: selectItems, getOptionDisabled: getOptionDisabled, getOptionLabel: getOptionLabel, renderOption: function renderOption(option, state) { var description = getOptionDescription === null || getOptionDescription === void 0 ? void 0 : getOptionDescription(option); return /*#__PURE__*/ wn.createElement(FlexBox, { gap: 0.5, alignItems: "center" }, /*#__PURE__*/ wn.createElement(default_1$b, { fontSize: "small", style: { visibility: state.selected ? 'visible' : 'hidden' }, "aria-visibility": state.selected }), /*#__PURE__*/ wn.createElement("div", null, getOptionLabel(option), description && /*#__PURE__*/ wn.createElement(Typography$2, { variant: "body2" }, description))); }, renderInput: function renderInput(params) { return /*#__PURE__*/ wn.createElement(Input, Object.assign({}, params, { placeholder: placeholder })); }, renderTags: function renderTags(value, getTagProps) { return value.map(function (option, index) { var _a = getTagProps({ index: index }), onDelete = _a.onDelete, tagProps = __rest(_a, ["onDelete"]); return /*#__PURE__*/ wn.createElement(AutocompleteTag, Object.assign({}, tagProps, { onDelete: (getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option)) ? undefined : onDelete }), getOptionLabel(option)); }); } }), caption && /*#__PURE__*/ wn.createElement(Typography$2, { variant: "body2" }, caption)); };
 var ArrowRight = {};
-var _interopRequireDefault$1 = interopRequireDefaultExports;
-var _interopRequireWildcard$1 = interopRequireWildcardExports;
+var _interopRequireDefault$7 = interopRequireDefaultExports;
+var _interopRequireWildcard$7 = interopRequireWildcardExports;
 Object.defineProperty(ArrowRight, "__esModule", { value: true });
-var default_1$1 = ArrowRight["default"] = void 0;
-var React$1 = _interopRequireWildcard$1(require$$2);
-var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
-var _default$1 = (0, _createSvgIcon$1["default"])(/*#__PURE__*/ React$1.createElement("path", { d: "M10 17l5-5-5-5v10z" }), 'ArrowRight');
-default_1$1 = ArrowRight["default"] = _default$1;
+var default_1$7 = ArrowRight["default"] = void 0;
+var React$7 = _interopRequireWildcard$7(require$$2);
+var _createSvgIcon$7 = _interopRequireDefault$7(requireCreateSvgIcon());
+var _default$7 = (0, _createSvgIcon$7["default"])(/*#__PURE__*/ React$7.createElement("path", { d: "M10 17l5-5-5-5v10z" }), 'ArrowRight');
+default_1$7 = ArrowRight["default"] = _default$7;
 var TABLE_CONTAINER_ID = 'table-container';
 var EXPANDED_CONTENT_CLASSNAME = 'expanded-content';
 var leftAlignExpandedContent = function leftAlignExpandedContent(containerId) { var container = document.getElementById(containerId); var expandedContentDivs = document.querySelectorAll("#".concat(containerId, " .").concat(EXPANDED_CONTENT_CLASSNAME)); expandedContentDivs.forEach(function (expandedContent) { expandedContent.style.marginLeft = (container === null || container === void 0 ? void 0 : container.scrollLeft) + 'px'; }); };
-var makeTableStyles = makeStylesFactory(function (theme) { return { tableCell: { padding: theme.spacing(0.5, 1), minWidth: 80 }, tableHeader: {}, tableWithExpandedContent: { '& tr td:nth-child(2), & tr th:nth-child(2)': { paddingLeft: theme.spacing(0) } }, tableWithActions: { width: 'calc(100% - 2px)' }, tableActionsCell: { position: 'sticky', right: 0, width: '1%' }, tableHeaderActionsCell: {}, cellWithExpandedContent: { borderBottom: 'none' }, expandMoreCell: { padding: theme.spacing(0, 0, 0, 1), width: theme.spacing(4.5), minWidth: 'unset' }, openChevron: { transform: 'rotate(90deg)' }, expandedRow: {}, expandedContentCell: { padding: 0 }, expandedContentContainer: { padding: theme.spacing(0.5, 2, 1) }, clickable: { cursor: 'pointer' }, tableRow: {} }; });
-var TableCell = function TableCell(_a) { var children = _a.children, className = _a.className, classes = _a.classes, Typography = _a.TypographyComponent, props = __rest(_a, ["children", "className", "classes", "TypographyComponent"]); var value = getTableCellValue(children); return /*#__PURE__*/ wn.createElement(MUITableCell, Object.assign({ className: C(classes.tableCell, className) }, props), typeof value === 'string' ? /*#__PURE__*/ wn.createElement(Typography, null, value) : children); };
-var TableRow = function TableRow(_ref67) { var id = _ref67.id, ExpandedContent = _ref67.ExpandedContent, item = _ref67.item, itemRenderer = _ref67.itemRenderer, onRowClick = _ref67.onRowClick, tableWidth = _ref67.tableWidth, tableContainerId = _ref67.tableContainerId, getItemActionProps = _ref67.getItemActionProps, classes = _ref67.classes, TableActions = _ref67.TableActionsComponent, Typography = _ref67.TypographyComponent; var _h51 = h$4(false), _h52 = _slicedToArray2(_h51, 2), open = _h52[0], setOpen = _h52[1]; p$3(function () { if (open) {
+var makeTableStyles = makeStylesFactory(function (theme) { return { tableCell: { padding: theme.spacing(0.5, 1), minWidth: 80 }, tableHeader: {}, tableWithExpandedContent: { '& tr td:nth-child(2), & tr th:nth-child(2)': { paddingLeft: theme.spacing(0) } }, tableWithActions: { width: 'calc(100% - 2px)' }, tableActionsCell: { position: 'sticky', right: 0, width: '1%' }, cellWithExpandedContent: { borderBottom: 'none' }, expandMoreCell: { padding: theme.spacing(0, 0, 0, 1), width: theme.spacing(4.5), minWidth: 'unset' }, openChevron: { transform: 'rotate(90deg)' }, expandedRow: {}, expandedContentCell: { padding: 0 }, expandedContentContainer: { padding: theme.spacing(0.5, 2, 1) }, clickable: { cursor: 'pointer' }, tableRow: {} }; });
+var TableCell = function TableCell(_a) { var children = _a.children, className = _a.className, classes = _a.classes, Typography = _a.TypographyComponent, props = __rest(_a, ["children", "className", "classes", "TypographyComponent"]); var value = getTableCellValue(children); return /*#__PURE__*/ wn.createElement(MUITableCell, Object.assign({ className: C(classes.tableCell, className) }, props), typeof value === 'string' ? /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, value) : children); };
+var TableRow = function TableRow(_ref69) { var id = _ref69.id, ExpandedContent = _ref69.ExpandedContent, item = _ref69.item, itemRenderer = _ref69.itemRenderer, onRowClick = _ref69.onRowClick, tableWidth = _ref69.tableWidth, tableContainerId = _ref69.tableContainerId, getItemActionProps = _ref69.getItemActionProps, classes = _ref69.classes, TableActions = _ref69.TableActionsComponent, Typography = _ref69.TypographyComponent, isOpenProp = _ref69.isOpen, onOpenChange = _ref69.onOpenChange; var isOpenControlled = isOpenProp !== undefined; var _h51 = h$4(false), _h52 = _slicedToArray2(_h51, 2), openState = _h52[0], setOpenState = _h52[1]; var open = isOpenControlled ? isOpenProp : openState; p$3(function () { if (open) {
     leftAlignExpandedContent(tableContainerId);
-} }, [open, tableContainerId]); var toggleOpen = function toggleOpen(e) { e.stopPropagation(); setOpen(function (prev) { return !prev; }); }; var handleRowClick = function handleRowClick(e) { if (onRowClick) {
+} }, [open, tableContainerId]); var toggleOpen = function toggleOpen(e) { e.stopPropagation(); if (isOpenControlled) {
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({ id: id, open: !open });
+}
+else {
+    setOpenState(function (prev) { return !prev; });
+} }; var handleRowClick = function handleRowClick(e) { if (onRowClick) {
     onRowClick(id);
 }
 else if (ExpandedContent) {
     toggleOpen(e);
-} }; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(MUITableRow, { className: C(_defineProperty2(_defineProperty2({}, classes.expandedRow, open), classes.clickable, !!onRowClick), classes.tableRow), onClick: handleRowClick, style: { width: 'fit-content' } }, ExpandedContent && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.expandMoreCell, _defineProperty2({}, classes.cellWithExpandedContent, !!ExpandedContent)), classes: classes }, /*#__PURE__*/ wn.createElement(IconButton$1, { "aria-label": "expand row", onClick: toggleOpen, size: "small" }, ExpandedContent && /*#__PURE__*/ wn.createElement(default_1$1, { className: open ? classes.openChevron : undefined })))), itemRenderer.map(function (column) { return /*#__PURE__*/ wn.createElement(TableCell, { TypographyComponent: Typography, className: C(_defineProperty2({}, classes.cellWithExpandedContent, !!ExpandedContent)), classes: classes, key: "row-".concat(id, "-col-").concat(String(column.title)) }, column.getValue(item)); }), getItemActionProps && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.tableCell, classes.tableActionsCell), classes: classes }, /*#__PURE__*/ wn.createElement(TableActions, Object.assign({}, getItemActionProps(item)))))), ExpandedContent && ( /*#__PURE__*/wn.createElement(MUITableRow, null, /*#__PURE__*/ wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.expandedRow, classes.expandedContentCell), classes: classes, colSpan: itemRenderer.length + 1 }, /*#__PURE__*/ wn.createElement(Collapse$1, { "in": open, timeout: "auto", unmountOnExit: true }, /*#__PURE__*/ wn.createElement("div", { className: "".concat(EXPANDED_CONTENT_CLASSNAME, " ").concat(classes.expandedContentContainer), style: { width: tableWidth } }, /*#__PURE__*/ wn.createElement(ExpandedContent, { data: item }))))))); };
-var TableCore = function TableCore(_ref68) { var ExpandedContent = _ref68.ExpandedContent, itemRenderer = _ref68.itemRenderer, items = _ref68.items, rowKeyExtractor = _ref68.rowKeyExtractor, onRowClick = _ref68.onRowClick, getItemActionProps = _ref68.getItemActionProps, classes = _ref68.classes, TableActions = _ref68.TableActionsComponent, Typography = _ref68.TypographyComponent, disableBottomBorder = _ref68.disableBottomBorder; var containerId = useShortId(TABLE_CONTAINER_ID); var _h53 = h$4(), _h54 = _slicedToArray2(_h53, 2), setTableWidth = _h54[1]; p$3(function () { var _a; var container = document.getElementById(containerId); var originalTableWidth = (_a = document.querySelector("#".concat(containerId, " thead"))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; function handleScroll() { if (!originalTableWidth || !container)
+} }; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(MUITableRow, { className: C(_defineProperty2(_defineProperty2({}, classes.expandedRow, open), classes.clickable, !!onRowClick), classes.tableRow), onClick: handleRowClick, style: { width: 'fit-content' } }, ExpandedContent && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.expandMoreCell, _defineProperty2({}, classes.cellWithExpandedContent, !!ExpandedContent)), classes: classes }, /*#__PURE__*/ wn.createElement(IconButton$1, { "aria-label": "expand row", onClick: toggleOpen, size: "small" }, ExpandedContent && /*#__PURE__*/ wn.createElement(default_1$7, { className: open ? classes.openChevron : undefined })))), itemRenderer.map(function (column) { return /*#__PURE__*/ wn.createElement(TableCell, { TypographyComponent: Typography, className: C(_defineProperty2({}, classes.cellWithExpandedContent, !!ExpandedContent)), classes: classes, key: "row-".concat(id, "-col-").concat(String(column.title)) }, column.getValue(item)); }), getItemActionProps && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.tableCell, classes.tableActionsCell), classes: classes }, /*#__PURE__*/ wn.createElement(TableActions, Object.assign({}, getItemActionProps(item)))))), ExpandedContent && ( /*#__PURE__*/wn.createElement(MUITableRow, null, /*#__PURE__*/ wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.expandedRow, classes.expandedContentCell), classes: classes, colSpan: itemRenderer.length + 1 }, /*#__PURE__*/ wn.createElement(Collapse$1, { "in": open, timeout: "auto", unmountOnExit: true }, /*#__PURE__*/ wn.createElement("div", { className: "".concat(EXPANDED_CONTENT_CLASSNAME, " ").concat(classes.expandedContentContainer), style: { width: tableWidth } }, /*#__PURE__*/ wn.createElement(ExpandedContent, { data: item }))))))); };
+var TableCore = function TableCore(_ref70) { var ExpandedContent = _ref70.ExpandedContent, itemRenderer = _ref70.itemRenderer, items = _ref70.items, rowKeyExtractor = _ref70.rowKeyExtractor, onRowClick = _ref70.onRowClick, getItemActionProps = _ref70.getItemActionProps, classes = _ref70.classes, TableActions = _ref70.TableActionsComponent, Typography = _ref70.TypographyComponent, disableBottomBorder = _ref70.disableBottomBorder, _ref70$titleVariant = _ref70.titleVariant, titleVariant = _ref70$titleVariant === void 0 ? 'body2' : _ref70$titleVariant, onOpenChange = _ref70.onOpenChange, openIds = _ref70.openIds; var containerId = useShortId(TABLE_CONTAINER_ID); var _h53 = h$4(), _h54 = _slicedToArray2(_h53, 2), setTableWidth = _h54[1]; p$3(function () { var _a; var container = document.getElementById(containerId); var originalTableWidth = (_a = document.querySelector("#".concat(containerId, " thead"))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; function handleScroll() { if (!originalTableWidth || !container)
     return; var tableWidth = container.getBoundingClientRect().width; if (originalTableWidth - container.scrollLeft + 16 >= tableWidth) {
     leftAlignExpandedContent(containerId);
-} } function handleResize() { var _a; setTableWidth((_a = container === null || container === void 0 ? void 0 : container.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0); handleScroll(); } handleResize(); window.addEventListener('resize', handleResize); container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll); return function () { container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll); window.removeEventListener('resize', handleResize); }; }, [containerId]); validateRowKey(items, rowKeyExtractor); return /*#__PURE__*/ wn.createElement(TableContainer$1, { id: containerId }, /*#__PURE__*/ wn.createElement(MUITable, { className: C(_defineProperty2(_defineProperty2({}, classes.tableWithExpandedContent, !!ExpandedContent), classes.tableWithActions, !!getItemActionProps)) }, /*#__PURE__*/ wn.createElement(TableHead$1, null, /*#__PURE__*/ wn.createElement(MUITableRow, null, ExpandedContent && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.expandMoreCell, classes.tableHeader), classes: classes }, /*#__PURE__*/ wn.createElement(wn.Fragment, null))), itemRenderer.map(function (column) { return /*#__PURE__*/ wn.createElement(TableCell, { TypographyComponent: Typography, className: classes.tableHeader, classes: classes, key: "col-header-".concat(String(column.title)) }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, column.title)); }), getItemActionProps && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.tableCell, classes.tableActionsCell, classes.tableHeader, classes.tableHeaderActionsCell), classes: classes }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, TABLE_ACTIONS_HEADER))))), /*#__PURE__*/ wn.createElement(TableBody$1, null, items.map(function (item) { var id = rowKeyExtractor ? rowKeyExtractor(item) : item.id; return /*#__PURE__*/ wn.createElement(TableRow, { ExpandedContent: ExpandedContent, TableActionsComponent: TableActions, TypographyComponent: Typography, classes: classes, getItemActionProps: getItemActionProps, id: id, item: item, itemRenderer: itemRenderer, key: id, onRowClick: onRowClick, tableContainerId: containerId, disableBottomBorder: disableBottomBorder }); })))); };
-var useStyles$6 = makeTableStyles(function (theme) { return { tableCell: { borderBottomColor: theme.styleConfig.colors.subtle, color: theme.styleConfig.colors.primary }, tableActionsCell: { minWidth: 0 }, tableHeaderActionsCell: { '& > *': { position: 'absolute', left: -10000, top: 'auto', width: 1, height: 1, overflow: 'hidden' } }, tableRow: function tableRow(_ref69) { var disableBottomBorder = _ref69.disableBottomBorder; return disableBottomBorder ? { '&:last-child th, &:last-child td': { borderBottom: 0 } } : {}; }, expandMoreCell: { padding: 0, width: theme.spacing(2) }, expandedContentContainer: { padding: theme.spacing(1, 2, 1, 2) } }; });
+} } function handleResize() { var _a; setTableWidth((_a = container === null || container === void 0 ? void 0 : container.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0); handleScroll(); } handleResize(); window.addEventListener('resize', handleResize); container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll); return function () { container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll); window.removeEventListener('resize', handleResize); }; }, [containerId]); validateRowKey(items, rowKeyExtractor); return /*#__PURE__*/ wn.createElement(TableContainer$1, { id: containerId }, /*#__PURE__*/ wn.createElement(MUITable, { className: C(_defineProperty2(_defineProperty2({}, classes.tableWithExpandedContent, !!ExpandedContent), classes.tableWithActions, !!getItemActionProps)) }, /*#__PURE__*/ wn.createElement(TableHead$1, null, /*#__PURE__*/ wn.createElement(MUITableRow, null, ExpandedContent && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.expandMoreCell, classes.tableHeader), classes: classes }, /*#__PURE__*/ wn.createElement(wn.Fragment, null))), itemRenderer.map(function (column) { var _a; var renderTitle = (_a = column.renderTitle) !== null && _a !== void 0 ? _a : function () { return column.title; }; return /*#__PURE__*/ wn.createElement(TableCell, { TypographyComponent: Typography, className: classes.tableHeader, classes: classes, key: "col-header-".concat(String(column.title)) }, /*#__PURE__*/ wn.createElement(Typography, { variant: titleVariant, color: titleVariant === 'h4' ? 'primary' : 'secondary' }, renderTitle())); }), getItemActionProps && ( /*#__PURE__*/wn.createElement(TableCell, { TypographyComponent: Typography, className: C(classes.tableCell, classes.tableActionsCell, classes.tableHeader), classes: classes }, /*#__PURE__*/ wn.createElement(Typography, { variant: titleVariant, color: titleVariant === 'h4' ? 'primary' : 'secondary' }, TABLE_ACTIONS_HEADER))))), /*#__PURE__*/ wn.createElement(TableBody$1, null, items.map(function (item) { var id = rowKeyExtractor ? rowKeyExtractor(item) : item.id; var isOpen = openIds === null || openIds === void 0 ? void 0 : openIds.has(id); return /*#__PURE__*/ wn.createElement(TableRow, { ExpandedContent: ExpandedContent, TableActionsComponent: TableActions, TypographyComponent: Typography, classes: classes, getItemActionProps: getItemActionProps, id: id, item: item, itemRenderer: itemRenderer, key: id, onRowClick: onRowClick, tableContainerId: containerId, disableBottomBorder: disableBottomBorder, isOpen: isOpen, onOpenChange: onOpenChange }); })))); };
+var useStyles$6 = makeTableStyles(function (theme) { return { tableCell: { borderBottomColor: theme.styleConfig.colors.subtle, color: theme.styleConfig.colors.primary }, tableActionsCell: { minWidth: 0, '&$tableHeader': { textAlign: 'center' } }, tableRow: function tableRow(_ref71) { var disableBottomBorder = _ref71.disableBottomBorder; return disableBottomBorder ? { '&:last-child th, &:last-child td': { borderBottom: 0 } } : {}; }, expandMoreCell: { padding: theme.spacing(0.5, 0), width: theme.spacing(2) }, expandedContentContainer: { padding: theme.spacing(1, 2, 1, 2) } }; });
 var Table = function Table(props) { var classes = useStyles$6(props); return /*#__PURE__*/ wn.createElement(TableCore, Object.assign({}, props, { TableActionsComponent: TableActions, TypographyComponent: Typography, classes: classes })); };
-var TagList = function TagList(_ref70) { var tags = _ref70.tags; return /*#__PURE__*/ wn.createElement("ul", { style: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', gap: 8 } }, tags.map(function (tag) { return /*#__PURE__*/ wn.createElement("li", { key: tag }, /*#__PURE__*/ wn.createElement(Tag, null, tag)); })); };
-var RoleAssignmentsSectionBody = function RoleAssignmentsSectionBody(_ref71) { var connection = _ref71.connection, localState = _ref71.localState, setLocalState = _ref71.setLocalState, remoteState = _ref71.remoteState; var _a, _b; var _useSettingsContainer3 = useSettingsContainer(), editing = _useSettingsContainer3.editing; var _ref72 = editing ? localState : remoteState, connectionRoleIds = _ref72.connectionRoleIds, groupedRoles = _ref72.groupedRoles; var hasGroupAttributeMapping = !!((_a = connection.attribute_mapping) === null || _a === void 0 ? void 0 : _a.groups); var roles = (_b = useB2BInternals().bootstrap.getSync().rbacPolicy) === null || _b === void 0 ? void 0 : _b.roles; var rolesSelectItems = F$3(function () { var _a; return (_a = roles === null || roles === void 0 ? void 0 : roles.map(function (_ref73) { var role_id = _ref73.role_id; return role_id; })) !== null && _a !== void 0 ? _a : []; }, [roles]); var handleAddGroupRole = T$2(function () { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { groupedRoles: [].concat(_toConsumableArray2(state.groupedRoles), [{ group: '', roleIds: [] }]) }); }); }, [setLocalState]); var handleConnectionRolesChange = T$2(function (value) { return setLocalState(function (state) { return Object.assign(Object.assign({}, state), { connectionRoleIds: value }); }); }, [setLocalState]); var _getIdpInfo = getIdpInfo(connection.identity_provider, 'saml'), idp = _getIdpInfo.idp; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Connection Roles", tooltipText: "Connection Roles are automatically assigned to all Members who authenticate via this SSO connection." }, editing ? ( /*#__PURE__*/wn.createElement(Autocomplete, { selectItems: rolesSelectItems, value: connectionRoleIds, onChange: handleConnectionRolesChange })) : connection.saml_connection_implicit_role_assignments.length > 0 ? ( /*#__PURE__*/wn.createElement(TagList, { tags: connection.saml_connection_implicit_role_assignments.map(function (_ref74) { var role_id = _ref74.role_id; return role_id; }) })) : ( /*#__PURE__*/wn.createElement(Typography, null, "No roles assigned."))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Group Roles", tooltipText: "If a Member is part of a group, they will be assigned both the Connection Role and their Group Role." }, hasGroupAttributeMapping ? editing ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, groupedRoles.map(function (_ref75, i) { var group = _ref75.group, roleIds = _ref75.roleIds; return /*#__PURE__*/ wn.createElement(FlexBox, { key: i, alignItems: "stretch", justifyContent: "space-between" }, /*#__PURE__*/ wn.createElement(Input$1, { label: "Group name", fullWidth: true, value: group, onChange: function onChange(value) { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { groupedRoles: state.groupedRoles.map(function (item, index) { return index === i ? Object.assign(Object.assign({}, item), { group: value }) : item; }) }); }); } }), /*#__PURE__*/ wn.createElement(Autocomplete, { label: "Group Role", selectItems: rolesSelectItems, value: roleIds, fullWidth: true, onChange: function onChange(values) { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { groupedRoles: state.groupedRoles.map(function (item, index) { return index === i ? Object.assign(Object.assign({}, item), { roleIds: values }) : item; }) }); }); } })); }), /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(Add, null), onClick: handleAddGroupRole }, "Add group roles"))) : groupedRoles.length > 0 ? ( /*#__PURE__*/wn.createElement(Table, { items: groupedRoles, rowKeyExtractor: roleAssignmentKeyExtractor, itemRenderer: roleAssignmentItemRenderer })) : ( /*#__PURE__*/wn.createElement(Typography, null, "No roles assigned.")) : ( /*#__PURE__*/wn.createElement(Typography, null, "Add a \"groups\" key in the ", idp.attributeMappingLabel, " first to assign group roles.")))); };
-var roleAssignmentKeyExtractor = function roleAssignmentKeyExtractor(_ref76) { var group = _ref76.group; return group; };
-var roleAssignmentItemRenderer = [{ title: 'Group', getValue: function getValue(_ref77) { var group = _ref77.group; return /*#__PURE__*/ wn.createElement(Typography, { color: "secondary" }, group); } }, { title: 'Role', getValue: function getValue(_ref78) { var roleIds = _ref78.roleIds; return /*#__PURE__*/ wn.createElement(TagList, { tags: roleIds }); } }];
-var RoleAssignmentsSection = function RoleAssignmentsSection(_ref79) { var canUpdateConnection = _ref79.canUpdateConnection, connection = _ref79.connection; var connectionRoleIds = F$3(function () { return connection.saml_connection_implicit_role_assignments.map(function (_ref80) { var role_id = _ref80.role_id; return role_id; }); }, [connection.saml_connection_implicit_role_assignments]); var groupedRoles = F$3(function () { return Object.values(connection.saml_group_implicit_role_assignments.reduce(function (acc, _ref81) { var group = _ref81.group, role_id = _ref81.role_id; if (!acc[group]) {
+var TagList = function TagList(_ref72) { var tags = _ref72.tags; return /*#__PURE__*/ wn.createElement("ul", { style: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: 8 } }, tags.map(function (tag) { return /*#__PURE__*/ wn.createElement("li", { key: tag }, /*#__PURE__*/ wn.createElement(Tag, { size: "small" }, tag)); })); };
+var RoleAssignmentsSectionBody = function RoleAssignmentsSectionBody(_ref73) { var connection = _ref73.connection, localState = _ref73.localState, setLocalState = _ref73.setLocalState, remoteState = _ref73.remoteState; var _a, _b; var _useSettingsContainer3 = useSettingsContainer(), editing = _useSettingsContainer3.editing; var _ref74 = editing ? localState : remoteState, connectionRoleIds = _ref74.connectionRoleIds, groupedRoles = _ref74.groupedRoles; var hasGroupAttributeMapping = !!((_a = connection.attribute_mapping) === null || _a === void 0 ? void 0 : _a.groups); var roles = (_b = useB2BInternals().bootstrap.getSync().rbacPolicy) === null || _b === void 0 ? void 0 : _b.roles; var rolesSelectItems = F$3(function () { var _a; return (_a = roles === null || roles === void 0 ? void 0 : roles.map(function (_ref75) { var role_id = _ref75.role_id; return role_id; })) !== null && _a !== void 0 ? _a : []; }, [roles]); var handleAddGroupRole = T$2(function () { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { groupedRoles: [].concat(_toConsumableArray2(state.groupedRoles), [{ group: '', roleIds: [] }]) }); }); }, [setLocalState]); var handleConnectionRolesChange = T$2(function (value) { return setLocalState(function (state) { return Object.assign(Object.assign({}, state), { connectionRoleIds: value }); }); }, [setLocalState]); var _getIdpInfo = getIdpInfo(connection.identity_provider, 'saml'), idp = _getIdpInfo.idp; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Connection Roles", tooltipText: "Connection Roles are automatically assigned to all Members who authenticate via this SSO connection." }, editing ? ( /*#__PURE__*/wn.createElement(Autocomplete, { selectItems: rolesSelectItems, value: connectionRoleIds, onChange: handleConnectionRolesChange })) : connection.saml_connection_implicit_role_assignments.length > 0 ? ( /*#__PURE__*/wn.createElement(TagList, { tags: connection.saml_connection_implicit_role_assignments.map(function (_ref76) { var role_id = _ref76.role_id; return role_id; }) })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, "No roles assigned."))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Group Roles", tooltipText: "If a Member is part of a group, they will be assigned both the Connection Role and their Group Role." }, hasGroupAttributeMapping ? editing ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, groupedRoles.map(function (_ref77, i) { var group = _ref77.group, roleIds = _ref77.roleIds; return /*#__PURE__*/ wn.createElement(FlexBox, { key: i, alignItems: "stretch", justifyContent: "space-between" }, /*#__PURE__*/ wn.createElement(Input$1, { label: "Group name", fullWidth: true, value: group, onChange: function onChange(value) { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { groupedRoles: state.groupedRoles.map(function (item, index) { return index === i ? Object.assign(Object.assign({}, item), { group: value }) : item; }) }); }); } }), /*#__PURE__*/ wn.createElement(Autocomplete, { label: "Group Role", selectItems: rolesSelectItems, value: roleIds, fullWidth: true, onChange: function onChange(values) { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { groupedRoles: state.groupedRoles.map(function (item, index) { return index === i ? Object.assign(Object.assign({}, item), { roleIds: values }) : item; }) }); }); } })); }), /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(Add$1, null), onClick: handleAddGroupRole }, "Add group roles"))) : groupedRoles.length > 0 ? ( /*#__PURE__*/wn.createElement(Table, { items: groupedRoles, rowKeyExtractor: roleAssignmentKeyExtractor, itemRenderer: roleAssignmentItemRenderer })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, "No roles assigned.")) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, "Add a \"groups\" key in the ", idp.attributeMappingLabel, " first to assign group roles.")))); };
+var roleAssignmentKeyExtractor = function roleAssignmentKeyExtractor(_ref78) { var group = _ref78.group; return group; };
+var roleAssignmentItemRenderer = [{ title: 'Group', getValue: function getValue(_ref79) { var group = _ref79.group; return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2", color: "secondary" }, group); } }, { title: 'Role', getValue: function getValue(_ref80) { var roleIds = _ref80.roleIds; return /*#__PURE__*/ wn.createElement(TagList, { tags: roleIds }); } }];
+var RoleAssignmentsSection = function RoleAssignmentsSection(_ref81) { var canUpdateConnection = _ref81.canUpdateConnection, connection = _ref81.connection; var connectionRoleIds = F$3(function () { return connection.saml_connection_implicit_role_assignments.map(function (_ref82) { var role_id = _ref82.role_id; return role_id; }); }, [connection.saml_connection_implicit_role_assignments]); var groupedRoles = F$3(function () { return Object.values(connection.saml_group_implicit_role_assignments.reduce(function (acc, _ref83) { var group = _ref83.group, role_id = _ref83.role_id; if (!acc[group]) {
     acc[group] = { group: group, roleIds: [] };
 } acc[group].roleIds.push(role_id); return acc; }, {})); }, [connection.saml_group_implicit_role_assignments]); var remoteState = F$3(function () { return { connectionRoleIds: connectionRoleIds, groupedRoles: groupedRoles }; }, [connectionRoleIds, groupedRoles]); var _useFormState3 = useFormState({ remoteState: remoteState }), localState = _useFormState3.localState, setLocalState = _useFormState3.setLocalState, editing = _useFormState3.editing, handleSetEditing = _useFormState3.handleSetEditing; var _useMutateSamlConnect = useMutateSamlConnection(), mutate = _useMutateSamlConnect.mutate; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee12() { var baseOptions, mutatedProperties, filteredGroupRoles; return _regeneratorRuntime().wrap(function _callee12$(_context13) { while (1)
     switch (_context13.prev = _context13.next) {
@@ -9819,9 +9908,9 @@ var RoleAssignmentsSection = function RoleAssignmentsSection(_ref79) { var canUp
             if (!deepEqual(remoteState.connectionRoleIds, localState.connectionRoleIds)) {
                 mutatedProperties.saml_connection_implicit_role_assignments = localState.connectionRoleIds.map(function (role_id) { return { role_id: role_id }; });
             }
-            filteredGroupRoles = localState.groupedRoles.filter(function (_ref82) { var group = _ref82.group, roleIds = _ref82.roleIds; return group && roleIds.length > 0; });
+            filteredGroupRoles = localState.groupedRoles.filter(function (_ref84) { var group = _ref84.group, roleIds = _ref84.roleIds; return group && roleIds.length > 0; });
             if (!deepEqual(remoteState.groupedRoles, filteredGroupRoles)) {
-                mutatedProperties.saml_group_implicit_role_assignments = filteredGroupRoles.flatMap(function (_ref83) { var group = _ref83.group, roleIds = _ref83.roleIds; return roleIds.map(function (role_id) { return { group: group, role_id: role_id }; }); });
+                mutatedProperties.saml_group_implicit_role_assignments = filteredGroupRoles.flatMap(function (_ref85) { var group = _ref85.group, roleIds = _ref85.roleIds; return roleIds.map(function (role_id) { return { group: group, role_id: role_id }; }); });
             }
             if (!(Object.keys(mutatedProperties).length > 0)) {
                 _context13.next = 7;
@@ -9832,27 +9921,30 @@ var RoleAssignmentsSection = function RoleAssignmentsSection(_ref79) { var canUp
         case 8:
         case "end": return _context13.stop();
     } }, _callee12); })); }, [connection.connection_id, localState.connectionRoleIds, localState.groupedRoles, mutate, remoteState.connectionRoleIds, remoteState.groupedRoles]); var _useSsoRouterControll3 = useSsoRouterController(), useBlockNavigation = _useSsoRouterControll3.useBlockNavigation; return /*#__PURE__*/ wn.createElement(SettingsContainer, { title: "Role assignments", hasCTA: canUpdateConnection, onSave: handleSave, useBlockNavigation: useBlockNavigation, editing: editing, setEditing: handleSetEditing }, /*#__PURE__*/ wn.createElement(RoleAssignmentsSectionBody, { connection: connection, localState: localState, remoteState: remoteState, setLocalState: setLocalState })); };
-var SSOConnectionDetailsScreen = function SSOConnectionDetailsScreen(_ref84) { var connectionId = _ref84.connectionId; var _a, _b; var _useSsoRouterControll4 = useSsoRouterController(), navigate = _useSsoRouterControll4.navigate; var _useRbac5 = useRbac('stytch.sso', 'get'), canGetConnection = _useRbac5.data; var _useRbac6 = useRbac('stytch.sso', 'delete'), canDeleteConnection = _useRbac6.data; var _useRbac7 = useRbac('stytch.sso', 'update'), canUpdateConnection = _useRbac7.data; var _useSsoConnections = useSsoConnections(!!canGetConnection), connections = _useSsoConnections.data, isLoading = _useSsoConnections.isLoading; var _useOrgInfo2 = useOrgInfo(), orgInfo = _useOrgInfo2.data; var defaultConnectionId = orgInfo === null || orgInfo === void 0 ? void 0 : orgInfo.sso_default_connection_id; var defaultConnectionName = F$3(function () { var _a; return connections ? (_a = [].concat(_toConsumableArray2(connections.oidc_connections), _toConsumableArray2(connections.saml_connections)).find(function (connection) { return connection.connection_id === defaultConnectionId; })) === null || _a === void 0 ? void 0 : _a.display_name : undefined; }, [connections, defaultConnectionId]); var connection = F$3(function () { var _a, _b; var oidcMatch = (_a = connections === null || connections === void 0 ? void 0 : connections.oidc_connections) === null || _a === void 0 ? void 0 : _a.find(function (_ref85) { var connection_id = _ref85.connection_id; return connection_id === connectionId; }); if (oidcMatch) {
+var SSOConnectionDetailsScreen = function SSOConnectionDetailsScreen(_ref86) { var connectionId = _ref86.connectionId; var _a, _b; var _useSsoRouterControll4 = useSsoRouterController(), navigate = _useSsoRouterControll4.navigate; var _useRbac5 = useRbac('stytch.sso', 'get'), canGetConnection = _useRbac5.data; var _useRbac6 = useRbac('stytch.sso', 'delete'), canDeleteConnection = _useRbac6.data; var _useRbac7 = useRbac('stytch.sso', 'update'), canUpdateConnection = _useRbac7.data; var _useSsoConnections = useSsoConnections(!!canGetConnection), connections = _useSsoConnections.data, isLoading = _useSsoConnections.isLoading; var _useOrgInfo2 = useOrgInfo(), orgInfo = _useOrgInfo2.data; var defaultConnectionId = orgInfo === null || orgInfo === void 0 ? void 0 : orgInfo.sso_default_connection_id; var defaultConnectionName = F$3(function () { var _a; return connections ? (_a = [].concat(_toConsumableArray2(connections.oidc_connections), _toConsumableArray2(connections.saml_connections)).find(function (connection) { return connection.connection_id === defaultConnectionId; })) === null || _a === void 0 ? void 0 : _a.display_name : undefined; }, [connections, defaultConnectionId]); var connection = F$3(function () { var _a, _b; var oidcMatch = (_a = connections === null || connections === void 0 ? void 0 : connections.oidc_connections) === null || _a === void 0 ? void 0 : _a.find(function (_ref87) { var connection_id = _ref87.connection_id; return connection_id === connectionId; }); if (oidcMatch) {
     return Object.assign(Object.assign({}, oidcMatch), { connectionType: 'oidc' });
-} var samlMatch = (_b = connections === null || connections === void 0 ? void 0 : connections.saml_connections) === null || _b === void 0 ? void 0 : _b.find(function (_ref86) { var connection_id = _ref86.connection_id; return connection_id === connectionId; }); if (samlMatch) {
+} var samlMatch = (_b = connections === null || connections === void 0 ? void 0 : connections.saml_connections) === null || _b === void 0 ? void 0 : _b.find(function (_ref88) { var connection_id = _ref88.connection_id; return connection_id === connectionId; }); if (samlMatch) {
     return Object.assign(Object.assign({}, samlMatch), { connectionType: 'saml' });
 } return null; }, [connectionId, connections === null || connections === void 0 ? void 0 : connections.oidc_connections, connections === null || connections === void 0 ? void 0 : connections.saml_connections]); var connectionType = connection === null || connection === void 0 ? void 0 : connection.connectionType; var connectionName = connection === null || connection === void 0 ? void 0 : connection.display_name; var isDefaultConnection = (connection === null || connection === void 0 ? void 0 : connection.connection_id) === defaultConnectionId; var isOnlyConnection = ((_a = connections === null || connections === void 0 ? void 0 : connections.oidc_connections.length) !== null && _a !== void 0 ? _a : 0) + ((_b = connections === null || connections === void 0 ? void 0 : connections.saml_connections.length) !== null && _b !== void 0 ? _b : 0) === 1; var _useDeleteConnection = useDeleteConnection({ onConfirm: function onConfirm() { navigate({ screen: 'connectionsList' }); } }), handleRequestDelete = _useDeleteConnection.handleRequestDelete, modalProps = _useDeleteConnection.modalProps; var handleDeleteClick = T$2(function () { if (connectionId && connectionName) {
     handleRequestDelete({ id: connectionId, displayName: connectionName });
-} }, [connectionId, connectionName, handleRequestDelete]); return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { navigate({ screen: 'connectionsList' }); }, startIcon: /*#__PURE__*/ wn.createElement(ChevronLeft, null) }, "Back to all SSO connections"), /*#__PURE__*/ wn.createElement(DeleteConfirmModal, Object.assign({}, modalProps)), connection ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", justifyContent: "flex-start", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, connectionName), isDefaultConnection && /*#__PURE__*/ wn.createElement(Tag, { size: "sm" }, "Default")), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(OrganizationUpdatesSection, { connection: connection, defaultConnectionName: defaultConnectionName, isDefaultConnection: isDefaultConnection }), connectionType === 'saml' && ( /*#__PURE__*/wn.createElement(RoleAssignmentsSection, { canUpdateConnection: !!canUpdateConnection, connection: connection })), /*#__PURE__*/ wn.createElement(DetailsSection, { canUpdateConnection: !!canUpdateConnection, connection: connection })), canDeleteConnection && (!isDefaultConnection || isOnlyConnection) && ( /*#__PURE__*/wn.createElement(Button, { variant: "ghost", warning: true, onClick: handleDeleteClick }, "Delete connection")))) : isLoading && /*#__PURE__*/ wn.createElement(PageLoadingIndicator, null)); };
-var ActionMenuItem = function ActionMenuItem(_a) { var children = _a.children, onClick = _a.onClick, onClose = _a.onClose, color = _a.color, icon = _a.icon, item = _a.item, rest = __rest(_a, ["children", "onClick", "onClose", "color", "icon", "item"]); var handleClick = T$2(function () { onClick(item); onClose(); }, [item, onClick, onClose]); return /*#__PURE__*/ wn.createElement(MenuItem$2, Object.assign({}, rest, { disableRipple: true, onClick: handleClick }), /*#__PURE__*/ wn.createElement(Typography, { color: color }, /*#__PURE__*/ wn.createElement(FlexBox, null, icon, children))); };
-var anchorOrigin = { horizontal: 'center', vertical: 'bottom' };
-var transformOrigin = { horizontal: 'right', vertical: 'top' };
-var ActionMenu = function ActionMenu(_ref87) { var actions = _ref87.actions, item = _ref87.item, idPrefix = _ref87.idPrefix; var _h55 = h$4(), _h56 = _slicedToArray2(_h55, 2), anchorEl = _h56[0], setAnchorEl = _h56[1]; var handleClose = T$2(function () { setAnchorEl(undefined); }, []); var handleOpen = T$2(function (e) { setAnchorEl(e.currentTarget); }, []); var id = useShortId(idPrefix); var children = F$3(function () { return actions.map(function (_ref88) { var key = _ref88.key, label = _ref88.label, onClick = _ref88.onClick, icon = _ref88.icon, isDangerous = _ref88.isDangerous, _ref88$isVisible = _ref88.isVisible, isVisible = _ref88$isVisible === void 0 ? true : _ref88$isVisible; if (!isVisible || typeof isVisible === 'function' && !isVisible(item)) {
+} }, [connectionId, connectionName, handleRequestDelete]); return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { navigate({ screen: 'connectionsList' }); }, startIcon: /*#__PURE__*/ wn.createElement(ChevronLeft$1, null) }, "Back to all SSO connections"), /*#__PURE__*/ wn.createElement(DeleteConfirmModal, Object.assign({}, modalProps)), connection ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", justifyContent: "flex-start", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, connectionName), isDefaultConnection && /*#__PURE__*/ wn.createElement(Tag, { size: "small" }, "Default")), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(OrganizationUpdatesSection, { connection: connection, defaultConnectionName: defaultConnectionName, isDefaultConnection: isDefaultConnection }), connectionType === 'saml' && ( /*#__PURE__*/wn.createElement(RoleAssignmentsSection, { canUpdateConnection: !!canUpdateConnection, connection: connection })), /*#__PURE__*/ wn.createElement(DetailsSection, { canUpdateConnection: !!canUpdateConnection, connection: connection })), canDeleteConnection && (!isDefaultConnection || isOnlyConnection) && ( /*#__PURE__*/wn.createElement(Button, { variant: "ghost", warning: true, onClick: handleDeleteClick }, "Delete connection")))) : isLoading && /*#__PURE__*/ wn.createElement(PageLoadingIndicator, null)); };
+var anchorOrigin$1 = { horizontal: 'center', vertical: 'bottom' };
+var transformOrigin$1 = { horizontal: 'right', vertical: 'top' };
+var useActionMenuStyles = makeStyles(function (theme) { return { gutters: _defineProperty2({}, "&.".concat(classNamePrefix, "MuiListItem-gutters"), { padding: theme.spacing(1) }) }; });
+var ActionMenuItem = function ActionMenuItem(_a) { var children = _a.children, onClick = _a.onClick, onClose = _a.onClose, color = _a.color, icon = _a.icon, item = _a.item, rest = __rest(_a, ["children", "onClick", "onClose", "color", "icon", "item"]); var classes = useActionMenuStyles(); var handleClick = T$2(function () { onClick(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, [item, onClick, onClose]); return /*#__PURE__*/ wn.createElement(MenuItem$2, Object.assign({}, rest, { disableRipple: true, onClick: handleClick, classes: classes }), /*#__PURE__*/ wn.createElement(Typography, { variant: "body2", color: color }, /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center" }, icon, children))); };
+var useStyles$5 = makeStyles(function () { return { icon: { '& svg': { height: 16, width: 16 } } }; });
+var IconButtonMenu = function IconButtonMenu(_ref89) { var actions = _ref89.actions, anchorElProp = _ref89.anchorEl, _ref89$closeOnClick = _ref89.closeOnClick, closeOnClick = _ref89$closeOnClick === void 0 ? true : _ref89$closeOnClick, icon = _ref89.icon, item = _ref89.item, idPrefix = _ref89.idPrefix, _ref89$menuAnchorOrig = _ref89.menuAnchorOrigin, menuAnchorOrigin = _ref89$menuAnchorOrig === void 0 ? anchorOrigin$1 : _ref89$menuAnchorOrig, _ref89$menuTransformO = _ref89.menuTransformOrigin, menuTransformOrigin = _ref89$menuTransformO === void 0 ? transformOrigin$1 : _ref89$menuTransformO, onClose = _ref89.onClose, onOpen = _ref89.onOpen; var _h55 = h$4(), _h56 = _slicedToArray2(_h55, 2), anchorEl = _h56[0], setAnchorEl = _h56[1]; var handleClose = T$2(function () { setAnchorEl(undefined); onClose === null || onClose === void 0 ? void 0 : onClose(); }, [onClose]); var handleOpen = T$2(function (e) { onOpen === null || onOpen === void 0 ? void 0 : onOpen(); setAnchorEl(anchorElProp !== null && anchorElProp !== void 0 ? anchorElProp : e.currentTarget); }, [anchorElProp, onOpen]); var id = useShortId(idPrefix); var children = F$3(function () { return actions.map(function (_ref90) { var key = _ref90.key, label = _ref90.label, onClick = _ref90.onClick, icon = _ref90.icon, isDangerous = _ref90.isDangerous, _ref90$isVisible = _ref90.isVisible, isVisible = _ref90$isVisible === void 0 ? true : _ref90$isVisible; if (!isVisible || typeof isVisible === 'function' && !isVisible(item)) {
     return null;
-} return /*#__PURE__*/ wn.createElement(ActionMenuItem, { key: key, item: item, onClick: onClick, onClose: handleClose, color: isDangerous ? 'error' : undefined, icon: icon }, label); }); }, [actions, handleClose, item]); var isOpen = !!anchorEl; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(IconButton$1, { disableTouchRipple: true, "aria-label": "actions", color: "inherit", onClick: handleOpen, "aria-controls": id, "aria-haspopup": true }, /*#__PURE__*/ wn.createElement(MoreVert, null)), /*#__PURE__*/ wn.createElement(Menu$1, { id: id, open: isOpen, anchorEl: anchorEl, getContentAnchorEl: null, variant: "menu", anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, onClose: handleClose }, children)); };
-var useActionMenu = function useActionMenu(_ref89) { var actions = _ref89.actions, idPrefix = _ref89.idPrefix; var getItemActionProps = T$2(function (item) { var hasVisibleActions = actions.some(function (_ref90) { var _ref90$isVisible = _ref90.isVisible, isVisible = _ref90$isVisible === void 0 ? true : _ref90$isVisible; return typeof isVisible === 'function' ? isVisible(item) : isVisible; }); if (!hasVisibleActions) {
+} return /*#__PURE__*/ wn.createElement(ActionMenuItem, { key: key, item: item, onClick: onClick, onClose: closeOnClick ? handleClose : undefined, color: isDangerous ? 'error' : undefined, icon: icon }, label); }); }, [actions, closeOnClick, handleClose, item]); var isOpen = !!anchorEl; var classes = useStyles$5(); return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(IconButton$1, { disableTouchRipple: true, "aria-label": "actions", color: "inherit", onClick: handleOpen, "aria-controls": id, "aria-haspopup": true, size: "small" }, icon), /*#__PURE__*/ wn.createElement(Menu$1, { id: id, open: isOpen, anchorEl: anchorEl, getContentAnchorEl: null, variant: "menu", anchorOrigin: menuAnchorOrigin, transformOrigin: menuTransformOrigin, onClose: handleClose, className: classes.icon }, children)); };
+var ActionMenu = function ActionMenu(_ref91) { var actions = _ref91.actions, item = _ref91.item, idPrefix = _ref91.idPrefix; return /*#__PURE__*/ wn.createElement(IconButtonMenu, { actions: actions, item: item, idPrefix: idPrefix, icon: /*#__PURE__*/ wn.createElement(MoreVert, null) }); };
+var useActionMenu = function useActionMenu(_ref92) { var actions = _ref92.actions, idPrefix = _ref92.idPrefix, getId = _ref92.getId; var getItemActionProps = T$2(function (item) { var hasVisibleActions = actions.some(function (_ref93) { var _ref93$isVisible = _ref93.isVisible, isVisible = _ref93$isVisible === void 0 ? true : _ref93$isVisible; return typeof isVisible === 'function' ? isVisible(item) : isVisible; }); if (!hasVisibleActions) {
     return {};
-} return { customAction: /*#__PURE__*/ wn.createElement(ActionMenu, { actions: actions, item: item, idPrefix: "".concat(idPrefix, "-action-menu-").concat(item.id) }) }; }, [actions, idPrefix]); return { getItemActionProps: getItemActionProps }; };
+} return { customAction: ( /*#__PURE__*/wn.createElement("div", { style: { display: 'flex', width: '100%', justifyContent: 'center' } }, /*#__PURE__*/ wn.createElement(ActionMenu, { actions: actions, item: item, idPrefix: "".concat(idPrefix, "-action-menu-").concat(getId(item)) }))) }; }, [actions, getId, idPrefix]); return { getItemActionProps: getItemActionProps }; };
 var DEFAULT_TABLE_ROWS_PER_PAGE = 20;
 var LOAD_NEXT_PAGE_ERROR = 'Failed to load the next page.';
 var ZERO_RESULTS_MESSAGE = 'No results found.';
 var PAGINATED_TABLE_ID = 'paginated-table';
-var makePaginatedTableStyles = makeStylesFactory(function (theme) { return { tablePagination: { '& .MuiTablePagination-actions .MuiIconButton-root': { padding: theme.spacing(1) }, alignItems: 'center', display: 'flex', justifyContent: 'flex-end', padding: 0 }, paginationBoder: { borderTopWidth: 1, borderTopStyle: 'solid' }, emptyTable: { alignItems: 'flex-start', display: 'flex', justifyContent: 'center', padding: theme.spacing(4) } }; });
+var makePaginatedTableStyles = makeStylesFactory(function (theme) { return { tablePagination: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiTablePagination-actions .").concat(classNamePrefix, "MuiIconButton-root"), { padding: theme.spacing(1) }), "alignItems", 'center'), "display", 'flex'), "justifyContent", 'flex-end'), "padding", 0), paginationBoder: { borderTopWidth: 1, borderTopStyle: 'solid' }, emptyTable: { alignItems: 'flex-start', display: 'flex', justifyContent: 'center', padding: theme.spacing(4) } }; });
 var defaultRowsPerPageOptions = [];
 var PaginatedTableCore = function PaginatedTableCore(_a) { var _b, _c, _d; var currentPage = _a.currentPage, loadNext = _a.loadNext, isLoading = _a.isLoading, metadata = _a.metadata, setCurrentPage = _a.setCurrentPage, _a$rowsPerPage = _a.rowsPerPage, rowsPerPage = _a$rowsPerPage === void 0 ? DEFAULT_TABLE_ROWS_PER_PAGE : _a$rowsPerPage, _a$rowsPerPageOptions = _a.rowsPerPageOptions, rowsPerPageOptions = _a$rowsPerPageOptions === void 0 ? defaultRowsPerPageOptions : _a$rowsPerPageOptions, onRowsPerPageChange = _a.onRowsPerPageChange, _a$keepConsistentCont = _a.keepConsistentContentHeight, keepConsistentContentHeight = _a$keepConsistentCont === void 0 ? true : _a$keepConsistentCont, classes = _a.classes, Table = _a.TableComponent, Typography = _a.TypographyComponent, tableProps = __rest(_a, ["currentPage", "loadNext", "isLoading", "metadata", "setCurrentPage", "rowsPerPage", "rowsPerPageOptions", "onRowsPerPageChange", "keepConsistentContentHeight", "classes", "TableComponent", "TypographyComponent"]); var items = tableProps.items; var tableId = useShortId(PAGINATED_TABLE_ID); var _useToast4 = useToast(), openToast = _useToast4.openToast; var tableRowHeight = _$1(); var currFirstRowIndex = currentPage * rowsPerPage; var loadNextHandler = function loadNextHandler(newPage) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee13() { var _e, totalLoadedResults; return _regeneratorRuntime().wrap(function _callee13$(_context14) { while (1)
     switch (_context14.prev = _context14.next) {
@@ -9891,17 +9983,17 @@ else {
     countForPagination = (_b = metadata === null || metadata === void 0 ? void 0 : metadata.total) !== null && _b !== void 0 ? _b : 0;
     moreRowsToShow = ((_c = metadata === null || metadata === void 0 ? void 0 : metadata.total) !== null && _c !== void 0 ? _c : 0) > rowsPerPage;
 } var showPagination = !showEmptyTable && moreRowsToShow || rowsPerPageOptions.length > 1; var paginationMarginTop = (rowsPerPage - pageResults.length) * ((_d = tableRowHeight.current) !== null && _d !== void 0 ? _d : 0) - 1; return /*#__PURE__*/ wn.createElement("div", { id: tableId }, /*#__PURE__*/ wn.createElement(Table, Object.assign({}, tableProps, { items: showEmptyTable ? [] : pageResults })), showEmptyTable && ( /*#__PURE__*/wn.createElement("div", { className: classes.emptyTable, style: tableRowHeight.current ? { height: Math.min(rowsPerPage, pageResults.length) * tableRowHeight.current } : undefined }, showLoading && /*#__PURE__*/ wn.createElement(CircularProgress$1, { color: "inherit" }), showNoResults && /*#__PURE__*/ wn.createElement(Typography, null, ZERO_RESULTS_MESSAGE))), showPagination && ( /*#__PURE__*/wn.createElement("div", { className: C(classes.tablePagination, _defineProperty2({}, classes.paginationBoder, paginationMarginTop)), style: keepConsistentContentHeight ? { marginTop: paginationMarginTop } : undefined }, /*#__PURE__*/ wn.createElement(TablePagination$1, { component: "div", count: countForPagination, onPageChange: handleChangePage, page: currentPage, rowsPerPage: rowsPerPage, rowsPerPageOptions: rowsPerPageOptions, onRowsPerPageChange: onRowsPerPageChange })))); };
-var useStyles$5 = makePaginatedTableStyles(function (theme) { return { tablePagination: { '& .MuiTablePagination-root': { color: theme.styleConfig.colors.primary }, '& .MuiTablePagination-actions .MuiIconButton-root.Mui-disabled': { color: theme.styleConfig.colors.secondary } }, paginationBoder: { borderTopColor: theme.styleConfig.colors.subtle } }; });
-var PaginatedTable = function PaginatedTable(props) { var classes = useStyles$5(); return /*#__PURE__*/ wn.createElement(PaginatedTableCore, Object.assign({}, props, { keepConsistentContentHeight: false, TableComponent: Table, TypographyComponent: Typography, classes: classes })); };
+var useStyles$4 = makePaginatedTableStyles(function (theme) { return { tablePagination: _defineProperty2(_defineProperty2({}, "& .".concat(classNamePrefix, "MuiTablePagination-root"), { color: theme.styleConfig.colors.primary }), "& .".concat(classNamePrefix, "MuiTablePagination-actions .").concat(classNamePrefix, "MuiIconButton-root.Mui-disabled"), { color: theme.styleConfig.colors.secondary }), paginationBoder: { borderTopColor: theme.styleConfig.colors.subtle } }; });
+var PaginatedTable = function PaginatedTable(props) { var classes = useStyles$4(); return /*#__PURE__*/ wn.createElement(PaginatedTableCore, Object.assign({}, props, { keepConsistentContentHeight: false, TableComponent: Table, TypographyComponent: Typography, classes: classes })); };
 var Search = {};
-var _interopRequireDefault = interopRequireDefaultExports;
-var _interopRequireWildcard = interopRequireWildcardExports;
+var _interopRequireDefault$6 = interopRequireDefaultExports;
+var _interopRequireWildcard$6 = interopRequireWildcardExports;
 Object.defineProperty(Search, "__esModule", { value: true });
-var default_1 = Search["default"] = void 0;
-var React = _interopRequireWildcard(require$$2);
-var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
-var _default = (0, _createSvgIcon["default"])(/*#__PURE__*/ React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }), 'Search');
-default_1 = Search["default"] = _default;
+var default_1$6 = Search["default"] = void 0;
+var React$6 = _interopRequireWildcard$6(require$$2);
+var _createSvgIcon$6 = _interopRequireDefault$6(requireCreateSvgIcon());
+var _default$6 = (0, _createSvgIcon$6["default"])(/*#__PURE__*/ React$6.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }), 'Search');
+default_1$6 = Search["default"] = _default$6;
 var Keys;
 (function (Keys) { Keys["Backspace"] = "Backspace"; Keys["Tab"] = "Tab"; Keys["Enter"] = "Enter"; Keys["Space"] = " "; Keys["Shift"] = "Shift"; Keys["Control"] = "Control"; Keys["Alt"] = "Alt"; Keys["Command"] = "Meta"; Keys["Escape"] = "Escape"; Keys["PageUp"] = "PageUp"; Keys["PageDown"] = "PageDown"; Keys["ArrowLeft"] = "ArrowLeft"; Keys["ArrowUp"] = "ArrowUp"; Keys["ArrowRight"] = "ArrowRight"; Keys["ArrowDown"] = "ArrowDown"; Keys["Delete"] = "Delete"; Keys["Fn"] = "Fn"; Keys["End"] = "End"; Keys["Home"] = "Home"; Keys["Clear"] = "Clear"; Keys["Insert"] = "Insert"; Keys["A"] = "a"; Keys["B"] = "b"; Keys["C"] = "c"; Keys["D"] = "d"; Keys["E"] = "e"; Keys["F"] = "f"; Keys["G"] = "g"; Keys["H"] = "h"; Keys["I"] = "i"; Keys["J"] = "j"; Keys["K"] = "k"; Keys["L"] = "l"; Keys["M"] = "m"; Keys["N"] = "n"; Keys["O"] = "o"; Keys["P"] = "p"; Keys["Q"] = "q"; Keys["R"] = "r"; Keys["S"] = "s"; Keys["T"] = "t"; Keys["U"] = "u"; Keys["V"] = "v"; Keys["W"] = "w"; Keys["X"] = "x"; Keys["Y"] = "y"; Keys["Z"] = "z"; Keys["Zero"] = "0"; Keys["One"] = "1"; Keys["Two"] = "2"; Keys["Three"] = "3"; Keys["Four"] = "4"; Keys["Five"] = "5"; Keys["Six"] = "6"; Keys["Seven"] = "7"; Keys["Eight"] = "8"; Keys["Nine"] = "9"; Keys["F1"] = "F1"; Keys["F2"] = "F2"; Keys["F3"] = "F3"; Keys["F4"] = "F4"; Keys["F5"] = "F5"; Keys["F6"] = "F6"; Keys["F7"] = "F7"; Keys["F8"] = "F8"; Keys["F9"] = "F9"; Keys["F10"] = "F10"; Keys["F11"] = "F11"; Keys["F12"] = "F12"; Keys["Hyphen"] = "-"; Keys["ForwardSlash"] = "/"; Keys["BackSlash"] = "\\"; })(Keys || (Keys = {}));
 var makeSearchBarStyles = makeStylesFactory(function (theme) { return { searchBar: { position: 'relative', width: '100%' }, icon: { alignItems: 'center', display: 'flex', justifyContent: 'center', position: 'absolute', bottom: 0, marginBottom: theme.spacing(1) }, searchInput: { '& input': { paddingLeft: "".concat(theme.spacing(4), "px !important"), paddingRight: "".concat(theme.spacing(6), "px !important") }, '&:hover': { cursor: 'pointer' } }, searchIcon: { padding: theme.spacing(0.5, 1, 0, 1) }, slashIcon: { border: '1px solid', borderRadius: theme.shape.borderRadius, padding: theme.spacing(0, 1) }, slashIconContainer: { right: theme.spacing(1) } }; });
@@ -9913,45 +10005,48 @@ var SearchBarCore = function SearchBarCore(_a) { var classes = _a.classes, Input
             e.preventDefault();
         }
     }
-} }; document.addEventListener('keydown', handleKey); return function () { return document.removeEventListener('keydown', handleKey); }; }, [inputRef, focused]); return /*#__PURE__*/ wn.createElement("div", { className: classes.searchBar }, /*#__PURE__*/ wn.createElement("div", { className: C(classes.icon, classes.searchIcon) }, /*#__PURE__*/ wn.createElement(default_1, { fontSize: "small" })), /*#__PURE__*/ wn.createElement("div", { className: C(classes.icon, classes.slashIconContainer) }, /*#__PURE__*/ wn.createElement("div", { className: classes.slashIcon }, "/")), /*#__PURE__*/ wn.createElement("div", { className: classes.searchInput }, /*#__PURE__*/ wn.createElement(Input, Object.assign({}, inputProps, { fullWidth: true, inputRef: setInputRef, onBlur: onBlur, onFocus: onFocus })))); };
-var useStyles$4 = makeSearchBarStyles(function (theme) { return { searchIcon: { color: theme.styleConfig.inputs.placeholderColor }, slashIcon: { borderColor: theme.styleConfig.inputs.placeholderColor, color: theme.styleConfig.inputs.placeholderColor, fontFamily: theme.styleConfig.fontFamily, fontSize: theme.typography.fontSize, lineHeight: 1, padding: theme.spacing(0.5, 1) } }; });
-var SearchBar = function SearchBar(props) { var classes = useStyles$4(props); return /*#__PURE__*/ wn.createElement(SearchBarCore, Object.assign({}, props, { classes: classes, InputComponent: Input$1 })); };
+} }; document.addEventListener('keydown', handleKey); return function () { return document.removeEventListener('keydown', handleKey); }; }, [inputRef, focused]); return /*#__PURE__*/ wn.createElement("div", { className: classes.searchBar }, /*#__PURE__*/ wn.createElement("div", { className: C(classes.icon, classes.searchIcon) }, /*#__PURE__*/ wn.createElement(default_1$6, { fontSize: "small" })), /*#__PURE__*/ wn.createElement("div", { className: C(classes.icon, classes.slashIconContainer) }, /*#__PURE__*/ wn.createElement("div", { className: classes.slashIcon }, "/")), /*#__PURE__*/ wn.createElement("div", { className: classes.searchInput }, /*#__PURE__*/ wn.createElement(Input, Object.assign({}, inputProps, { fullWidth: true, inputRef: setInputRef, onBlur: onBlur, onFocus: onFocus })))); };
+var useStyles$3 = makeSearchBarStyles(function (theme) { return { icon: { marginBottom: 1 }, searchIcon: { margin: theme.spacing(0, 0, 0.25, 0.75), color: theme.styleConfig.inputs.placeholderColor, height: 24, width: 24, padding: 0 }, slashIcon: { borderColor: theme.styleConfig.inputs.placeholderColor, color: theme.styleConfig.inputs.placeholderColor, fontFamily: theme.styleConfig.fontFamily, fontSize: theme.typography.fontSize, lineHeight: 1, padding: theme.spacing(0.5, 1), marginBottom: 2 }, slashIconContainer: { right: theme.spacing(0.5) } }; });
+var SearchBar = function SearchBar(props) { var classes = useStyles$3(props); return /*#__PURE__*/ wn.createElement(SearchBarCore, Object.assign({}, props, { classes: classes, InputComponent: Input$1 })); };
 var tryParseJson = function tryParseJson(value) { try {
     if (value) {
         return JSON.parse(value);
     }
 }
 catch (e) { } return undefined; };
-var useLocalStorage = function useLocalStorage(defaultValue, key) { var publicToken = useB2BInternals().publicToken; var fullKey = getLocalStorageKey(publicToken, key); var _h61 = h$4(function () { var storedValue = localStorage.getItem(fullKey); return storedValue ? tryParseJson(storedValue) : defaultValue; }), _h62 = _slicedToArray2(_h61, 2), cachedValue = _h62[0], setCachedValue = _h62[1]; var setValue = function setValue(value) { localStorage.setItem(fullKey, JSON.stringify(value)); setCachedValue(value); }; return [cachedValue, setValue]; };
+var makeUseStorage = function makeUseStorage(storage) { return function (defaultValue, key) { var publicToken = useB2BInternals().publicToken; var fullKey = getPersistentStorageKey(publicToken, key); var _h61 = h$4(function () { var storedValue = storage === null || storage === void 0 ? void 0 : storage.getItem(fullKey); return storedValue ? tryParseJson(storedValue) : defaultValue; }), _h62 = _slicedToArray2(_h61, 2), cachedValue = _h62[0], setCachedValue = _h62[1]; var setValue = function setValue(value) { storage === null || storage === void 0 ? void 0 : storage.setItem(fullKey, JSON.stringify(value)); setCachedValue(value); }; return [cachedValue, setValue]; }; };
+var useLocalStorage = makeUseStorage(typeof window !== 'undefined' ? window.localStorage : undefined);
 var itemsPerPageOptions = [10, 15, 25, 50, 100];
-var useItemsPerPage = function useItemsPerPage(_ref91) { var viewId = _ref91.viewId, defaultItemsPerPage = _ref91.defaultItemsPerPage; var _useLocalStorage = useLocalStorage(defaultItemsPerPage, "".concat(viewId, "_itemsPerPage")), _useLocalStorage2 = _slicedToArray2(_useLocalStorage, 2), itemsPerPage = _useLocalStorage2[0], setItemsPerPage = _useLocalStorage2[1]; var handleItemsPerPageChange = function handleItemsPerPageChange(e) { var value = parseInt(e.target.value, 10); if (!Number.isNaN(value)) {
+var DEFAULT_ITEMS_PER_PAGE = 15;
+var useItemsPerPage = function useItemsPerPage(_ref94) { var viewId = _ref94.viewId, _ref94$defaultItemsPe = _ref94.defaultItemsPerPage, defaultItemsPerPage = _ref94$defaultItemsPe === void 0 ? DEFAULT_ITEMS_PER_PAGE : _ref94$defaultItemsPe; var _useLocalStorage = useLocalStorage(defaultItemsPerPage, "".concat(viewId, "_itemsPerPage")), _useLocalStorage2 = _slicedToArray2(_useLocalStorage, 2), itemsPerPage = _useLocalStorage2[0], setItemsPerPage = _useLocalStorage2[1]; var handleItemsPerPageChange = function handleItemsPerPageChange(e) { var value = parseInt(e.target.value, 10); if (!Number.isNaN(value)) {
     setItemsPerPage(value);
 } }; return [itemsPerPage, handleItemsPerPageChange]; };
-var useDisplayPagination = function useDisplayPagination(_ref92) { var items = _ref92.items, _ref92$defaultItemsPe = _ref92.defaultItemsPerPage, defaultItemsPerPage = _ref92$defaultItemsPe === void 0 ? 15 : _ref92$defaultItemsPe, viewId = _ref92.viewId; var _h63 = h$4(0), _h64 = _slicedToArray2(_h63, 2), currentPage = _h64[0], setCurrentPage = _h64[1]; var metadata = F$3(function () { return { total: items.length, cursor: 'none' }; }, [items.length]); var _useItemsPerPage = useItemsPerPage({ viewId: viewId, defaultItemsPerPage: defaultItemsPerPage }), _useItemsPerPage2 = _slicedToArray2(_useItemsPerPage, 2), itemsPerPage = _useItemsPerPage2[0], handleItemsPerPageChange = _useItemsPerPage2[1]; var pageCount = Math.ceil(items.length / itemsPerPage); var lastPageIndex = Math.max(0, pageCount - 1); if (currentPage > lastPageIndex) {
+var usePagination = function usePagination(_ref95) { var itemsCount = _ref95.itemsCount, itemsPerPage = _ref95.itemsPerPage; var _h63 = h$4(0), _h64 = _slicedToArray2(_h63, 2), currentPage = _h64[0], setCurrentPage = _h64[1]; var pageCount = Math.ceil(itemsCount / itemsPerPage); var lastPageIndex = Math.max(0, pageCount - 1); if (currentPage > lastPageIndex) {
     setCurrentPage(lastPageIndex);
-} return { items: items, currentPage: currentPage, setCurrentPage: setCurrentPage, loadNext: noop, metadata: metadata, rowsPerPage: itemsPerPage, rowsPerPageOptions: itemsPerPageOptions, onRowsPerPageChange: handleItemsPerPageChange }; };
-var DEFAULT_ROWS_PER_PAGE = 10;
-var itemRenderer = [{ title: 'Display Name', getValue: function getValue(_ref93) { var displayName = _ref93.displayName, isDefault = _ref93.isDefault; return isDefault ? ( /*#__PURE__*/wn.createElement(Typography, null, displayName, " ", /*#__PURE__*/ wn.createElement(Tag, { size: "sm" }, "Default"))) : displayName; } }, { title: 'IdP', getValue: function getValue(_ref94) { var idp = _ref94.idp, connectionType = _ref94.connectionType; return getIdpInfo(idp, connectionType).idp.displayName; } }, { title: 'Status', getValue: function getValue(_ref95) { var status = _ref95.status; switch (status) {
+} return { currentPage: currentPage, setCurrentPage: setCurrentPage }; };
+var useDisplayPagination = function useDisplayPagination(_ref96) { var items = _ref96.items, _ref96$defaultItemsPe = _ref96.defaultItemsPerPage, defaultItemsPerPage = _ref96$defaultItemsPe === void 0 ? 15 : _ref96$defaultItemsPe, viewId = _ref96.viewId; var _useItemsPerPage = useItemsPerPage({ viewId: viewId, defaultItemsPerPage: defaultItemsPerPage }), _useItemsPerPage2 = _slicedToArray2(_useItemsPerPage, 2), itemsPerPage = _useItemsPerPage2[0], handleItemsPerPageChange = _useItemsPerPage2[1]; var _usePagination = usePagination({ itemsCount: items.length, itemsPerPage: itemsPerPage }), currentPage = _usePagination.currentPage, setCurrentPage = _usePagination.setCurrentPage; var metadata = F$3(function () { return { total: items.length, cursor: 'none' }; }, [items.length]); return { items: items, currentPage: currentPage, setCurrentPage: setCurrentPage, loadNext: noop, metadata: metadata, rowsPerPage: itemsPerPage, rowsPerPageOptions: itemsPerPageOptions, onRowsPerPageChange: handleItemsPerPageChange }; };
+var itemRenderer = [{ title: 'Display Name', getValue: function getValue(_ref97) { var displayName = _ref97.displayName, isDefault = _ref97.isDefault; return isDefault ? ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, displayName, " ", /*#__PURE__*/ wn.createElement(Tag, { size: "small" }, "Default"))) : displayName; } }, { title: 'IdP', getValue: function getValue(_ref98) { var idp = _ref98.idp, connectionType = _ref98.connectionType; return getIdpInfo(idp, connectionType).idp.displayName; } }, { title: 'Status', getValue: function getValue(_ref99) { var status = _ref99.status; switch (status) {
             case 'active': return 'Active';
             case 'pending': return 'Pending';
             default: return status;
         } } }];
-var useSearchFilter = function useSearchFilter(_ref96) { var data = _ref96.data, searchKeys = _ref96.searchKeys; var _h65 = h$4(''), _h66 = _slicedToArray2(_h65, 2), filterText = _h66[0], setFilterText = _h66[1]; var filteredData = F$3(function () { if (!filterText) {
+var useSearchFilter = function useSearchFilter(_ref100) { var data = _ref100.data, searchKeys = _ref100.searchKeys; var _h65 = h$4(''), _h66 = _slicedToArray2(_h65, 2), filterText = _h66[0], setFilterText = _h66[1]; var filteredData = F$3(function () { if (!filterText) {
     return data;
 } var filterTextLower = filterText.toLowerCase(); return data.filter(function (item) { return searchKeys.some(function (key) { return String(item[key]).toLowerCase().includes(filterTextLower); }); }); }, [data, filterText, searchKeys]); return { filteredData: filteredData, filterText: filterText, setFilterText: setFilterText }; };
 var useCanProjectCreateSsoConnection = function useCanProjectCreateSsoConnection() { var _useAdminPortalConfig = useAdminPortalConfig(), data = _useAdminPortalConfig.data; return (data === null || data === void 0 ? void 0 : data.sso_config.can_create_oidc_connection) && data.sso_config.can_create_saml_connection; };
 var useConnections = function useConnections(canGetSso) { var _a; var ssoConnections = useSsoConnections(canGetSso); var orgInfo = useOrgInfo(); var defaultConnectionId = (_a = orgInfo.data) === null || _a === void 0 ? void 0 : _a.sso_default_connection_id; var connections = F$3(function () { return ssoConnections.data ? [].concat(_toConsumableArray2(ssoConnections.data.saml_connections.map(function (c) { return Object.assign({ connectionType: 'saml' }, c); })), _toConsumableArray2(ssoConnections.data.oidc_connections.map(function (c) { return Object.assign({ connectionType: 'oidc' }, c); }))).map(function (connection) { return { displayName: connection.display_name, idp: connection.identity_provider, connectionType: connection.connectionType, status: connection.status, id: connection.connection_id, isDefault: connection.connection_id === defaultConnectionId }; }).sort(function (a, b) { return collator.compare(a.displayName, b.displayName); }) : []; }, [defaultConnectionId, ssoConnections.data]); return { connections: connections, isLoading: ssoConnections.isLoading }; };
-var SSOConnectionsScreen = function SSOConnectionsScreen() { var _useSsoRouterControll5 = useSsoRouterController(), navigate = _useSsoRouterControll5.navigate; var canProjectCreateSsoConnection = useCanProjectCreateSsoConnection(); var _useRbac8 = useRbac('stytch.sso', 'get'), canGetConnection = _useRbac8.data; var _useRbac9 = useRbac('stytch.sso', 'create'), canCreatePermission = _useRbac9.data; var _useRbac10 = useRbac('stytch.sso', 'delete'), canDeleteConnection = _useRbac10.data; var _useRbac11 = useRbac('stytch.sso', 'update'), canUpdateConnection = _useRbac11.data; var _useRbac12 = useRbac('stytch.organization', 'update.settings.default-sso-connection'), canSetDefaultConnection = _useRbac12.data; var canCreateConnection = canCreatePermission && canProjectCreateSsoConnection; var _useConnections = useConnections(!!canGetConnection), connections = _useConnections.connections, isLoading = _useConnections.isLoading; var _useSearchFilter = useSearchFilter({ data: connections, searchKeys: ['displayName'] }), filterText = _useSearchFilter.filterText, setFilterText = _useSearchFilter.setFilterText, filteredData = _useSearchFilter.filteredData; var tableProps = useDisplayPagination({ items: filteredData, defaultItemsPerPage: DEFAULT_ROWS_PER_PAGE, viewId: 'adminPortalSsoConnections' }); var defaultConnectionName = F$3(function () { var _a; return (_a = connections.find(function (connection) { return connection.isDefault; })) === null || _a === void 0 ? void 0 : _a.displayName; }, [connections]); var _useSetDefaultConnect2 = useSetDefaultConnection({ defaultConnectionName: defaultConnectionName }), setDefaultModalProps = _useSetDefaultConnect2.modalProps, handleSetDefault = _useSetDefaultConnect2.handleRequestSetDefault; var _useDeleteConnection2 = useDeleteConnection(), deleteModalProps = _useDeleteConnection2.modalProps, handleDelete = _useDeleteConnection2.handleRequestDelete; var handleEdit = T$2(function (connection) { navigate({ screen: 'connectionDetails', params: { connectionId: connection.id } }); }, [navigate]); var handleNewConnectionClick = T$2(function () { navigate({ screen: 'newConnection' }); }, [navigate]); var hasExactlyOneConnection = connections.length === 1; var actions = F$3(function () { return [{ key: 'view', label: 'View connection', icon: /*#__PURE__*/ wn.createElement(VisibilityOutlined, null), onClick: handleEdit, isVisible: !canUpdateConnection }, { key: 'edit', label: 'Edit connection', icon: /*#__PURE__*/ wn.createElement(EditOutlined, null), onClick: handleEdit, isVisible: !!canUpdateConnection }, { key: 'set-default', label: 'Set as default', icon: /*#__PURE__*/ wn.createElement(Tune, null), onClick: handleSetDefault, isVisible: function isVisible(connection) { return !connection.isDefault && !!canSetDefaultConnection; } }, { key: 'delete', label: 'Delete', icon: /*#__PURE__*/ wn.createElement(DeleteOutlined, null), onClick: handleDelete, isDangerous: true, isVisible: function isVisible(connection) { return (!connection.isDefault || hasExactlyOneConnection) && !!canDeleteConnection; } }]; }, [canDeleteConnection, canSetDefaultConnection, canUpdateConnection, handleDelete, handleEdit, handleSetDefault, hasExactlyOneConnection]); var _useActionMenu = useActionMenu({ actions: actions, idPrefix: 'connection' }), getItemActionProps = _useActionMenu.getItemActionProps; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, canCreatePermission && !canCreateConnection && ( /*#__PURE__*/wn.createElement(Alert, null, "You\u2019ve reached the maximum number of allowed connections. Delete an existing connection in order to add a new one.")), /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", justifyContent: "space-between" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, "SSO Connections"), canCreateConnection && ( /*#__PURE__*/wn.createElement(Button, { variant: "primary", startIcon: /*#__PURE__*/ wn.createElement(Add, null), onClick: handleNewConnectionClick }, "New connection"))), /*#__PURE__*/ wn.createElement(SearchBar, { placeholder: "Search", value: filterText, onChange: setFilterText }), /*#__PURE__*/ wn.createElement(PaginatedTable, Object.assign({}, tableProps, { itemRenderer: itemRenderer, isLoading: isLoading, getItemActionProps: getItemActionProps }))), /*#__PURE__*/ wn.createElement(SetDefaultConfirmModal, Object.assign({}, setDefaultModalProps)), /*#__PURE__*/ wn.createElement(DeleteConfirmModal, Object.assign({}, deleteModalProps))); };
-var makeAccordionStyles = makeStylesFactory(function (theme) { return { accordion: { '&.Mui-expanded.Mui-expanded, &.Mui-expanded + &.MuiAccordion-root': { border: '1px solid' }, '&:not(.Mui-expanded) + *': { borderWidth: '0px 1px 1px' }, '&.MuiAccordion-root:before': { display: 'none' }, border: 'solid', borderWidth: '1px 1px 1px' }, accordionDetails: { alignItems: 'flex-start', display: 'flex', flexDirection: 'column', padding: theme.spacing(2) }, accordionExpanded: { '& $accordionSummary': { margin: theme.spacing(1.5, 0) }, minHeight: '0 !important' }, accordionSummary: { alignItems: 'center', display: 'flex', margin: theme.spacing(1.5, 0) } }; });
+var getConnectionId = function getConnectionId(connection) { return connection.id; };
+var SSOConnectionsScreen = function SSOConnectionsScreen() { var _useSsoRouterControll5 = useSsoRouterController(), navigate = _useSsoRouterControll5.navigate; var canProjectCreateSsoConnection = useCanProjectCreateSsoConnection(); var _useRbac8 = useRbac('stytch.sso', 'get'), canGetConnection = _useRbac8.data; var _useRbac9 = useRbac('stytch.sso', 'create'), canCreatePermission = _useRbac9.data; var _useRbac10 = useRbac('stytch.sso', 'delete'), canDeleteConnection = _useRbac10.data; var _useRbac11 = useRbac('stytch.sso', 'update'), canUpdateConnection = _useRbac11.data; var _useRbac12 = useRbac('stytch.organization', 'update.settings.default-sso-connection'), canSetDefaultConnection = _useRbac12.data; var canCreateConnection = canCreatePermission && canProjectCreateSsoConnection; var _useConnections = useConnections(!!canGetConnection), connections = _useConnections.connections, isLoading = _useConnections.isLoading; var _useSearchFilter = useSearchFilter({ data: connections, searchKeys: ['displayName'] }), filterText = _useSearchFilter.filterText, setFilterText = _useSearchFilter.setFilterText, filteredData = _useSearchFilter.filteredData; var tableProps = useDisplayPagination({ items: filteredData, viewId: 'adminPortalSsoConnections' }); var defaultConnectionName = F$3(function () { var _a; return (_a = connections.find(function (connection) { return connection.isDefault; })) === null || _a === void 0 ? void 0 : _a.displayName; }, [connections]); var _useSetDefaultConnect2 = useSetDefaultConnection({ defaultConnectionName: defaultConnectionName }), setDefaultModalProps = _useSetDefaultConnect2.modalProps, handleSetDefault = _useSetDefaultConnect2.handleRequestSetDefault; var _useDeleteConnection2 = useDeleteConnection(), deleteModalProps = _useDeleteConnection2.modalProps, handleDelete = _useDeleteConnection2.handleRequestDelete; var handleEdit = T$2(function (connection) { navigate({ screen: 'connectionDetails', params: { connectionId: connection.id } }); }, [navigate]); var handleNewConnectionClick = T$2(function () { navigate({ screen: 'newConnection' }); }, [navigate]); var hasExactlyOneConnection = connections.length === 1; var actions = F$3(function () { return [{ key: 'view', label: 'View connection', icon: /*#__PURE__*/ wn.createElement(VisibilityOutlined$1, null), onClick: handleEdit, isVisible: !canUpdateConnection }, { key: 'edit', label: 'Edit connection', icon: /*#__PURE__*/ wn.createElement(EditOutlined$1, null), onClick: handleEdit, isVisible: !!canUpdateConnection }, { key: 'set-default', label: 'Set as default', icon: /*#__PURE__*/ wn.createElement(Tune, null), onClick: handleSetDefault, isVisible: function isVisible(connection) { return !connection.isDefault && !!canSetDefaultConnection; } }, { key: 'delete', label: 'Delete', icon: /*#__PURE__*/ wn.createElement(DeleteOutlined$1, null), onClick: handleDelete, isDangerous: true, isVisible: function isVisible(connection) { return (!connection.isDefault || hasExactlyOneConnection) && !!canDeleteConnection; } }]; }, [canDeleteConnection, canSetDefaultConnection, canUpdateConnection, handleDelete, handleEdit, handleSetDefault, hasExactlyOneConnection]); var _useActionMenu = useActionMenu({ actions: actions, idPrefix: 'connection', getId: getConnectionId }), getItemActionProps = _useActionMenu.getItemActionProps; return /*#__PURE__*/ wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, canCreatePermission && !canCreateConnection && ( /*#__PURE__*/wn.createElement(Alert, null, "You\u2019ve reached the maximum number of allowed connections. Delete an existing connection in order to add a new one.")), /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", justifyContent: "space-between" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h1" }, "SSO Connections"), canCreateConnection && ( /*#__PURE__*/wn.createElement(Button, { variant: "primary", startIcon: /*#__PURE__*/ wn.createElement(Add$1, null), onClick: handleNewConnectionClick }, "New connection"))), /*#__PURE__*/ wn.createElement(SearchBar, { placeholder: "Search", value: filterText, onChange: setFilterText }), /*#__PURE__*/ wn.createElement(PaginatedTable, Object.assign({}, tableProps, { itemRenderer: itemRenderer, isLoading: isLoading, titleVariant: "h4", getItemActionProps: getItemActionProps }))), /*#__PURE__*/ wn.createElement(SetDefaultConfirmModal, Object.assign({}, setDefaultModalProps)), /*#__PURE__*/ wn.createElement(DeleteConfirmModal, Object.assign({}, deleteModalProps))); };
+var makeAccordionStyles = makeStylesFactory(function (theme) { return { accordion: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "&.".concat(classNamePrefix, "Mui-expanded.").concat(classNamePrefix, "Mui-expanded, &.").concat(classNamePrefix, "Mui-expanded + &.").concat(classNamePrefix, "MuiAccordion-root"), { border: '1px solid' }), "&:not(.".concat(classNamePrefix, "Mui-expanded) + *"), { borderWidth: '0px 1px 1px' }), "&.".concat(classNamePrefix, "MuiAccordion-root:before"), { display: 'none' }), "border", 'solid'), "borderWidth", '1px 1px 1px'), accordionDetails: { alignItems: 'flex-start', display: 'flex', flexDirection: 'column', padding: theme.spacing(2) }, accordionExpanded: { '& $accordionSummary': { margin: theme.spacing(1.5, 0) }, minHeight: '0 !important' }, accordionSummary: { alignItems: 'center', display: 'flex', margin: theme.spacing(1.5, 0) } }; });
 var AccordionCore = function AccordionCore(props) { var className = props.className, classes = props.classes, rest = __rest(props, ["className", "classes"]); return /*#__PURE__*/ wn.createElement(MUIAccordion, Object.assign({ className: C(classes.accordion, className) }, rest)); };
 var AccordionSummaryCore = function AccordionSummaryCore(_a) { var classes = _a.classes, props = __rest(_a, ["classes"]); return /*#__PURE__*/ wn.createElement(MUIAccordionSummary, Object.assign({ classes: { content: C(classes.accordionSummary, classes.content), expanded: C(classes.accordionExpanded, classes.expanded) }, expandIcon: /*#__PURE__*/ wn.createElement(ExpandMore$1, null) }, props)); };
 var AccordionDetailsCore = function AccordionDetailsCore(props) { var className = props.className, classes = props.classes, rest = __rest(props, ["className", "classes"]); return /*#__PURE__*/ wn.createElement(MUIAccordionDetails, Object.assign({ className: C(classes.accordionDetails, className) }, rest)); };
-var useStyles$3 = makeAccordionStyles(function (theme) { return { accordion: { '&.Mui-expanded.Mui-expanded, &.Mui-expanded + &.MuiAccordion-root': { borderColor: theme.styleConfig.colors.subtle }, backgroundColor: theme.styleConfig.container.backgroundColor, borderColor: theme.styleConfig.colors.subtle }, accordionDetails: { padding: theme.spacing(3, 3, 3, 7), alignItems: 'stretch' } }; });
-var Accordion = function Accordion(props) { var classes = useStyles$3(); return /*#__PURE__*/ wn.createElement(AccordionCore, Object.assign({}, props, { classes: classes })); };
-var AccordionSummary = function AccordionSummary(props) { var classes = useStyles$3(); return /*#__PURE__*/ wn.createElement(AccordionSummaryCore, Object.assign({}, props, { classes: classes })); };
-var AccordionDetails = function AccordionDetails(props) { var classes = useStyles$3(); return /*#__PURE__*/ wn.createElement(AccordionDetailsCore, Object.assign({}, props, { classes: classes })); };
-var useManualConfigurationState = function useManualConfigurationState(_ref97) { var idp = _ref97.idp, type = _ref97.type; var _h67 = h$4(false), _h68 = _slicedToArray2(_h67, 2), manualConfigurationState = _h68[0], setManualConfigurationState = _h68[1]; var idpRequiresManualConfig = type === 'saml' && idp.metadataUrlLabel === false; var manualConfiguration = manualConfigurationState || idpRequiresManualConfig; return [manualConfiguration, setManualConfigurationState]; };
-var SSONewConnectionConfigureScreen = function SSONewConnectionConfigureScreen(_ref98) { var connectionProp = _ref98.connection; var _a; var _useSsoRouterControll6 = useSsoRouterController(), navigate = _useSsoRouterControll6.navigate; var info = getIdpAndConnectionInfo(connectionProp); var connection = info.connection, idp = info.idp, type = info.type; var connectionDisplayName = connection.display_name; var _useMutateSsoConnecti3 = useMutateSsoConnection(type), mutate = _useMutateSsoConnecti3.mutate; var _useMutateSsoConnecti4 = useMutateSsoConnectionByUrl(), mutateByUrl = _useMutateSsoConnecti4.mutate; var _useSsoRouterControll7 = useSsoRouterController(), useBlockNavigation = _useSsoRouterControll7.useBlockNavigation; var _h69 = h$4(true), _h70 = _slicedToArray2(_h69, 2), block = _h70[0], setBlock = _h70[1]; var _useBlockNavigation2 = useBlockNavigation(block), allowNavigation = _useBlockNavigation2.allowNavigation, blocked = _useBlockNavigation2.blocked, cancelNavigation = _useBlockNavigation2.cancelNavigation; var _useManualConfigurati = useManualConfigurationState(info), _useManualConfigurati2 = _slicedToArray2(_useManualConfigurati, 2), manualConfiguration = _useManualConfigurati2[0], setManualConfiguration = _useManualConfigurati2[1]; var _h71 = h$4(''), _h72 = _slicedToArray2(_h71, 2), metadataUrl = _h72[0], setMetadataUrl = _h72[1]; var _h73 = h$4(''), _h74 = _slicedToArray2(_h73, 2), ssoUrl = _h74[0], setSsoUrl = _h74[1]; var _h75 = h$4(''), _h76 = _slicedToArray2(_h75, 2), entityId = _h76[0], setEntityId = _h76[1]; var _h77 = h$4(''), _h78 = _slicedToArray2(_h77, 2), x509Certificate = _h78[0], setX509Certificate = _h78[1]; var _h79 = h$4(''), _h80 = _slicedToArray2(_h79, 2), clientId = _h80[0], setClientId = _h80[1]; var _h81 = h$4(''), _h82 = _slicedToArray2(_h81, 2), clientSecret = _h82[0], setClientSecret = _h82[1]; var _h83 = h$4(''), _h84 = _slicedToArray2(_h83, 2), issuer = _h84[0], setIssuer = _h84[1]; var _h85 = h$4(''), _h86 = _slicedToArray2(_h85, 2), issuerDerivedValue = _h86[0], setIssuerDerivedValue = _h86[1]; var _h87 = h$4(''), _h88 = _slicedToArray2(_h87, 2), authorizationUrl = _h88[0], setAuthorizationUrl = _h88[1]; var _h89 = h$4(''), _h90 = _slicedToArray2(_h89, 2), tokenUrl = _h90[0], setTokenUrl = _h90[1]; var _h91 = h$4(''), _h92 = _slicedToArray2(_h91, 2), userInfoUrl = _h92[0], setUserInfoUrl = _h92[1]; var _h93 = h$4(''), _h94 = _slicedToArray2(_h93, 2), jwksUrl = _h94[0], setJwksUrl = _h94[1]; var _h95 = h$4({ attributeMapping: { email: 'NameID', first_name: 'firstName', last_name: 'lastName', groups: '' } }), _h96 = _slicedToArray2(_h95, 2), attributeMappingState = _h96[0], setAttributeMappingState = _h96[1]; var attributeMapping = F$3(function () { return Object.fromEntries(Object.entries(attributeMappingState.attributeMapping).filter(function (_ref99) { var _ref100 = _slicedToArray2(_ref99, 2), value = _ref100[1]; return value; })); }, [attributeMappingState.attributeMapping]); var _useToast5 = useToast(), openToast = _useToast5.openToast; var handleSubmit = T$2(function (e) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee15() { var options, message; return _regeneratorRuntime().wrap(function _callee15$(_context16) { while (1)
+var useStyles$2 = makeAccordionStyles(function (theme) { return { accordion: _defineProperty2(_defineProperty2(_defineProperty2({}, "&.".concat(classNamePrefix, "Mui-expanded.").concat(classNamePrefix, "Mui-expanded, &.").concat(classNamePrefix, "Mui-expanded + &.").concat(classNamePrefix, "MuiAccordion-root"), { borderColor: theme.styleConfig.colors.subtle }), "backgroundColor", theme.styleConfig.container.backgroundColor), "borderColor", theme.styleConfig.colors.subtle), accordionDetails: { padding: theme.spacing(3, 3, 3, 7), alignItems: 'stretch' } }; });
+var Accordion = function Accordion(props) { var classes = useStyles$2(); return /*#__PURE__*/ wn.createElement(AccordionCore, Object.assign({}, props, { classes: classes })); };
+var AccordionSummary = function AccordionSummary(props) { var classes = useStyles$2(); return /*#__PURE__*/ wn.createElement(AccordionSummaryCore, Object.assign({}, props, { classes: classes })); };
+var AccordionDetails = function AccordionDetails(props) { var classes = useStyles$2(); return /*#__PURE__*/ wn.createElement(AccordionDetailsCore, Object.assign({}, props, { classes: classes })); };
+var useManualConfigurationState = function useManualConfigurationState(_ref101) { var idp = _ref101.idp, type = _ref101.type; var _h67 = h$4(false), _h68 = _slicedToArray2(_h67, 2), manualConfigurationState = _h68[0], setManualConfigurationState = _h68[1]; var idpRequiresManualConfig = type === 'saml' && idp.metadataUrlLabel === false; var manualConfiguration = manualConfigurationState || idpRequiresManualConfig; return [manualConfiguration, setManualConfigurationState]; };
+var SSONewConnectionConfigureScreen = function SSONewConnectionConfigureScreen(_ref102) { var connectionProp = _ref102.connection; var _a; var _useSsoRouterControll6 = useSsoRouterController(), navigate = _useSsoRouterControll6.navigate; var info = getIdpAndConnectionInfo(connectionProp); var connection = info.connection, idp = info.idp, type = info.type; var connectionDisplayName = connection.display_name; var _useMutateSsoConnecti3 = useMutateSsoConnection(type), mutate = _useMutateSsoConnecti3.mutate; var _useMutateSsoConnecti4 = useMutateSsoConnectionByUrl(), mutateByUrl = _useMutateSsoConnecti4.mutate; var _useSsoRouterControll7 = useSsoRouterController(), useBlockNavigation = _useSsoRouterControll7.useBlockNavigation; var _h69 = h$4(true), _h70 = _slicedToArray2(_h69, 2), block = _h70[0], setBlock = _h70[1]; var _useBlockNavigation2 = useBlockNavigation(block), allowNavigation = _useBlockNavigation2.allowNavigation, blocked = _useBlockNavigation2.blocked, cancelNavigation = _useBlockNavigation2.cancelNavigation; var _useManualConfigurati = useManualConfigurationState(info), _useManualConfigurati2 = _slicedToArray2(_useManualConfigurati, 2), manualConfiguration = _useManualConfigurati2[0], setManualConfiguration = _useManualConfigurati2[1]; var _h71 = h$4(''), _h72 = _slicedToArray2(_h71, 2), metadataUrl = _h72[0], setMetadataUrl = _h72[1]; var _h73 = h$4(''), _h74 = _slicedToArray2(_h73, 2), ssoUrl = _h74[0], setSsoUrl = _h74[1]; var _h75 = h$4(''), _h76 = _slicedToArray2(_h75, 2), entityId = _h76[0], setEntityId = _h76[1]; var _h77 = h$4(''), _h78 = _slicedToArray2(_h77, 2), x509Certificate = _h78[0], setX509Certificate = _h78[1]; var _h79 = h$4(''), _h80 = _slicedToArray2(_h79, 2), clientId = _h80[0], setClientId = _h80[1]; var _h81 = h$4(''), _h82 = _slicedToArray2(_h81, 2), clientSecret = _h82[0], setClientSecret = _h82[1]; var _h83 = h$4(''), _h84 = _slicedToArray2(_h83, 2), issuer = _h84[0], setIssuer = _h84[1]; var _h85 = h$4(''), _h86 = _slicedToArray2(_h85, 2), issuerDerivedValue = _h86[0], setIssuerDerivedValue = _h86[1]; var _h87 = h$4(''), _h88 = _slicedToArray2(_h87, 2), authorizationUrl = _h88[0], setAuthorizationUrl = _h88[1]; var _h89 = h$4(''), _h90 = _slicedToArray2(_h89, 2), tokenUrl = _h90[0], setTokenUrl = _h90[1]; var _h91 = h$4(''), _h92 = _slicedToArray2(_h91, 2), userInfoUrl = _h92[0], setUserInfoUrl = _h92[1]; var _h93 = h$4(''), _h94 = _slicedToArray2(_h93, 2), jwksUrl = _h94[0], setJwksUrl = _h94[1]; var _h95 = h$4({ attributeMapping: { email: 'NameID', first_name: 'firstName', last_name: 'lastName', groups: '' } }), _h96 = _slicedToArray2(_h95, 2), attributeMappingState = _h96[0], setAttributeMappingState = _h96[1]; var attributeMapping = F$3(function () { return Object.fromEntries(Object.entries(attributeMappingState.attributeMapping).filter(function (_ref103) { var _ref104 = _slicedToArray2(_ref103, 2), value = _ref104[1]; return value; })); }, [attributeMappingState.attributeMapping]); var _useToast5 = useToast(), openToast = _useToast5.openToast; var handleSubmit = T$2(function (e) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee15() { var options, message; return _regeneratorRuntime().wrap(function _callee15$(_context16) { while (1)
     switch (_context16.prev = _context16.next) {
         case 0:
             e.preventDefault();
@@ -10018,7 +10113,7 @@ var SSONewConnectionConfigureScreen = function SSONewConnectionConfigureScreen(_
             openToast({ text: message || 'Unable to save connection', type: 'error' });
         case 30:
         case "end": return _context16.stop();
-    } }, _callee15, null, [[3, 26]]); })); }, [connection, type, navigate, manualConfiguration, mutate, ssoUrl, entityId, x509Certificate, attributeMapping, metadataUrl, mutateByUrl, clientId, clientSecret, idp, issuerDerivedValue, issuer, authorizationUrl, tokenUrl, userInfoUrl, jwksUrl, openToast]); var idpValueInputs = type === 'saml' ? { ssoUrl: ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.idpSsoUrlLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.idpSsoUrlLabel), value: ssoUrl, onChange: setSsoUrl })), entityId: ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.idpEntityIdLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.idpEntityIdLabel), value: entityId, onChange: setEntityId })), certificate: ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.x509CertificateLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.x509CertificateLabel), value: x509Certificate, onChange: setX509Certificate })) } : undefined; var stepMap = { copyToIdp: ( /*#__PURE__*/wn.createElement(Accordion, null, /*#__PURE__*/ wn.createElement(AccordionSummary, null, /*#__PURE__*/ wn.createElement(Typography, null, "Copy the following App values to your IdP.")), /*#__PURE__*/ wn.createElement(AccordionDetails, null, /*#__PURE__*/ wn.createElement(SettingsList, null, /*#__PURE__*/ wn.createElement(AppDetails, { connection: connection }))))), copyFromIdp: ( /*#__PURE__*/wn.createElement(Accordion, null, /*#__PURE__*/ wn.createElement(AccordionSummary, null, /*#__PURE__*/ wn.createElement(Typography, null, "Enter the following IdP values.")), /*#__PURE__*/ wn.createElement(AccordionDetails, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, type === 'saml' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, manualConfiguration && idpValueInputs ? idp.idpValueOrder.map(function (key) { return /*#__PURE__*/ wn.createElement(wn.Fragment, { key: key }, idpValueInputs[key]); }) : ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement("label", null, /*#__PURE__*/ wn.createElement(Typography, null, "Enter the ", idp.metadataUrlLabel, " to configure your connection automatically."), /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.metadataUrlLabel), caption: "If you don\u2019t know your ".concat(idp.metadataUrlLabel, ", you can configure your connection manually."), value: metadataUrl, onChange: setMetadataUrl })))), !!idp.metadataUrlLabel && ( /*#__PURE__*/wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat(idp.metadataUrlLabel) : 'Configure manually')))), type === 'oidc' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Input$1, { label: idp.clientIdLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.clientIdLabel), value: clientId, onChange: setClientId }), /*#__PURE__*/ wn.createElement(Input$1, { label: idp.clientSecretLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.clientSecretLabel), value: clientSecret, onChange: setClientSecret }), idp.transformInputToIssuer ? ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.issuerDerivedLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.issuerDerivedLabel), value: issuerDerivedValue, onChange: setIssuerDerivedValue })) : ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.issuerLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.issuerLabel), value: issuer, onChange: setIssuer })), manualConfiguration && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Input$1, { label: "Authorization URL", labelVariant: "body1", placeholder: "Enter Authorization URL", value: authorizationUrl, onChange: setAuthorizationUrl }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Token URL", labelVariant: "body1", placeholder: "Enter Token URL", value: tokenUrl, onChange: setTokenUrl }), /*#__PURE__*/ wn.createElement(Input$1, { label: "User Info URL", labelVariant: "body1", placeholder: "Enter User Info", value: userInfoUrl, onChange: setUserInfoUrl }), /*#__PURE__*/ wn.createElement(Input$1, { label: "JWKS URL", labelVariant: "body1", placeholder: "Enter JWKS URL", value: jwksUrl, onChange: setJwksUrl }))), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat((_a = idp.issuerDerivedLabel) !== null && _a !== void 0 ? _a : idp.issuerLabel) : 'Configure manually'))))))), attributeMapping: type === 'saml' && ( /*#__PURE__*/wn.createElement(Accordion, null, /*#__PURE__*/ wn.createElement(AccordionSummary, null, /*#__PURE__*/ wn.createElement(Typography, null, "Set your ", idp.attributeMappingLabel, ".")), /*#__PURE__*/ wn.createElement(AccordionDetails, null, /*#__PURE__*/ wn.createElement(Typography, null, "The following values are automatically filled based on your IdP. Make changes or add custom mappings."), /*#__PURE__*/ wn.createElement(AttributeMappingTable, { editing: true, localState: attributeMappingState, setLocalState: setAttributeMappingState, remoteState: attributeMappingState })))) }; var steps = idp.setupOrder.map(function (step) { return /*#__PURE__*/ wn.createElement(wn.Fragment, { key: step }, stepMap[step]); }); return /*#__PURE__*/ wn.createElement("form", { onSubmit: handleSubmit }, /*#__PURE__*/ wn.createElement(Modal, { isOpen: block && blocked, close: cancelNavigation, confirm: function confirm() { allowNavigation(); return Promise.resolve(); }, title: "Save ".concat(connectionDisplayName, "?"), confirmButtonText: "Save and complete later", description: 'Your SSO connection is not fully configured. It will remain pending until you complete all necessary configuration steps. You can save your progress and complete later or cancel to finish configuration.' }), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { navigate({ screen: 'connectionsList' }); }, startIcon: /*#__PURE__*/ wn.createElement(ChevronLeft, null) }, "Back to all SSO connections"), /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, "Configure ", connectionDisplayName), /*#__PURE__*/ wn.createElement("div", null, steps), /*#__PURE__*/ wn.createElement(FlexBox, { justifyContent: "flex-end" }, /*#__PURE__*/ wn.createElement(Button, { type: "submit" }, "Create")))); };
+    } }, _callee15, null, [[3, 26]]); })); }, [connection, type, navigate, manualConfiguration, mutate, ssoUrl, entityId, x509Certificate, attributeMapping, metadataUrl, mutateByUrl, clientId, clientSecret, idp, issuerDerivedValue, issuer, authorizationUrl, tokenUrl, userInfoUrl, jwksUrl, openToast]); var idpValueInputs = type === 'saml' ? { ssoUrl: ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.idpSsoUrlLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.idpSsoUrlLabel), value: ssoUrl, onChange: setSsoUrl })), entityId: ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.idpEntityIdLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.idpEntityIdLabel), value: entityId, onChange: setEntityId })), certificate: ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.x509CertificateLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.x509CertificateLabel), value: x509Certificate, onChange: setX509Certificate })) } : undefined; var stepMap = { copyToIdp: ( /*#__PURE__*/wn.createElement(Accordion, null, /*#__PURE__*/ wn.createElement(AccordionSummary, null, /*#__PURE__*/ wn.createElement(Typography, null, "Copy the following App values to your IdP.")), /*#__PURE__*/ wn.createElement(AccordionDetails, null, /*#__PURE__*/ wn.createElement(SettingsList, null, /*#__PURE__*/ wn.createElement(AppDetails, { connection: connection }))))), copyFromIdp: ( /*#__PURE__*/wn.createElement(Accordion, null, /*#__PURE__*/ wn.createElement(AccordionSummary, null, /*#__PURE__*/ wn.createElement(Typography, null, "Enter the following IdP values.")), /*#__PURE__*/ wn.createElement(AccordionDetails, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, type === 'saml' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, manualConfiguration && idpValueInputs ? idp.idpValueOrder.map(function (key) { return /*#__PURE__*/ wn.createElement(wn.Fragment, { key: key }, idpValueInputs[key]); }) : ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement("label", null, /*#__PURE__*/ wn.createElement(Typography, null, "Enter the ", idp.metadataUrlLabel, " to configure your connection automatically."), /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Enter ".concat(idp.metadataUrlLabel), caption: "If you don\u2019t know your ".concat(idp.metadataUrlLabel, ", you can configure your connection manually."), value: metadataUrl, onChange: setMetadataUrl })))), !!idp.metadataUrlLabel && ( /*#__PURE__*/wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat(idp.metadataUrlLabel) : 'Configure manually')))), type === 'oidc' && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Input$1, { label: idp.clientIdLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.clientIdLabel), value: clientId, onChange: setClientId }), /*#__PURE__*/ wn.createElement(Input$1, { label: idp.clientSecretLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.clientSecretLabel), value: clientSecret, onChange: setClientSecret }), idp.transformInputToIssuer ? ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.issuerDerivedLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.issuerDerivedLabel), value: issuerDerivedValue, onChange: setIssuerDerivedValue })) : ( /*#__PURE__*/wn.createElement(Input$1, { label: idp.issuerLabel, labelVariant: "body1", placeholder: "Enter ".concat(idp.issuerLabel), value: issuer, onChange: setIssuer })), manualConfiguration && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Input$1, { label: "Authorization URL", labelVariant: "body1", placeholder: "Enter Authorization URL", value: authorizationUrl, onChange: setAuthorizationUrl }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Token URL", labelVariant: "body1", placeholder: "Enter Token URL", value: tokenUrl, onChange: setTokenUrl }), /*#__PURE__*/ wn.createElement(Input$1, { label: "User Info URL", labelVariant: "body1", placeholder: "Enter User Info", value: userInfoUrl, onChange: setUserInfoUrl }), /*#__PURE__*/ wn.createElement(Input$1, { label: "JWKS URL", labelVariant: "body1", placeholder: "Enter JWKS URL", value: jwksUrl, onChange: setJwksUrl }))), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { setManualConfiguration(!manualConfiguration); } }, manualConfiguration ? "Configure using ".concat((_a = idp.issuerDerivedLabel) !== null && _a !== void 0 ? _a : idp.issuerLabel) : 'Configure manually'))))))), attributeMapping: type === 'saml' && ( /*#__PURE__*/wn.createElement(Accordion, null, /*#__PURE__*/ wn.createElement(AccordionSummary, null, /*#__PURE__*/ wn.createElement(Typography, null, "Set your ", idp.attributeMappingLabel, ".")), /*#__PURE__*/ wn.createElement(AccordionDetails, null, /*#__PURE__*/ wn.createElement(Typography, null, "The following values are automatically filled based on your IdP. Make changes or add custom mappings."), /*#__PURE__*/ wn.createElement(AttributeMappingTable, { editing: true, localState: attributeMappingState, setLocalState: setAttributeMappingState, remoteState: attributeMappingState })))) }; var steps = idp.setupOrder.map(function (step) { return /*#__PURE__*/ wn.createElement(wn.Fragment, { key: step }, stepMap[step]); }); return /*#__PURE__*/ wn.createElement("form", { onSubmit: handleSubmit }, /*#__PURE__*/ wn.createElement(Modal, { isOpen: block && blocked, close: cancelNavigation, confirm: function confirm() { allowNavigation(); return Promise.resolve(); }, title: "Save ".concat(connectionDisplayName, "?"), confirmButtonText: "Save and complete later", description: 'Your SSO connection is not fully configured. It will remain pending until you complete all necessary configuration steps. You can save your progress and complete later or cancel to finish configuration.' }), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { navigate({ screen: 'connectionsList' }); }, startIcon: /*#__PURE__*/ wn.createElement(ChevronLeft$1, null) }, "Back to all SSO connections"), /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, "Configure ", connectionDisplayName), /*#__PURE__*/ wn.createElement("div", null, steps), /*#__PURE__*/ wn.createElement(FlexBox, { justifyContent: "flex-end" }, /*#__PURE__*/ wn.createElement(Button, { type: "submit" }, "Create")))); };
 var SSONewConnectionScreen = function SSONewConnectionScreen() { var _useSsoRouterControll8 = useSsoRouterController(), navigate = _useSsoRouterControll8.navigate; var _h97 = h$4(''), _h98 = _slicedToArray2(_h97, 2), displayName = _h98[0], setDisplayName = _h98[1]; var _h99 = h$4(), _h100 = _slicedToArray2(_h99, 2), idp = _h100[0], setIdp = _h100[1]; var canCreate = displayName && idp; var client = useStytchClient(); var _useSWRConfig4 = useSWRConfig(), mutate = _useSWRConfig4.mutate; var revalidateConnectionList = useRevalidateConnectionList(); var handleSubmit = T$2(function (e) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee17() { var _idpOptions$idp, idpName, type, response; return _regeneratorRuntime().wrap(function _callee17$(_context18) { while (1)
     switch (_context18.prev = _context18.next) {
         case 0:
@@ -10058,10 +10153,10 @@ var SSONewConnectionScreen = function SSONewConnectionScreen() { var _useSsoRout
         }
         case 10:
         case "end": return _context18.stop();
-    } }, _callee17); })); }, [canCreate, client.sso.oidc, client.sso.saml, idp, displayName, mutate, navigate, revalidateConnectionList]); return /*#__PURE__*/ wn.createElement("form", { onSubmit: handleSubmit }, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { navigate({ screen: 'connectionsList' }); }, startIcon: /*#__PURE__*/ wn.createElement(ChevronLeft, null) }, "Back to all SSO connections"), /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, "New SSO Connection"), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, null, "Set a display name for your connection."), /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Text", value: displayName, onChange: setDisplayName, caption: "You will be able to edit this again in the future." })), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, null, "Select your identity provider or choose to configure a custom SAML / OIDC connection."), /*#__PURE__*/ wn.createElement(Select, { placeholder: "Select", selectItems: idpSelectItems, value: idp, onChange: setIdp }), /*#__PURE__*/ wn.createElement(Typography, null, "Once you click \u201CCreate\u201D the SSO connection will be created. If you need to change the connection type after this, you will need to start over.")), /*#__PURE__*/ wn.createElement(FlexBox, { justifyContent: "space-between" }, /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", onClick: function onClick() { navigate({ screen: 'connectionsList' }); } }, "Cancel"), /*#__PURE__*/ wn.createElement(Button, { type: "submit", disabled: !canCreate }, "Create")))); };
-var routeMap$1 = { connectionDetails: SSOConnectionDetailsScreen, connectionsList: SSOConnectionsScreen, newConnection: SSONewConnectionScreen, newConnectionConfigure: SSONewConnectionConfigureScreen };
-var initialRoute$1 = { screen: 'connectionsList' };
-var Content$1 = function Content$1() { var _useAdminPortalConfig2 = useAdminPortalConfig(), adminPortalConfig = _useAdminPortalConfig2.data, adminPortalConfigError = _useAdminPortalConfig2.error; var _useRbac13 = useRbac('stytch.sso', 'get'), canGetSso = _useRbac13.data; if (adminPortalConfigError) {
+    } }, _callee17); })); }, [canCreate, client.sso.oidc, client.sso.saml, idp, displayName, mutate, navigate, revalidateConnectionList]); return /*#__PURE__*/ wn.createElement("form", { onSubmit: handleSubmit }, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", compact: true, onClick: function onClick() { navigate({ screen: 'connectionsList' }); }, startIcon: /*#__PURE__*/ wn.createElement(ChevronLeft$1, null) }, "Back to all SSO connections"), /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, "New SSO Connection"), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, null, "Set a display name for your connection."), /*#__PURE__*/ wn.createElement(Input$1, { placeholder: "Text", value: displayName, onChange: setDisplayName, caption: "You will be able to edit this again in the future." })), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, null, "Select your identity provider or choose to configure a custom SAML / OIDC connection."), /*#__PURE__*/ wn.createElement(Select, { placeholder: "Select", selectItems: idpSelectItems, value: idp, onChange: setIdp }), /*#__PURE__*/ wn.createElement(Typography, null, "Once you click \u201CCreate\u201D the SSO connection will be created. If you need to change the connection type after this, you will need to start over.")), /*#__PURE__*/ wn.createElement(FlexBox, { justifyContent: "space-between" }, /*#__PURE__*/ wn.createElement(Button, { variant: "ghost", onClick: function onClick() { navigate({ screen: 'connectionsList' }); } }, "Cancel"), /*#__PURE__*/ wn.createElement(Button, { type: "submit", disabled: !canCreate }, "Create")))); };
+var routeMap$2 = { connectionDetails: SSOConnectionDetailsScreen, connectionsList: SSOConnectionsScreen, newConnection: SSONewConnectionScreen, newConnectionConfigure: SSONewConnectionConfigureScreen };
+var initialRoute$2 = { screen: 'connectionsList' };
+var Content$2 = function Content$2() { var _useAdminPortalConfig2 = useAdminPortalConfig(), adminPortalConfig = _useAdminPortalConfig2.data, adminPortalConfigError = _useAdminPortalConfig2.error; var _useRbac13 = useRbac('stytch.sso', 'get'), canGetSso = _useRbac13.data; if (adminPortalConfigError) {
     return /*#__PURE__*/ wn.createElement(Alert, null, "SSO Connections could not be loaded. Please contact your admin if you think this is a mistake.");
 } if (canGetSso === undefined || !adminPortalConfig) {
     return /*#__PURE__*/ wn.createElement(PageLoadingIndicator, null);
@@ -10069,8 +10164,8 @@ var Content$1 = function Content$1() { var _useAdminPortalConfig2 = useAdminPort
     return /*#__PURE__*/ wn.createElement(Alert, null, "You do not have permission to view SSO Connections. Please contact your admin if you think this is a mistake.");
 } if (!adminPortalConfig.sso_config.sso_enabled) {
     return /*#__PURE__*/ wn.createElement(Alert, null, "SSO Connections are not supported. Please contact your admin if you think this is a mistake.");
-} return /*#__PURE__*/ wn.createElement(SsoRouterProvider, { initialRoute: initialRoute$1 }, /*#__PURE__*/ wn.createElement(SsoRouter, { routeMap: routeMap$1 })); };
-var AdminPortalSSO$1 = function AdminPortalSSO(props) { var initialClient = _$1(props.client); p$3(function () { readB2BInternals(initialClient.current).networkClient.logEvent({ name: 'render_b2b_admin_portal_sso', details: {} }); }, []); return /*#__PURE__*/ wn.createElement(AdminPortalWrapper, { options: props }, /*#__PURE__*/ wn.createElement(Content$1, null)); };
+} return /*#__PURE__*/ wn.createElement(SsoRouterProvider, { initialRoute: initialRoute$2 }, /*#__PURE__*/ wn.createElement(SsoRouter, { routeMap: routeMap$2 })); };
+var AdminPortalSSO$1 = function AdminPortalSSO(props) { var initialClient = _$1(props.client); p$3(function () { readB2BInternals(initialClient.current).networkClient.logEvent({ name: 'render_b2b_admin_portal_sso', details: {} }); }, []); return /*#__PURE__*/ wn.createElement(AdminPortalWrapper, { options: props }, /*#__PURE__*/ wn.createElement(Content$2, null)); };
 var mountAdminPortalSSO = makeAdminPortalComponentMountFn(AdminPortalSSO$1, 'stytch-b2b-admin-portal-sso-ui', 'mountAdminPortalSSO');
 var _createRouter2 = createRouter(), OrgSettingsRouterProvider = _createRouter2.RouterProvider, OrgSettingsRouter = _createRouter2.Router, useOrgSettingsRouterController = _createRouter2.useRouterController;
 var isEmptyObject = function isEmptyObject(value) { for (var prop in value) {
@@ -10078,9 +10173,9 @@ var isEmptyObject = function isEmptyObject(value) { for (var prop in value) {
         return false;
     }
 } return true; };
-var useMutateOrgSettingsDetails = function useMutateOrgSettingsDetails() { var _useMutateOrganizatio3 = useMutateOrganization(), mutate = _useMutateOrganizatio3.mutate; var setOrgDetails = function setOrgDetails(_ref101) { var organizationName = _ref101.organizationName, organizationSlug = _ref101.organizationSlug; return mutate(Object.assign(Object.assign({}, organizationName && { organization_name: organizationName }), organizationSlug && { organization_slug: organizationSlug }), { errorMessage: 'Failed to update organization details.' }); }; return { setOrgDetails: setOrgDetails }; };
-var OrgSettingsDetailsBody = function OrgSettingsDetailsBody(_ref102) { var canSetName = _ref102.canSetName, canSetSlug = _ref102.canSetSlug, remoteState = _ref102.remoteState, localState = _ref102.localState, setLocalState = _ref102.setLocalState; var handleNameChange = useStateSliceSetter(setLocalState, 'organizationName'); var handleSlugChange = useStateSliceSetter(setLocalState, 'organizationSlug'); var _useSettingsContainer4 = useSettingsContainer(), editing = _useSettingsContainer4.editing; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsList, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Name" }, editing && canSetName ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter Name", value: localState.organizationName, onChange: handleNameChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2", color: "secondary" }, remoteState.organizationName))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Slug" }, editing && canSetSlug ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter Slug", value: localState.organizationSlug, onChange: handleSlugChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2", color: "secondary" }, remoteState.organizationSlug))))); };
-var OrgSettingsDetailsSection = function OrgSettingsDetailsSection(_ref103) { var orgInfo = _ref103.orgInfo; var _useRbac14 = useRbac('stytch.organization', 'update.info.name'), canSetName = _useRbac14.data; var _useRbac15 = useRbac('stytch.organization', 'update.info.slug'), canSetSlug = _useRbac15.data; var remoteState = F$3(function () { return { organizationName: orgInfo.organization_name, organizationSlug: orgInfo.organization_slug }; }, [orgInfo]); var _useFormState4 = useFormState({ remoteState: remoteState }), localState = _useFormState4.localState, setLocalState = _useFormState4.setLocalState, editing = _useFormState4.editing, handleSetEditing = _useFormState4.handleSetEditing; var _useOrgSettingsRouter = useOrgSettingsRouterController(), useBlockNavigation = _useOrgSettingsRouter.useBlockNavigation; var _useMutateOrgSettings = useMutateOrgSettingsDetails(), setOrgDetails = _useMutateOrgSettings.setOrgDetails; var findMutatedProperties = T$2(function () { var mutatedProperties = {}; if (remoteState.organizationName !== localState.organizationName && localState.organizationName.length > 0) {
+var useMutateOrgSettingsDetails = function useMutateOrgSettingsDetails() { var _useMutateOrganizatio3 = useMutateOrganization(), mutate = _useMutateOrganizatio3.mutate; var setOrgDetails = function setOrgDetails(_ref105) { var organizationName = _ref105.organizationName, organizationSlug = _ref105.organizationSlug; return mutate(Object.assign(Object.assign({}, organizationName && { organization_name: organizationName }), organizationSlug && { organization_slug: organizationSlug }), { errorMessage: 'Failed to update organization details.' }); }; return { setOrgDetails: setOrgDetails }; };
+var OrgSettingsDetailsBody = function OrgSettingsDetailsBody(_ref106) { var canSetName = _ref106.canSetName, canSetSlug = _ref106.canSetSlug, remoteState = _ref106.remoteState, localState = _ref106.localState, setLocalState = _ref106.setLocalState; var handleNameChange = useStateSliceSetter(setLocalState, 'organizationName'); var handleSlugChange = useStateSliceSetter(setLocalState, 'organizationSlug'); var _useSettingsContainer4 = useSettingsContainer(), editing = _useSettingsContainer4.editing; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsList, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Name" }, editing && canSetName ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter Name", value: localState.organizationName, onChange: handleNameChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, remoteState.organizationName))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Slug" }, editing && canSetSlug ? ( /*#__PURE__*/wn.createElement(Input$1, { placeholder: "Enter Slug", value: localState.organizationSlug, onChange: handleSlugChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, remoteState.organizationSlug))))); };
+var OrgSettingsDetailsSection = function OrgSettingsDetailsSection(_ref107) { var orgInfo = _ref107.orgInfo; var _useRbac14 = useRbac('stytch.organization', 'update.info.name'), canSetName = _useRbac14.data; var _useRbac15 = useRbac('stytch.organization', 'update.info.slug'), canSetSlug = _useRbac15.data; var remoteState = F$3(function () { return { organizationName: orgInfo.organization_name, organizationSlug: orgInfo.organization_slug }; }, [orgInfo]); var _useFormState4 = useFormState({ remoteState: remoteState }), localState = _useFormState4.localState, setLocalState = _useFormState4.setLocalState, editing = _useFormState4.editing, handleSetEditing = _useFormState4.handleSetEditing; var _useOrgSettingsRouter = useOrgSettingsRouterController(), useBlockNavigation = _useOrgSettingsRouter.useBlockNavigation; var _useMutateOrgSettings = useMutateOrgSettingsDetails(), setOrgDetails = _useMutateOrgSettings.setOrgDetails; var findMutatedProperties = T$2(function () { var mutatedProperties = {}; if (remoteState.organizationName !== localState.organizationName && localState.organizationName.length > 0) {
     mutatedProperties.organizationName = localState.organizationName;
 } if (remoteState.organizationSlug !== localState.organizationSlug && localState.organizationSlug.length > 0) {
     mutatedProperties.organizationSlug = localState.organizationSlug;
@@ -10098,15 +10193,10 @@ var OrgSettingsDetailsSection = function OrgSettingsDetailsSection(_ref103) { va
         case 5:
         case "end": return _context19.stop();
     } }, _callee18); })); }, [setOrgDetails, findMutatedProperties]); var disableSave = isEmptyObject(findMutatedProperties()); return /*#__PURE__*/ wn.createElement(SettingsContainer, { title: "Details", hasCTA: canSetName || canSetSlug, onSave: handleSave, useBlockNavigation: useBlockNavigation, editing: editing, setEditing: handleSetEditing, disableSave: disableSave }, /*#__PURE__*/ wn.createElement(OrgSettingsDetailsBody, { canSetName: canSetName, canSetSlug: canSetSlug, localState: localState, remoteState: remoteState, setLocalState: setLocalState })); };
-var makeRowStyles = makeStyles(function () { return { rowItemContainer: { maxWidth: DEFAULT_GRID_COLUMN_WIDTH }, rowItemFullWidth: { maxWidth: DEFAULT_MAX_ITEM_WIDTH } }; });
-var RowItemCore = function RowItemCore(_ref104) { var children = _ref104.children, fullWidth = _ref104.fullWidth; var classes = makeRowStyles(); return /*#__PURE__*/ wn.createElement("div", { className: C(classes.rowItemContainer, _defineProperty2({}, classes.rowItemFullWidth, fullWidth)) }, children); };
-var useStyles$2 = makeStyles(function (theme) { var primary = theme.styleConfig.buttons.primary.backgroundColor; var secondary = theme.styleConfig.colors.secondary; var containerBackground = theme.styleConfig.container.backgroundColor; return { root: { width: 46, height: 31, padding: 8, overflow: 'hidden', display: 'flex', boxSizing: 'border-box' }, switchBase: { margin: '2px 3px', '&$checked': { margin: '2px -3px', '& + .MuiSwitch-track': { opacity: 1, backgroundColor: primary } }, '&.Mui-disabled': { '& .MuiSwitch-thumb': { color: secondary }, '& + .MuiSwitch-track': { border: '3px solid', borderColor: secondary, opacity: 1, backgroundColor: containerBackground }, '&$checked': { '& + .MuiSwitch-track': { opacity: 1, backgroundColor: secondary }, '& .MuiSwitch-thumb': { color: containerBackground } } }, '&$checked $thumb': { color: containerBackground } }, thumb: { height: 7, width: 7, margin: 1, boxShadow: 'none', color: primary }, colorSecondary: { '&:hover': { backgroundColor: alpha(containerBackground, 0) }, '&$checked': { '&:hover': { backgroundColor: alpha(containerBackground, 0) } } }, track: { border: '3px solid', borderColor: primary, backgroundColor: containerBackground, borderRadius: 30 / 2, height: 9, opacity: 1 }, checked: {}, disabled: {} }; });
-var stopPropagateOnClick = function stopPropagateOnClick(e) { e.stopPropagation(); };
-var Switch = function Switch(_ref105) { var checked = _ref105.checked, label = _ref105.label, onChange = _ref105.onChange, readOnly = _ref105.readOnly; var classes = useStyles$2(); var handleChange = function handleChange(e) { onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked); }; return /*#__PURE__*/ wn.createElement(RowItemCore, { fullWidth: true }, /*#__PURE__*/ wn.createElement(FormControlLabel$1, { control: /*#__PURE__*/ wn.createElement(MUISwitch, { "aria-label": "".concat(checked ? 'Disable' : 'Enable', " ").concat(label), checked: checked, classes: classes, disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, disabled: readOnly, onChange: handleChange, onClick: stopPropagateOnClick }), disabled: readOnly, label: /*#__PURE__*/ wn.createElement(FlexBox, null, label && ( /*#__PURE__*/wn.createElement(Typography, { variant: 'body2', disabled: readOnly }, label))) })); };
-var makeCheckboxStyles = makeStylesFactory(function (theme) { return { checkbox: { '&:hover, &.Mui-checked:hover': { backgroundColor: 'transparent' }, '&.MuiCheckbox-root': { padding: 0 }, marginRight: theme.spacing(0.5), marginTop: theme.spacing(0.5) }, checkboxContainer: { display: 'flex', alignItems: 'flex-start', marginLeft: theme.spacing(-0.25), width: 'fit-content' } }; });
-var CheckboxCore = function CheckboxCore(_ref106) { var autoFocus = _ref106.autoFocus, checked = _ref106.checked, disabled = _ref106.disabled, indeterminate = _ref106.indeterminate, label = _ref106.label, onClick = _ref106.onClick, value = _ref106.value, classes = _ref106.classes; var handleChange = function handleChange(e) { onClick === null || onClick === void 0 ? void 0 : onClick(e.target.checked, e.target.name); }; return /*#__PURE__*/ wn.createElement(FormControlLabel$1, { className: classes.checkboxContainer, control: /*#__PURE__*/ wn.createElement(MUICheckbox, { autoFocus: autoFocus, checked: checked, className: classes.checkbox, color: "primary", disableRipple: true, indeterminate: indeterminate, name: value, onChange: handleChange, size: "small" }), disabled: disabled, label: label && ( /*#__PURE__*/wn.createElement("div", { style: { paddingTop: '4px' } }, /*#__PURE__*/ wn.createElement(Typography, { variant: 'body2', disabled: disabled }, label))) }); };
-var useStyles$1 = makeCheckboxStyles(function (theme) { return { checkbox: { '&.MuiCheckbox-root': { padding: 0, color: theme.styleConfig.colors.primary, '&.Mui-disabled': { color: theme.styleConfig.colors.secondary } } } }; });
-var Checkbox = function Checkbox(_a) { var props = __rest(_a, []); var classes = useStyles$1(); return /*#__PURE__*/ wn.createElement(CheckboxCore, Object.assign({}, props, { classes: classes })); };
+var makeCheckboxStyles = makeStylesFactory(function (theme) { return { checkbox: _defineProperty2(_defineProperty2(_defineProperty2(_defineProperty2({}, "&:hover, &.".concat(classNamePrefix, "Mui-checked:hover"), { backgroundColor: 'transparent' }), "&.".concat(classNamePrefix, "MuiCheckbox-root"), { padding: 0 }), "marginRight", theme.spacing(0.5)), "marginTop", theme.spacing(0.5)), checkboxContainer: { display: 'flex', alignItems: 'flex-start', marginLeft: theme.spacing(-0.25), width: 'fit-content' } }; });
+var CheckboxCore = function CheckboxCore(_ref108) { var autoFocus = _ref108.autoFocus, checked = _ref108.checked, disabled = _ref108.disabled, indeterminate = _ref108.indeterminate, label = _ref108.label, onClick = _ref108.onClick, value = _ref108.value, classes = _ref108.classes; var handleChange = function handleChange(e) { onClick === null || onClick === void 0 ? void 0 : onClick(e.target.checked, e.target.name); }; return /*#__PURE__*/ wn.createElement(FormControlLabel$1, { className: classes.checkboxContainer, control: /*#__PURE__*/ wn.createElement(MUICheckbox, { autoFocus: autoFocus, checked: checked, className: classes.checkbox, color: "primary", disableRipple: true, indeterminate: indeterminate, name: value, onChange: handleChange, size: "small" }), disabled: disabled, label: label && ( /*#__PURE__*/wn.createElement("div", { style: { paddingTop: '4px' } }, /*#__PURE__*/ wn.createElement(Typography, { variant: 'body2', disabled: disabled }, label))) }); };
+var useStyles$1 = makeCheckboxStyles(function (theme) { return { checkbox: _defineProperty2({}, "&.".concat(classNamePrefix, "MuiCheckbox-root"), { padding: 0, color: theme.styleConfig.colors.primary, '&.Mui-disabled': { color: theme.styleConfig.colors.secondary } }), checkboxContainer: { display: 'flex', alignItems: 'center' } }; });
+var Checkbox = function Checkbox(props) { var classes = useStyles$1(); return /*#__PURE__*/ wn.createElement(CheckboxCore, Object.assign({}, props, { classes: classes })); };
 var PaddingLeft = He.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: 34px;\n"])));
 var arraysHaveSameContents = function arraysHaveSameContents(arr1, arr2) { if (Array.isArray(arr1) && Array.isArray(arr2)) {
     if (arr1.length !== arr2.length) {
@@ -10121,7 +10211,7 @@ var arraysHaveSameContents = function arraysHaveSameContents(arr1, arr2) { if (A
 var allowedAuthMethodsLabelMap = { magic_link: 'Email Magic Links', sso: 'Single Sign-On', google_oauth: 'Google OAuth', microsoft_oauth: 'Microsoft OAuth', password: 'Password' };
 var allowedMfaMethodsLabelMap = { sms_otp: 'SMS OTP', totp: 'TOTP' };
 var useMutateAuthSettings$1 = function useMutateAuthSettings$1() { var _useMutateOrganizatio4 = useMutateOrganization(), mutate = _useMutateOrganizatio4.mutate; var setOrgAuthSettings = function setOrgAuthSettings(mutatedProperties) { return mutate(mutatedProperties, { errorMessage: 'Failed to update authorization details.' }); }; return { setOrgAuthSettings: setOrgAuthSettings }; };
-var OrgSettingsAuthenticationSettingsBody = function OrgSettingsAuthenticationSettingsBody(_ref107) { var orgConfigAuthMethods = _ref107.orgConfigAuthMethods, orgConfigMfaMethods = _ref107.orgConfigMfaMethods, canSetAllowedAuthMethods = _ref107.canSetAllowedAuthMethods, canSetMfaPolicy = _ref107.canSetMfaPolicy, canSetAllowedMfaMethods = _ref107.canSetAllowedMfaMethods, mfaPolicyConfig = _ref107.mfaPolicyConfig, localState = _ref107.localState, setLocalState = _ref107.setLocalState; var _useSettingsContainer5 = useSettingsContainer(), editing = _useSettingsContainer5.editing; var handlePrimaryAuthChange = function handlePrimaryAuthChange(value) { setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { isPrimaryAuthAllAllowed: value }); }); }; var handleMfaPolicyChange = function handleMfaPolicyChange(value) { setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { isMfaPolicyRequiredForAll: value }); }); }; var handleSecondaryAuthChange = function handleSecondaryAuthChange(value) { setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { isSecondaryAuthAllAllowed: value }); }); }; var isAuthMethodChecked = function isAuthMethodChecked(authMethod) { var _a; return (_a = localState.allowedAuthMethods) === null || _a === void 0 ? void 0 : _a.includes(authMethod); }; var isMfaMethodChecked = function isMfaMethodChecked(mfaMethod) { var _a; return (_a = localState.allowedMfaMethods) === null || _a === void 0 ? void 0 : _a.includes(mfaMethod); }; var handleAllowedAuthMethodClick = function handleAllowedAuthMethodClick(authMethod) { if (localState.allowedAuthMethods.includes(authMethod)) {
+var OrgSettingsAuthenticationSettingsBody = function OrgSettingsAuthenticationSettingsBody(_ref109) { var orgConfigAuthMethods = _ref109.orgConfigAuthMethods, orgConfigMfaMethods = _ref109.orgConfigMfaMethods, canSetAllowedAuthMethods = _ref109.canSetAllowedAuthMethods, canSetMfaPolicy = _ref109.canSetMfaPolicy, canSetAllowedMfaMethods = _ref109.canSetAllowedMfaMethods, mfaPolicyConfig = _ref109.mfaPolicyConfig, localState = _ref109.localState, setLocalState = _ref109.setLocalState; var _useSettingsContainer5 = useSettingsContainer(), editing = _useSettingsContainer5.editing; var handlePrimaryAuthChange = function handlePrimaryAuthChange(value) { setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { isPrimaryAuthAllAllowed: value }); }); }; var handleMfaPolicyChange = function handleMfaPolicyChange(value) { setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { isMfaPolicyRequiredForAll: value }); }); }; var handleSecondaryAuthChange = function handleSecondaryAuthChange(value) { setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { isSecondaryAuthAllAllowed: value }); }); }; var isAuthMethodChecked = function isAuthMethodChecked(authMethod) { var _a; return (_a = localState.allowedAuthMethods) === null || _a === void 0 ? void 0 : _a.includes(authMethod); }; var isMfaMethodChecked = function isMfaMethodChecked(mfaMethod) { var _a; return (_a = localState.allowedMfaMethods) === null || _a === void 0 ? void 0 : _a.includes(mfaMethod); }; var handleAllowedAuthMethodClick = function handleAllowedAuthMethodClick(authMethod) { if (localState.allowedAuthMethods.includes(authMethod)) {
     setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { allowedAuthMethods: prevState.allowedAuthMethods.filter(function (method) { return method !== authMethod; }) }); });
 }
 else {
@@ -10131,10 +10221,10 @@ else {
 }
 else {
     setLocalState(function (prevState) { var _a; return Object.assign(Object.assign({}, prevState), { allowedMfaMethods: [].concat(_toConsumableArray2((_a = prevState === null || prevState === void 0 ? void 0 : prevState.allowedMfaMethods) !== null && _a !== void 0 ? _a : []), [mfaMethod]) }); });
-} }; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Primary authentication" }, editing && !localState.isPrimaryAuthAllAllowed && !!localState.allowedAuthMethods && localState.allowedAuthMethods.length === 0 && ( /*#__PURE__*/wn.createElement(Alert, null, 'Please select at least one primary authentication method.')), /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetAllowedAuthMethods, label: 'Allow all primary auth methods', checked: localState.isPrimaryAuthAllAllowed, onChange: handlePrimaryAuthChange }), !localState.isPrimaryAuthAllAllowed && ( /*#__PURE__*/wn.createElement(PaddingLeft, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "row", flexWrap: "wrap" }, orgConfigAuthMethods.map(function (authMethod) { var label = allowedAuthMethodsLabelMap[authMethod]; return /*#__PURE__*/ wn.createElement(Checkbox, { key: authMethod, label: label, disabled: !editing, checked: isAuthMethodChecked(authMethod), onClick: function onClick() { return handleAllowedAuthMethodClick(authMethod); } }); }))))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Secondary authentication" }, editing && !localState.isSecondaryAuthAllAllowed && !!localState.allowedMfaMethods && localState.allowedMfaMethods.length === 0 && ( /*#__PURE__*/wn.createElement(Alert, null, 'Please select at least one secondary authentication method.')), /*#__PURE__*/ wn.createElement(Typography, { variant: 'body2' }, 'All members logging in will be required to set up one of the allowed secondary auth methods.'), mfaPolicyConfig && ( /*#__PURE__*/wn.createElement(Switch, { readOnly: !editing || !canSetMfaPolicy, label: 'Require MFA for all users', checked: localState.isMfaPolicyRequiredForAll, onChange: handleMfaPolicyChange })), /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetAllowedMfaMethods, label: 'Allow all secondary auth methods', checked: localState.isSecondaryAuthAllAllowed, onChange: handleSecondaryAuthChange }), !localState.isSecondaryAuthAllAllowed && ( /*#__PURE__*/wn.createElement(PaddingLeft, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "row", flexWrap: "wrap" }, orgConfigMfaMethods.map(function (authMethod) { var label = allowedMfaMethodsLabelMap[authMethod]; return /*#__PURE__*/ wn.createElement(Checkbox, { key: authMethod, label: label, disabled: !editing || !canSetAllowedMfaMethods, checked: isMfaMethodChecked(authMethod), onClick: function onClick() { return handleAllowedMfaMethodClick(authMethod); } }); })))))); };
+} }; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Primary authentication" }, editing && !localState.isPrimaryAuthAllAllowed && !!localState.allowedAuthMethods && localState.allowedAuthMethods.length === 0 && ( /*#__PURE__*/wn.createElement(Alert, null, 'Please select at least one primary authentication method.')), /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetAllowedAuthMethods, label: 'Allow all primary auth methods', checked: localState.isPrimaryAuthAllAllowed, onChange: handlePrimaryAuthChange }), !localState.isPrimaryAuthAllAllowed && ( /*#__PURE__*/wn.createElement(PaddingLeft, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "row", flexWrap: "wrap" }, orgConfigAuthMethods.map(function (authMethod) { var label = allowedAuthMethodsLabelMap[authMethod]; return /*#__PURE__*/ wn.createElement(Checkbox, { key: authMethod, label: label, disabled: !editing, checked: isAuthMethodChecked(authMethod), onClick: function onClick() { return handleAllowedAuthMethodClick(authMethod); } }); }))))), mfaPolicyConfig && ( /*#__PURE__*/wn.createElement(SettingsSection, { title: "Secondary authentication" }, editing && !localState.isSecondaryAuthAllAllowed && !!localState.allowedMfaMethods && localState.allowedMfaMethods.length === 0 && ( /*#__PURE__*/wn.createElement(Alert, null, 'Please select at least one secondary authentication method.')), /*#__PURE__*/ wn.createElement(Typography, { variant: 'body2' }, 'All members logging in will be required to set up one of the allowed secondary auth methods.'), /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetMfaPolicy, label: 'Require MFA for all users', checked: localState.isMfaPolicyRequiredForAll, onChange: handleMfaPolicyChange }), /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetAllowedMfaMethods, label: 'Allow all secondary auth methods', checked: localState.isSecondaryAuthAllAllowed, onChange: handleSecondaryAuthChange }), !localState.isSecondaryAuthAllAllowed && ( /*#__PURE__*/wn.createElement(PaddingLeft, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "row", flexWrap: "wrap" }, orgConfigMfaMethods.map(function (authMethod) { var label = allowedMfaMethodsLabelMap[authMethod]; return /*#__PURE__*/ wn.createElement(Checkbox, { key: authMethod, label: label, disabled: !editing || !canSetAllowedMfaMethods, checked: isMfaMethodChecked(authMethod), onClick: function onClick() { return handleAllowedMfaMethodClick(authMethod); } }); }))))))); };
 var configAuthMethodMap = { emailMagicLinks: 'magic_link', sso: 'sso', password: 'password', oauthGoogle: 'google_oauth', oauthMicrosoft: 'microsoft_oauth' };
 var configMfaMethodMap = { smsOtp: 'sms_otp', totp: 'totp' };
-var OrgSettingsAuthenticationSettingsSection = function OrgSettingsAuthenticationSettingsSection(_ref108) { var orgInfo = _ref108.orgInfo; var _useRbac16 = useRbac('stytch.organization', 'update.settings.allowed-auth-methods'), canSetAllowedAuthMethods = _useRbac16.data; var _useRbac17 = useRbac('stytch.organization', 'update.settings.mfa-policy'), canSetMfaPolicy = _useRbac17.data; var _useRbac18 = useRbac('stytch.organization', 'update.settings.allowed-mfa-methods'), canSetAllowedMfaMethods = _useRbac18.data; var _useMutateAuthSetting = useMutateAuthSettings$1(), setOrgAuthSettings = _useMutateAuthSetting.setOrgAuthSettings; var _useAdminPortalConfig3 = useAdminPortalConfig(), adminPortalConfig = _useAdminPortalConfig3.data; var mfaPolicyConfig = adminPortalConfig === null || adminPortalConfig === void 0 ? void 0 : adminPortalConfig.organization_config.mfa_controls_enabled; var orgUIConfig = useAdminPortalOrgUIConfig(); var _F = F$3(function () { var _a, _b; var authMethods = (_a = orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedAuthMethods) !== null && _a !== void 0 ? _a : Object.keys(configAuthMethodMap); var mfaMethods = (_b = orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedMfaAuthMethods) !== null && _b !== void 0 ? _b : Object.keys(configMfaMethodMap); var mappedAuthMethods = authMethods.map(function (method) { return configAuthMethodMap[method]; }).filter(isTruthy); var mappedMfaMethods = mfaMethods.map(function (method) { return configMfaMethodMap[method]; }).filter(isTruthy); return { orgConfigAuthMethods: mappedAuthMethods, orgConfigMfaMethods: mappedMfaMethods }; }, [orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedAuthMethods, orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedMfaAuthMethods]), orgConfigAuthMethods = _F.orgConfigAuthMethods, orgConfigMfaMethods = _F.orgConfigMfaMethods; var remoteState = F$3(function () { return { authMethods: orgInfo.auth_methods, allowedAuthMethods: orgInfo.allowed_auth_methods, mfaPolicy: orgInfo.mfa_policy, mfaMethods: orgInfo.mfa_methods, allowedMfaMethods: orgInfo.allowed_mfa_methods, isPrimaryAuthAllAllowed: orgInfo.auth_methods === 'ALL_ALLOWED', isSecondaryAuthAllAllowed: orgInfo.mfa_methods === 'ALL_ALLOWED', isMfaPolicyRequiredForAll: orgInfo.mfa_policy === 'REQUIRED_FOR_ALL' }; }, [orgInfo.allowed_auth_methods, orgInfo.allowed_mfa_methods, orgInfo.auth_methods, orgInfo.mfa_methods, orgInfo.mfa_policy]); var _useFormState5 = useFormState({ remoteState: remoteState }), localState = _useFormState5.localState, setLocalState = _useFormState5.setLocalState, editing = _useFormState5.editing, handleSetEditing = _useFormState5.handleSetEditing; var _useOrgSettingsRouter2 = useOrgSettingsRouterController(), useBlockNavigation = _useOrgSettingsRouter2.useBlockNavigation; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee19() { var mutatedProperties; return _regeneratorRuntime().wrap(function _callee19$(_context20) { while (1)
+var OrgSettingsAuthenticationSettingsSection = function OrgSettingsAuthenticationSettingsSection(_ref110) { var orgInfo = _ref110.orgInfo; var _useRbac16 = useRbac('stytch.organization', 'update.settings.allowed-auth-methods'), canSetAllowedAuthMethods = _useRbac16.data; var _useRbac17 = useRbac('stytch.organization', 'update.settings.mfa-policy'), canSetMfaPolicy = _useRbac17.data; var _useRbac18 = useRbac('stytch.organization', 'update.settings.allowed-mfa-methods'), canSetAllowedMfaMethods = _useRbac18.data; var _useMutateAuthSetting = useMutateAuthSettings$1(), setOrgAuthSettings = _useMutateAuthSetting.setOrgAuthSettings; var _useAdminPortalConfig3 = useAdminPortalConfig(), adminPortalConfig = _useAdminPortalConfig3.data; var mfaPolicyConfig = adminPortalConfig === null || adminPortalConfig === void 0 ? void 0 : adminPortalConfig.organization_config.mfa_controls_enabled; var orgUIConfig = useAdminPortalOrgUIConfig(); var _F = F$3(function () { var _a, _b; var authMethods = (_a = orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedAuthMethods) !== null && _a !== void 0 ? _a : Object.keys(configAuthMethodMap); var mfaMethods = (_b = orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedMfaAuthMethods) !== null && _b !== void 0 ? _b : Object.keys(configMfaMethodMap); var mappedAuthMethods = authMethods.map(function (method) { return configAuthMethodMap[method]; }).filter(isTruthy); var mappedMfaMethods = mfaMethods.map(function (method) { return configMfaMethodMap[method]; }).filter(isTruthy); return { orgConfigAuthMethods: mappedAuthMethods, orgConfigMfaMethods: mappedMfaMethods }; }, [orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedAuthMethods, orgUIConfig === null || orgUIConfig === void 0 ? void 0 : orgUIConfig.allowedMfaAuthMethods]), orgConfigAuthMethods = _F.orgConfigAuthMethods, orgConfigMfaMethods = _F.orgConfigMfaMethods; var remoteState = F$3(function () { return { authMethods: orgInfo.auth_methods, allowedAuthMethods: orgInfo.allowed_auth_methods, mfaPolicy: orgInfo.mfa_policy, mfaMethods: orgInfo.mfa_methods, allowedMfaMethods: orgInfo.allowed_mfa_methods, isPrimaryAuthAllAllowed: orgInfo.auth_methods === 'ALL_ALLOWED', isSecondaryAuthAllAllowed: orgInfo.mfa_methods === 'ALL_ALLOWED', isMfaPolicyRequiredForAll: orgInfo.mfa_policy === 'REQUIRED_FOR_ALL' }; }, [orgInfo.allowed_auth_methods, orgInfo.allowed_mfa_methods, orgInfo.auth_methods, orgInfo.mfa_methods, orgInfo.mfa_policy]); var _useFormState5 = useFormState({ remoteState: remoteState }), localState = _useFormState5.localState, setLocalState = _useFormState5.setLocalState, editing = _useFormState5.editing, handleSetEditing = _useFormState5.handleSetEditing; var _useOrgSettingsRouter2 = useOrgSettingsRouterController(), useBlockNavigation = _useOrgSettingsRouter2.useBlockNavigation; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee19() { var mutatedProperties; return _regeneratorRuntime().wrap(function _callee19$(_context20) { while (1)
     switch (_context20.prev = _context20.next) {
         case 0:
             mutatedProperties = {};
@@ -10162,20 +10252,21 @@ var OrgSettingsAuthenticationSettingsSection = function OrgSettingsAuthenticatio
         case 9:
         case "end": return _context20.stop();
     } }, _callee19); })); }, [localState, remoteState, setOrgAuthSettings]); var handleCancel = T$2(function () { setLocalState(remoteState); }, [remoteState, setLocalState]); var disableSave = F$3(function () { var isDeepEqual = arraysHaveSameContents(localState.allowedAuthMethods, remoteState.allowedAuthMethods) && arraysHaveSameContents(localState.allowedMfaMethods, remoteState.allowedMfaMethods) && localState.isPrimaryAuthAllAllowed === remoteState.isPrimaryAuthAllAllowed && localState.isMfaPolicyRequiredForAll === remoteState.isMfaPolicyRequiredForAll && localState.isSecondaryAuthAllAllowed === remoteState.isSecondaryAuthAllAllowed; var allowPrimaryAuth = !localState.isPrimaryAuthAllAllowed && !!localState.allowedAuthMethods && localState.allowedAuthMethods.length === 0; var allowSecondaryAuth = !localState.isSecondaryAuthAllAllowed && localState.allowedMfaMethods && localState.allowedMfaMethods.length === 0; return isDeepEqual || allowPrimaryAuth || allowSecondaryAuth; }, [remoteState, localState]); return /*#__PURE__*/ wn.createElement(SettingsContainer, { title: "Authentication Settings", hasCTA: canSetAllowedAuthMethods || canSetMfaPolicy || canSetAllowedMfaMethods, onSave: handleSave, useBlockNavigation: useBlockNavigation, editing: editing, setEditing: handleSetEditing, disableSave: disableSave, onCancel: handleCancel }, /*#__PURE__*/ wn.createElement(OrgSettingsAuthenticationSettingsBody, { canSetAllowedAuthMethods: canSetAllowedAuthMethods, canSetMfaPolicy: canSetMfaPolicy, canSetAllowedMfaMethods: canSetAllowedMfaMethods, localState: localState, setLocalState: setLocalState, remoteState: remoteState, orgConfigAuthMethods: orgConfigAuthMethods, orgConfigMfaMethods: orgConfigMfaMethods, mfaPolicyConfig: mfaPolicyConfig })); };
-var roleAssignmentsItemRenderers = function roleAssignmentsItemRenderers(idMap) { return [{ title: 'Role', getValue: function getValue(role) { return /*#__PURE__*/ wn.createElement(Tag, null, role.role_id); } }, { title: 'Number of Sources Assigned', getValue: function getValue(role) { var _a, _b; return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2", color: "secondary" }, String((_b = (_a = idMap[role.role_id]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)); } }]; };
+var useRoles = function useRoles() { var _a; var b2bInternals = useB2BInternals(); var _h101 = h$4((_a = b2bInternals.bootstrap.getSync().rbacPolicy) === null || _a === void 0 ? void 0 : _a.roles), _h102 = _slicedToArray2(_h101, 2), roles = _h102[0], setRoles = _h102[1]; p$3(function () { b2bInternals.bootstrap.getAsync().then(function (value) { var _a; setRoles((_a = value.rbacPolicy) === null || _a === void 0 ? void 0 : _a.roles); }); }); return roles; };
+var roleAssignmentsItemRenderers = function roleAssignmentsItemRenderers(idMap) { return [{ title: 'Role', getValue: function getValue(role) { return /*#__PURE__*/ wn.createElement(Tag, null, role.role_id); } }, { title: 'Number of Sources Assigned', getValue: function getValue(role) { var _a, _b; return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, String((_b = (_a = idMap[role.role_id]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)); } }]; };
 var roleAssigmnentsKeyExtractor = function roleAssigmnentsKeyExtractor(role) { return role.role_id; };
 var roleItemRendererer = [{ title: 'Source', getValue: function getValue(value) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, value.source); } }, { title: 'Display Name', getValue: function getValue(value) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, value.displayName); } }, { title: 'Groups', getValue: function getValue(value) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, value.source === 'SSO' ? value.groups : ''); } }];
 var roleKeyExtractor = function roleKeyExtractor(role) { return role.displayName; };
-var useMutateRoleAssignments = function useMutateRoleAssignments() { var _useMutateOrganizatio5 = useMutateOrganization(), mutate = _useMutateOrganizatio5.mutate; var setOrgEmailAssignments = function setOrgEmailAssignments(_ref109) { var idMap = _ref109.idMap; var rbacEmails = []; Object.entries(idMap).forEach(function (_ref110) { var _ref111 = _slicedToArray2(_ref110, 2), roleId = _ref111[0], values = _ref111[1]; values.forEach(function (value) { if (value.source === 'Email') {
+var useMutateRoleAssignments = function useMutateRoleAssignments() { var _useMutateOrganizatio5 = useMutateOrganization(), mutate = _useMutateOrganizatio5.mutate; var setOrgEmailAssignments = function setOrgEmailAssignments(_ref111) { var idMap = _ref111.idMap; var rbacEmails = []; Object.entries(idMap).forEach(function (_ref112) { var _ref113 = _slicedToArray2(_ref112, 2), roleId = _ref113[0], values = _ref113[1]; values.forEach(function (value) { if (value.source === 'Email') {
     rbacEmails.push({ role_id: roleId, domain: value.displayName });
 } }); }); return mutate({ rbac_email_implicit_role_assignments: rbacEmails }, { errorMessage: 'Failed to update email role assignments.' }); }; return { setOrgEmailAssignments: setOrgEmailAssignments }; };
-var RoleTable = function RoleTable(_ref112) { var localState = _ref112.localState, remoteState = _ref112.remoteState, editing = _ref112.editing, setLocalState = _ref112.setLocalState, role = _ref112.role, canUpdateSso = _ref112.canUpdateSso; var _a; var roleId = role.role_id; var items = (_a = (editing ? localState : remoteState).idMap[roleId]) !== null && _a !== void 0 ? _a : []; return /*#__PURE__*/ wn.createElement(TableContainer$1, { component: Paper$1, variant: 'outlined' }, /*#__PURE__*/ wn.createElement(Table, { itemRenderer: roleItemRendererer, items: items, rowKeyExtractor: roleKeyExtractor, disableBottomBorder: true, getItemActionProps: editing ? function (roleAssignment) { return { warningAction: roleAssignment.source === 'Email' || roleAssignment.source === 'SSO' && canUpdateSso ? { text: 'Delete', onClick: function onClick() { setLocalState(function (state) { var assignments = state.idMap[roleId].filter(function (item) { return item !== roleAssignment; }); return Object.assign(Object.assign({}, state), { idMap: Object.assign(Object.assign({}, state.idMap), _defineProperty2({}, roleId, assignments)) }); }); } } : undefined }; } : undefined })); };
-var filterRoleAssignmentsBy = function filterRoleAssignmentsBy(arr, _ref113) { var source = _ref113.source; return arr.slice().filter(function (val) { return val.source === source; }); };
-var uniqueValuesSplitOnSpaces = function uniqueValuesSplitOnSpaces(_ref114) { var input = _ref114.input; return new Set(input.split(' ').map(function (val) { return val.trim(); }).filter(function (val) { return val.length > 0; })); };
-var OrgSettingsRoleAssignmentsBody = function OrgSettingsRoleAssignmentsBody(_ref115) { var editing = _ref115.editing, ssoSamlConnections = _ref115.ssoSamlConnections, roles = _ref115.roles, localState = _ref115.localState, remoteState = _ref115.remoteState, setLocalState = _ref115.setLocalState, canUpdateSso = _ref115.canUpdateSso, isSsoEnabled = _ref115.isSsoEnabled; var idMap = (editing ? localState : remoteState).idMap; var rolesWithAssignments = roles.filter(function (role) { return idMap[role.role_id].length > 0; }); var itemRenderers = roleAssignmentsItemRenderers(idMap); var _h101 = h$4(null), _h102 = _slicedToArray2(_h101, 2), selectedRole = _h102[0], setSelectedRole = _h102[1]; var _h103 = h$4(null), _h104 = _slicedToArray2(_h103, 2), selectedSource = _h104[0], setSelectedSource = _h104[1]; var _h105 = h$4(''), _h106 = _slicedToArray2(_h105, 2), emailDomain = _h106[0], setEmailDomain = _h106[1]; var _h107 = h$4([{ id: '', groups: '' }]), _h108 = _slicedToArray2(_h107, 2), ssoRoleAssignments = _h108[0], setSsoRoleAssignments = _h108[1]; var idToHasGroupAttributeMapping = ssoSamlConnections.reduce(function (acc, val) { acc[val.connection_id] = !!val.attribute_mapping.groups; return acc; }, {}); var sourceItems = new Set(['Email']); if (isSsoEnabled && canUpdateSso && ssoSamlConnections.length > 0) {
+var RoleTable = function RoleTable(_ref114) { var localState = _ref114.localState, remoteState = _ref114.remoteState, editing = _ref114.editing, setLocalState = _ref114.setLocalState, role = _ref114.role, canUpdateSso = _ref114.canUpdateSso; var _a; var roleId = role.role_id; var items = (_a = (editing ? localState : remoteState).idMap[roleId]) !== null && _a !== void 0 ? _a : []; return /*#__PURE__*/ wn.createElement(TableContainer$1, { component: Paper$1, variant: 'outlined' }, /*#__PURE__*/ wn.createElement(Table, { itemRenderer: roleItemRendererer, items: items, rowKeyExtractor: roleKeyExtractor, disableBottomBorder: true, titleVariant: "caption", getItemActionProps: editing ? function (roleAssignment) { return { warningAction: roleAssignment.source === 'Email' || roleAssignment.source === 'SSO' && canUpdateSso ? { text: 'Delete', onClick: function onClick() { setLocalState(function (state) { var assignments = state.idMap[roleId].filter(function (item) { return item !== roleAssignment; }); return Object.assign(Object.assign({}, state), { idMap: Object.assign(Object.assign({}, state.idMap), _defineProperty2({}, roleId, assignments)) }); }); } } : undefined }; } : undefined })); };
+var filterRoleAssignmentsBy = function filterRoleAssignmentsBy(arr, _ref115) { var source = _ref115.source; return arr.slice().filter(function (val) { return val.source === source; }); };
+var uniqueValuesSplitOnSpaces = function uniqueValuesSplitOnSpaces(_ref116) { var input = _ref116.input; return new Set(input.split(' ').map(function (val) { return val.trim(); }).filter(function (val) { return val.length > 0; })); };
+var OrgSettingsRoleAssignmentsBody = function OrgSettingsRoleAssignmentsBody(_ref117) { var editing = _ref117.editing, ssoSamlConnections = _ref117.ssoSamlConnections, roles = _ref117.roles, localState = _ref117.localState, remoteState = _ref117.remoteState, setLocalState = _ref117.setLocalState, canUpdateSso = _ref117.canUpdateSso, isSsoEnabled = _ref117.isSsoEnabled; var idMap = (editing ? localState : remoteState).idMap; var rolesWithAssignments = roles.filter(function (role) { return idMap[role.role_id].length > 0; }); var itemRenderers = roleAssignmentsItemRenderers(idMap); var _h103 = h$4(null), _h104 = _slicedToArray2(_h103, 2), selectedRole = _h104[0], setSelectedRole = _h104[1]; var _h105 = h$4(null), _h106 = _slicedToArray2(_h105, 2), selectedSource = _h106[0], setSelectedSource = _h106[1]; var _h107 = h$4(''), _h108 = _slicedToArray2(_h107, 2), emailDomain = _h108[0], setEmailDomain = _h108[1]; var _h109 = h$4([{ id: '', groups: '' }]), _h110 = _slicedToArray2(_h109, 2), ssoRoleAssignments = _h110[0], setSsoRoleAssignments = _h110[1]; var _h111 = h$4(new Set()), _h112 = _slicedToArray2(_h111, 2), roleOpenIds = _h112[0], setRoleOpenIds = _h112[1]; var idToHasGroupAttributeMapping = ssoSamlConnections.reduce(function (acc, val) { acc[val.connection_id] = !!val.attribute_mapping.groups; return acc; }, {}); var sourceItems = new Set(['Email']); if (isSsoEnabled && canUpdateSso && ssoSamlConnections.length > 0) {
     sourceItems.add('SSO');
 } var sourceSelectItems = Array.from(sourceItems).map(function (source) { return { label: source, value: source }; }); var addRoleAssignmentModalProps = useModalState(function () { if (!selectedSource)
-    return; var roleId = selectedRole; setLocalState(function (state) { var remoteRoleAssignments = _toConsumableArray2(state.idMap[roleId]); var mergedRoleAssignments = _toConsumableArray2(remoteRoleAssignments); var filteredRoleAssignments = filterRoleAssignmentsBy(remoteRoleAssignments, { source: selectedSource }); if (selectedSource === 'Email') {
+    return; var roleId = selectedRole; setRoleOpenIds(function (prev) { return new Set(_toConsumableArray2(prev).concat(roleId)); }); setLocalState(function (state) { var remoteRoleAssignments = _toConsumableArray2(state.idMap[roleId]); var mergedRoleAssignments = _toConsumableArray2(remoteRoleAssignments); var filteredRoleAssignments = filterRoleAssignmentsBy(remoteRoleAssignments, { source: selectedSource }); if (selectedSource === 'Email') {
     var domains = new Set();
     filteredRoleAssignments.forEach(function (roleAssignment) { domains.add(roleAssignment.displayName); });
     uniqueValuesSplitOnSpaces({ input: emailDomain }).forEach(function (domain) { if (!domains.has(domain)) {
@@ -10186,8 +10277,13 @@ var OrgSettingsRoleAssignmentsBody = function OrgSettingsRoleAssignmentsBody(_re
 else if (selectedSource === 'SSO') {
     var idToGroups = {};
     filteredRoleAssignments.forEach(function (ssoRoleAssignment) { idToGroups[ssoRoleAssignment.id] = new Set([ssoRoleAssignment.groups]); });
-    ssoRoleAssignments.forEach(function (ssoConnection) { var connectionId = ssoConnection.id; if (connectionId.length !== 0) {
-        uniqueValuesSplitOnSpaces({ input: ssoConnection.groups }).forEach(function (group) { var _a, _b; if (!idToGroups[connectionId]) {
+    ssoRoleAssignments.forEach(function (ssoConnection) { var _a, _b; var connectionId = ssoConnection.id; if (connectionId.length !== 0) {
+        var groups = uniqueValuesSplitOnSpaces({ input: ssoConnection.groups });
+        if (groups.size === 0) {
+            mergedRoleAssignments.push({ source: selectedSource, displayName: (_b = (_a = ssoSamlConnections.find(function (val) { return val.connection_id === connectionId; })) === null || _a === void 0 ? void 0 : _a.display_name) !== null && _b !== void 0 ? _b : '', id: ssoConnection.id, groups: '' });
+            return;
+        }
+        groups.forEach(function (group) { var _a, _b; if (!idToGroups[connectionId]) {
             idToGroups[connectionId] = new Set();
         } if (!idToGroups[connectionId].has(group)) {
             mergedRoleAssignments.push({ source: selectedSource, displayName: (_b = (_a = ssoSamlConnections.find(function (val) { return val.connection_id === connectionId; })) === null || _a === void 0 ? void 0 : _a.display_name) !== null && _b !== void 0 ? _b : '', id: ssoConnection.id, groups: group });
@@ -10196,12 +10292,17 @@ else if (selectedSource === 'SSO') {
     } });
 } if (mergedRoleAssignments.length !== remoteRoleAssignments.length) {
     return Object.assign(Object.assign({}, state), { idMap: Object.assign(Object.assign({}, state.idMap), _defineProperty2({}, roleId, mergedRoleAssignments)) });
-} return state; }); }); var showInputContent = !!selectedRole && !!selectedSource; var disableConfirm = !showInputContent || selectedSource === 'Email' && emailDomain.length === 0 || selectedSource === 'SSO' && ssoRoleAssignments.every(function (connection) { return !connection.id; }); var roleSelectItems = F$3(function () { return roles.map(function (role) { return { label: role.role_id, value: role.role_id }; }); }, [roles]); var selectedSsoRoleAssignmentIds = ssoRoleAssignments.map(function (connection) { return connection.id; }); var ssoGroupSelectItems = function ssoGroupSelectItems(currentId) { return ssoSamlConnections.filter(function (_ref116) { var id = _ref116.connection_id; return !selectedSsoRoleAssignmentIds.includes(id) || id === currentId; }).map(function (_ref117) { var id = _ref117.connection_id, displayName = _ref117.display_name; return { label: displayName, value: id }; }); }; var sourceToInputContentMap = { Email: ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Email Domain" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Separate domains by a single space to assign to multiple email domains."), /*#__PURE__*/ wn.createElement(Input$1, { label: "Domain", fullWidth: true, value: emailDomain, onChange: setEmailDomain })))), SSO: ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "SSO" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Enter a Group name to assign a Role at the Group level, or leave blank to assign at the SSO connection level. Separate groups by a single space to assign to multiple groups."), ssoRoleAssignments.map(function (_ref118, index) { var id = _ref118.id, groups = _ref118.groups; var isValidConnection = !!id; var connectionHasGroupMapping = !!idToHasGroupAttributeMapping[id]; var isValidConnectionWithGroupMapping = isValidConnection && connectionHasGroupMapping; var disableGroupInput = !isValidConnectionWithGroupMapping; var groupInputPlaceholder = isValidConnection && !connectionHasGroupMapping ? 'Add a "groups" key first' : 'Enter or leave blank'; var groupInputCaption = isValidConnection && !connectionHasGroupMapping ? 'Add a "groups" key in the SSO Attribute Mapping first to assign group roles.' : undefined; return /*#__PURE__*/ wn.createElement(FlexBox, { key: index, flexDirection: "row", gap: 2, alignItems: "flex-start" }, /*#__PURE__*/ wn.createElement("div", null, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Connection Display Name"), /*#__PURE__*/ wn.createElement(Select, { width: 250, placeholder: "Select", selectItems: selectedRole ? ssoGroupSelectItems(id) : [], value: id, onChange: function onChange(val) { setSsoRoleAssignments(function (connections) { return connections.map(function (connection, currentIndex) { if (currentIndex === index) {
+} return state; }); }); var showInputContent = !!selectedRole && !!selectedSource; var disableConfirm = !showInputContent || selectedSource === 'Email' && emailDomain.length === 0 || selectedSource === 'SSO' && ssoRoleAssignments.every(function (connection) { return !connection.id; }); var roleSelectItems = F$3(function () { return roles.map(function (role) { return { label: role.role_id, value: role.role_id }; }); }, [roles]); var selectedSsoRoleAssignmentIds = ssoRoleAssignments.map(function (connection) { return connection.id; }); var ssoGroupSelectItems = function ssoGroupSelectItems(currentId) { return ssoSamlConnections.filter(function (_ref118) { var id = _ref118.connection_id; return !selectedSsoRoleAssignmentIds.includes(id) || id === currentId; }).map(function (_ref119) { var id = _ref119.connection_id, displayName = _ref119.display_name; return { label: displayName, value: id }; }); }; var sourceToInputContentMap = { Email: ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Email Domain" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Separate domains by a single space to assign to multiple email domains."), /*#__PURE__*/ wn.createElement(Input$1, { label: "Domain", fullWidth: true, value: emailDomain, onChange: setEmailDomain })))), SSO: ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "SSO" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Enter a Group name to assign a Role at the Group level, or leave blank to assign at the SSO connection level. Separate groups by a single space to assign to multiple groups."), ssoRoleAssignments.map(function (_ref120, index) { var id = _ref120.id, groups = _ref120.groups; var isValidConnection = !!id; var connectionHasGroupMapping = !!idToHasGroupAttributeMapping[id]; var isValidConnectionWithGroupMapping = isValidConnection && connectionHasGroupMapping; var disableGroupInput = !isValidConnectionWithGroupMapping; var groupInputPlaceholder = isValidConnection && !connectionHasGroupMapping ? 'Add a "groups" key first' : 'Enter or leave blank'; var groupInputCaption = isValidConnection && !connectionHasGroupMapping ? 'Add a "groups" key in the SSO Attribute Mapping first to assign group roles.' : undefined; return /*#__PURE__*/ wn.createElement(FlexBox, { key: index, flexDirection: "row", gap: 2, alignItems: "flex-start" }, /*#__PURE__*/ wn.createElement(Select, { label: "Connection Display Name", width: 250, placeholder: "Select", selectItems: selectedRole ? ssoGroupSelectItems(id) : [], value: id, onChange: function onChange(val) { setSsoRoleAssignments(function (connections) { return connections.map(function (connection, currentIndex) { if (currentIndex === index) {
             return Object.assign(Object.assign({}, connection), { id: val });
-        } return connection; }); }); } })), /*#__PURE__*/ wn.createElement(Input$1, { label: "Group name", value: groups, disabled: disableGroupInput, placeholder: groupInputPlaceholder, caption: groupInputCaption, onChange: function onChange(val) { setSsoRoleAssignments(function (connections) { return connections.map(function (connection, currentIndex) { var _a; if (currentIndex === index) {
+        } return connection; }); }); } }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Group name", value: groups, disabled: disableGroupInput, placeholder: groupInputPlaceholder, caption: groupInputCaption, onChange: function onChange(val) { setSsoRoleAssignments(function (connections) { return connections.map(function (connection, currentIndex) { var _a; if (currentIndex === index) {
             return Object.assign(Object.assign({}, connection), { groups: val, id: id, hasGroupAttributeMapping: !!((_a = ssoSamlConnections.find(function (ssoSamlConnection) { return ssoSamlConnection.connection_id === val; })) === null || _a === void 0 ? void 0 : _a.attribute_mapping.groups) });
-        } return connection; }); }); } })); }), /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(default_1$6, null), compact: true, disabled: ssoRoleAssignments.length >= ssoSamlConnections.length, onClick: function onClick() { setSsoRoleAssignments(function (connections) { return [].concat(_toConsumableArray2(connections), [{ id: '', groups: '' }]); }); } }, "Add SSO Role assignment")))) }; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, addRoleAssignmentModalProps, { title: "Add Role assignment", confirmButtonText: "Save", disableConfirm: disableConfirm, close: function close() { addRoleAssignmentModalProps.close(); setSelectedRole(null); setSelectedSource(null); setEmailDomain(''); setSsoRoleAssignments([{ id: '', groups: '' }]); } }), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(Select, { label: "Select Role", selectItems: roleSelectItems, value: selectedRole, onChange: function onChange(val) { setSelectedRole(val); }, placeholder: "Select Role" }), /*#__PURE__*/ wn.createElement(Select, { label: "Select Source", selectItems: sourceSelectItems, value: selectedSource, placeholder: "Select Source", onChange: function onChange(val) { setSelectedSource(val); } }), showInputContent && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Divider$1, null), sourceToInputContentMap[selectedSource])))), editing && ( /*#__PURE__*/wn.createElement(FlexBox, { justifyContent: "flex-end" }, /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(default_1$6, null), compact: true, onClick: addRoleAssignmentModalProps.open }, "Add Role assignment"))), rolesWithAssignments.length > 0 ? ( /*#__PURE__*/wn.createElement(Table, { itemRenderer: itemRenderers, items: rolesWithAssignments, rowKeyExtractor: roleAssigmnentsKeyExtractor, ExpandedContent: function ExpandedContent(_ref119) { var role = _ref119.data; return /*#__PURE__*/ wn.createElement(RoleTable, { role: role, editing: editing, setLocalState: setLocalState, localState: localState, remoteState: remoteState, canUpdateSso: canUpdateSso }); } })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, "No role assignments."))); };
-var OrgSettingsRoleAssignmentsSection = function OrgSettingsRoleAssignmentsSection(_ref120) { var orgInfo = _ref120.orgInfo; var _a, _b; var _useAdminPortalConfig4 = useAdminPortalConfig(), adminPortalConfig = _useAdminPortalConfig4.data; var isSsoEnabled = (_a = adminPortalConfig === null || adminPortalConfig === void 0 ? void 0 : adminPortalConfig.sso_config.sso_enabled) !== null && _a !== void 0 ? _a : false; var _useRbac19 = useRbac('stytch.organization', 'update.settings.implicit-roles'), canSetRoles = _useRbac19.data; var _useRbac20 = useRbac('stytch.sso', 'get'), canGetSso = _useRbac20.data; var _useRbac21 = useRbac('stytch.sso', 'update'), canUpdateSso = _useRbac21.data; var _useSsoConnections2 = useSsoConnections(isSsoEnabled && !!canGetSso), ssoConnections = _useSsoConnections2.data, isLoading = _useSsoConnections2.isLoading; var b2bInterals = useB2BInternals(); var _h109 = h$4((_b = b2bInterals.bootstrap.getSync().rbacPolicy) === null || _b === void 0 ? void 0 : _b.roles), _h110 = _slicedToArray2(_h109, 2), roles = _h110[0], setRoles = _h110[1]; p$3(function () { b2bInterals.bootstrap.getAsync().then(function (value) { var _a; setRoles((_a = value.rbacPolicy) === null || _a === void 0 ? void 0 : _a.roles); }); }); var sortedRoles = F$3(function () { var _a; return (_a = roles === null || roles === void 0 ? void 0 : roles.slice().sort(function (a, b) { if (a.role_id === 'stytch_admin') {
+        } return connection; }); }); } })); }), /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(default_1$c, null), compact: true, disabled: ssoRoleAssignments.length >= ssoSamlConnections.length, onClick: function onClick() { setSsoRoleAssignments(function (connections) { return [].concat(_toConsumableArray2(connections), [{ id: '', groups: '' }]); }); } }, "Add SSO Role assignment")))) }; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 1 }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, addRoleAssignmentModalProps, { title: "Add Role assignment", confirmButtonText: "Save", disableConfirm: disableConfirm, close: function close() { addRoleAssignmentModalProps.close(); setSelectedRole(null); setSelectedSource(null); setEmailDomain(''); setSsoRoleAssignments([{ id: '', groups: '' }]); } }), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(Select, { label: "Select Role", selectItems: roleSelectItems, value: selectedRole, onChange: function onChange(val) { setSelectedRole(val); }, placeholder: "Select Role" }), /*#__PURE__*/ wn.createElement(Select, { label: "Select Source", selectItems: sourceSelectItems, value: selectedSource, placeholder: "Select Source", onChange: function onChange(val) { setSelectedSource(val); } }), showInputContent && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Divider$1, null), sourceToInputContentMap[selectedSource])))), editing && ( /*#__PURE__*/wn.createElement(FlexBox, { justifyContent: "flex-end" }, /*#__PURE__*/ wn.createElement(Button, { variant: "text", startIcon: /*#__PURE__*/ wn.createElement(default_1$c, null), compact: true, onClick: addRoleAssignmentModalProps.open }, "Add Role assignment"))), rolesWithAssignments.length > 0 ? ( /*#__PURE__*/wn.createElement(Table, { titleVariant: "caption", itemRenderer: itemRenderers, items: rolesWithAssignments, rowKeyExtractor: roleAssigmnentsKeyExtractor, openIds: roleOpenIds, onOpenChange: function onOpenChange(_ref121) { var id = _ref121.id, open = _ref121.open; setRoleOpenIds(function (prev) { var newRoleOpenIds = new Set(prev); if (open) {
+        newRoleOpenIds.add(id);
+    }
+    else {
+        newRoleOpenIds["delete"](id);
+    } return newRoleOpenIds; }); }, ExpandedContent: function ExpandedContent(_ref122) { var role = _ref122.data; return /*#__PURE__*/ wn.createElement(RoleTable, { role: role, editing: editing, setLocalState: setLocalState, localState: localState, remoteState: remoteState, canUpdateSso: canUpdateSso }); } })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, "No role assignments."))); };
+var OrgSettingsRoleAssignmentsSection = function OrgSettingsRoleAssignmentsSection(_ref123) { var orgInfo = _ref123.orgInfo; var _a; var _useAdminPortalConfig4 = useAdminPortalConfig(), adminPortalConfig = _useAdminPortalConfig4.data; var isSsoEnabled = (_a = adminPortalConfig === null || adminPortalConfig === void 0 ? void 0 : adminPortalConfig.sso_config.sso_enabled) !== null && _a !== void 0 ? _a : false; var _useRbac19 = useRbac('stytch.organization', 'update.settings.implicit-roles'), canSetRoles = _useRbac19.data; var _useRbac20 = useRbac('stytch.sso', 'get'), canGetSso = _useRbac20.data; var _useRbac21 = useRbac('stytch.sso', 'update'), canUpdateSso = _useRbac21.data; var _useSsoConnections2 = useSsoConnections(isSsoEnabled && !!canGetSso), ssoConnections = _useSsoConnections2.data, isLoading = _useSsoConnections2.isLoading; var roles = useRoles(); var sortedRoles = F$3(function () { var _a; return (_a = roles === null || roles === void 0 ? void 0 : roles.slice().sort(function (a, b) { if (a.role_id === 'stytch_admin') {
     return -1;
 } if (b.role_id === 'stytch_admin') {
     return 1;
@@ -10232,7 +10333,7 @@ var OrgSettingsRoleAssignmentsSection = function OrgSettingsRoleAssignmentsSecti
             mutatedConnections = {};
             copyConnections = {};
             connections === null || connections === void 0 ? void 0 : connections.forEach(function (val) { var shallow = Object.assign({}, { connection_id: val.connection_id, saml_connection_implicit_role_assignments: val.saml_connection_implicit_role_assignments, saml_group_implicit_role_assignments: val.saml_group_implicit_role_assignments }); copyConnections[val.connection_id] = Object.assign({}, shallow); shallow.saml_connection_implicit_role_assignments = []; shallow.saml_group_implicit_role_assignments = []; mutatedConnections[val.connection_id] = shallow; });
-            Object.entries(localState.idMap).forEach(function (_ref121) { var _ref122 = _slicedToArray2(_ref121, 2), roleId = _ref122[0], roleAssignments = _ref122[1]; roleAssignments.forEach(function (roleAssignment) { if (roleAssignment.source === 'SSO') {
+            Object.entries(localState.idMap).forEach(function (_ref124) { var _ref125 = _slicedToArray2(_ref124, 2), roleId = _ref125[0], roleAssignments = _ref125[1]; roleAssignments.forEach(function (roleAssignment) { if (roleAssignment.source === 'SSO') {
                 var connectionId = roleAssignment.id;
                 if (roleAssignment.groups) {
                     mutatedConnections[connectionId].saml_group_implicit_role_assignments.push({ role_id: roleId, group: roleAssignment.groups });
@@ -10242,7 +10343,7 @@ var OrgSettingsRoleAssignmentsSection = function OrgSettingsRoleAssignmentsSecti
                 }
             } }); });
             _context22.next = 10;
-            return Promise.all(Object.entries(mutatedConnections).map(function (_ref123) { var _ref124 = _slicedToArray2(_ref123, 2), connectionId = _ref124[0], mutatedConnection = _ref124[1]; return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee20() { var originalConnection; return _regeneratorRuntime().wrap(function _callee20$(_context21) { while (1)
+            return Promise.all(Object.entries(mutatedConnections).map(function (_ref126) { var _ref127 = _slicedToArray2(_ref126, 2), connectionId = _ref127[0], mutatedConnection = _ref127[1]; return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee20() { var originalConnection; return _regeneratorRuntime().wrap(function _callee20$(_context21) { while (1)
                 switch (_context21.prev = _context21.next) {
                     case 0:
                         originalConnection = copyConnections[connectionId];
@@ -10260,17 +10361,19 @@ var OrgSettingsRoleAssignmentsSection = function OrgSettingsRoleAssignmentsSecti
     } }, _callee21); })); }; if (isLoading && canGetSso) {
     return /*#__PURE__*/ wn.createElement(PageLoadingIndicator, null);
 } return /*#__PURE__*/ wn.createElement(SettingsContainer, { title: "Role assignments", hasCTA: canSetRoles, onSave: handleSave, useBlockNavigation: useBlockNavigation, editing: editing, setEditing: handleSetEditing, disableSave: disableSave }, /*#__PURE__*/ wn.createElement(OrgSettingsRoleAssignmentsBody, { editing: editing, remoteState: remoteState, localState: localState, setLocalState: setLocalState, ssoSamlConnections: connections !== null && connections !== void 0 ? connections : [], roles: sortedRoles, canUpdateSso: !!canUpdateSso, isSsoEnabled: isSsoEnabled })); };
-var RadioCore = function RadioCore(_ref127) { var autoFocus = _ref127.autoFocus, checked = _ref127.checked, disabled = _ref127.disabled, label = _ref127.label, onClick = _ref127.onClick, value = _ref127.value, classes = _ref127.classes; var handleChange = function handleChange(e) { onClick === null || onClick === void 0 ? void 0 : onClick(e.target.value); }; return /*#__PURE__*/ wn.createElement(FormControlLabel$1, { control: /*#__PURE__*/ wn.createElement(MUIRadio, { autoFocus: autoFocus, checked: checked, classes: classes, disableRipple: true, onChange: handleChange, color: "primary", size: "small", value: value }), disabled: disabled, label: /*#__PURE__*/ wn.createElement(FlexBox, null, label && ( /*#__PURE__*/wn.createElement(Typography, { variant: 'body2', disabled: disabled }, label))) }); };
+var RadioCore = function RadioCore(_ref130) { var autoFocus = _ref130.autoFocus, checked = _ref130.checked, disabled = _ref130.disabled, label = _ref130.label, onClick = _ref130.onClick, value = _ref130.value, classes = _ref130.classes; var handleChange = function handleChange(e) { onClick === null || onClick === void 0 ? void 0 : onClick(e.target.value); }; return /*#__PURE__*/ wn.createElement(FormControlLabel$1, { control: /*#__PURE__*/ wn.createElement(MUIRadio, { autoFocus: autoFocus, checked: checked, classes: classes, disableRipple: true, onChange: handleChange, color: "primary", size: "small", value: value }), disabled: disabled, label: /*#__PURE__*/ wn.createElement(FlexBox, null, label && ( /*#__PURE__*/wn.createElement(Typography, { variant: 'body2', disabled: disabled }, label))) }); };
+var makeRowStyles = makeStyles(function () { return { rowItemContainer: { maxWidth: DEFAULT_GRID_COLUMN_WIDTH }, rowItemFullWidth: { maxWidth: DEFAULT_MAX_ITEM_WIDTH } }; });
+var RowItemCore = function RowItemCore(_ref131) { var children = _ref131.children, fullWidth = _ref131.fullWidth; var classes = makeRowStyles(); return /*#__PURE__*/ wn.createElement("div", { className: C(classes.rowItemContainer, _defineProperty2({}, classes.rowItemFullWidth, fullWidth)) }, children); };
 var makeRadioGroupStyles = makeStylesFactory(function (theme) { return { radioGroup: { display: 'flex', flexDirection: 'column', gap: theme.spacing(0.5) } }; });
-var RadioGroupCore = function RadioGroupCore(_ref128) { var id = _ref128.id, items = _ref128.items, onChange = _ref128.onChange, readOnly = _ref128.readOnly, value = _ref128.value, classes = _ref128.classes; var radioGroupId = useShortId(id); var onClick = function onClick(value) { onChange === null || onChange === void 0 ? void 0 : onChange(value); }; return /*#__PURE__*/ wn.createElement(RowItemCore, { fullWidth: true }, /*#__PURE__*/ wn.createElement(FormGroup$1, { className: classes.radioGroup, id: radioGroupId }, items.map(function (item) { return /*#__PURE__*/ wn.createElement(RadioCore, Object.assign({}, item, { classes: Object.assign(Object.assign({}, classes), { checkbox: '', root: '', checkboxContainer: '' }), checked: item.value === value, disabled: item.disabled || readOnly, key: item.value, onClick: onClick, label: item.label })); }))); };
+var RadioGroupCore = function RadioGroupCore(_ref132) { var id = _ref132.id, items = _ref132.items, onChange = _ref132.onChange, readOnly = _ref132.readOnly, value = _ref132.value, classes = _ref132.classes; var radioGroupId = useShortId(id); var onClick = function onClick(value) { onChange === null || onChange === void 0 ? void 0 : onChange(value); }; return /*#__PURE__*/ wn.createElement(RowItemCore, { fullWidth: true }, /*#__PURE__*/ wn.createElement(FormGroup$1, { className: classes.radioGroup, id: radioGroupId }, items.map(function (item) { return /*#__PURE__*/ wn.createElement(RadioCore, Object.assign({}, item, { classes: Object.assign(Object.assign({}, classes), { checkbox: '', root: '', checkboxContainer: '' }), checked: item.value === value, disabled: item.disabled || readOnly, key: item.value, onClick: onClick, label: item.label })); }))); };
 var useStyles = makeRadioGroupStyles(function (theme) { return { radioGroup: { display: 'flex', flexDirection: 'row', gap: theme.spacing(0.5) } }; });
 var RadioGroup = function RadioGroup(props) { var classes = useStyles(props); return /*#__PURE__*/ wn.createElement(RadioGroupCore, Object.assign({ classes: classes }, props)); };
 var useMutateAuthSettings = function useMutateAuthSettings() { var _useMutateOrganizatio6 = useMutateOrganization(), mutate = _useMutateOrganizatio6.mutate; var setOrgAuthSettings = function setOrgAuthSettings(mutatedProperties) { return mutate(mutatedProperties, { errorMessage: 'Failed to update email domain details.' }); }; return { setOrgAuthSettings: setOrgAuthSettings }; };
 var emailAllowedDomainsRenderer = [{ title: 'Domain', getValue: function getValue(email) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, email); } }];
 var emailInvitesLabelMap = { ALL_ALLOWED: 'Anybody', RESTRICTED: 'Users from allowed email domains' };
-var EmailDomainsTable = function EmailDomainsTable(_ref129) { var localState = _ref129.localState, remoteState = _ref129.remoteState, setLocalState = _ref129.setLocalState, canSetAllowedDomains = _ref129.canSetAllowedDomains, editing = _ref129.editing; var emailAllowedDomains = editing ? localState.emailAllowedDomains : remoteState.emailAllowedDomains; var _h111 = h$4(''), _h112 = _slicedToArray2(_h111, 2), email = _h112[0], setEmail = _h112[1]; var addEmailModalProps = useModalState(function () { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { emailAllowedDomains: _toConsumableArray2(new Set([].concat(_toConsumableArray2(localState.emailAllowedDomains), [email]))) }); }); setEmail(''); }); return /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Allowed email domains" }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, addEmailModalProps, { title: "Add allowed email domain" }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Domain", onChange: setEmail, placeholder: "Enter domain", value: email })), /*#__PURE__*/ wn.createElement(ListEditor, { items: emailAllowedDomains !== null && emailAllowedDomains !== void 0 ? emailAllowedDomains : [], itemRenderer: emailAllowedDomainsRenderer, onAdd: function onAdd() { addEmailModalProps.open(); }, getItemActionProps: editing && canSetAllowedDomains ? function (item) { return { warningAction: { text: 'Delete', onClick: function onClick() { setEmail(''); setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { emailAllowedDomains: localState.emailAllowedDomains.filter(function (domain) { return domain !== item; }) }); }); } } }; } : undefined, hideAddButton: !canSetAllowedDomains || !editing, addButtonText: "Add Domain" })); };
-var OrgSettingsEmailDomainsBody = function OrgSettingsEmailDomainsBody(_ref130) { var canSetEmailInvites = _ref130.canSetEmailInvites, canSetEmailJitProvisioning = _ref130.canSetEmailJitProvisioning, canSetAllowedDomains = _ref130.canSetAllowedDomains, localState = _ref130.localState, remoteState = _ref130.remoteState, setLocalState = _ref130.setLocalState; var _useSettingsContainer6 = useSettingsContainer(), editing = _useSettingsContainer6.editing; var handleJitProvisioningChange = useStateSliceSetter(setLocalState, 'isEmailJitProvisioningAllowed'); var handleEmailInvitesChange = useStateSliceSetter(setLocalState, 'emailInvites'); return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Email Invites" }, /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetEmailInvites, label: 'Allow inviting members to your organization via allowed email domains', checked: localState.emailInvites !== 'NOT_ALLOWED', onChange: function onChange(value) { return handleEmailInvitesChange(value ? 'ALL_ALLOWED' : 'NOT_ALLOWED'); } }), localState.emailInvites !== 'NOT_ALLOWED' && ( /*#__PURE__*/wn.createElement(PaddingLeft, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "row", flexWrap: "wrap" }, /*#__PURE__*/ wn.createElement(RadioGroup, { onChange: handleEmailInvitesChange, value: localState.emailInvites, items: Object.entries(emailInvitesLabelMap).map(function (_ref131) { var _ref132 = _slicedToArray2(_ref131, 2), value = _ref132[0], label = _ref132[1]; return { value: value, label: label, disabled: !editing || !canSetEmailInvites }; }) }))))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "JIT Provisioning", tooltipText: "If enabled, users who successfully authenticate via allowed email domains will be automatically granted an account if they do not already exist within your organization." }, /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetEmailJitProvisioning, label: 'Allow JIT provisioning for users from allowed email domains', checked: localState.isEmailJitProvisioningAllowed, onChange: handleJitProvisioningChange })), /*#__PURE__*/ wn.createElement(EmailDomainsTable, { localState: localState, remoteState: remoteState, setLocalState: setLocalState, canSetAllowedDomains: canSetAllowedDomains, editing: editing, manualConfiguration: false })); };
-var OrgSettingsEmailDomainsSection = function OrgSettingsEmailDomainsSection(_ref133) { var orgInfo = _ref133.orgInfo; var _useRbac22 = useRbac('stytch.organization', 'update.settings.email-jit-provisioning'), canSetEmailJitProvisioning = _useRbac22.data; var _useRbac23 = useRbac('stytch.organization', 'update.settings.email-invites'), canSetEmailInvites = _useRbac23.data; var _useRbac24 = useRbac('stytch.organization', 'update.settings.allowed-domains'), canSetAllowedDomains = _useRbac24.data; var remoteState = F$3(function () { return { emailInvites: orgInfo.email_invites, emailAllowedDomains: orgInfo.email_allowed_domains, isEmailJitProvisioningAllowed: orgInfo.email_jit_provisioning !== 'NOT_ALLOWED' }; }, [orgInfo]); var _useFormState7 = useFormState({ remoteState: remoteState }), localState = _useFormState7.localState, setLocalState = _useFormState7.setLocalState, editing = _useFormState7.editing, handleSetEditing = _useFormState7.handleSetEditing; var _useMutateAuthSetting2 = useMutateAuthSettings(), setOrgAuthSettings = _useMutateAuthSetting2.setOrgAuthSettings; var _useOrgSettingsRouter4 = useOrgSettingsRouterController(), useBlockNavigation = _useOrgSettingsRouter4.useBlockNavigation; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee22() { var mutatedProperties; return _regeneratorRuntime().wrap(function _callee22$(_context23) { while (1)
+var EmailDomainsTable = function EmailDomainsTable(_ref133) { var localState = _ref133.localState, remoteState = _ref133.remoteState, setLocalState = _ref133.setLocalState, canSetAllowedDomains = _ref133.canSetAllowedDomains, editing = _ref133.editing; var emailAllowedDomains = editing ? localState.emailAllowedDomains : remoteState.emailAllowedDomains; var _h113 = h$4(''), _h114 = _slicedToArray2(_h113, 2), email = _h114[0], setEmail = _h114[1]; var addEmailModalProps = useModalState(function () { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { emailAllowedDomains: _toConsumableArray2(new Set([].concat(_toConsumableArray2(localState.emailAllowedDomains), [email]))) }); }); setEmail(''); }); return /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Allowed email domains" }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, addEmailModalProps, { title: "Add allowed email domain", confirmButtonText: "Save" }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Domain", onChange: setEmail, placeholder: "Enter domain", value: email })), /*#__PURE__*/ wn.createElement(ListEditor, { items: emailAllowedDomains !== null && emailAllowedDomains !== void 0 ? emailAllowedDomains : [], itemRenderer: emailAllowedDomainsRenderer, onAdd: function onAdd() { addEmailModalProps.open(); }, getItemActionProps: editing && canSetAllowedDomains ? function (item) { return { warningAction: { text: 'Delete', onClick: function onClick() { setEmail(''); setLocalState(function (prevState) { return Object.assign(Object.assign({}, prevState), { emailAllowedDomains: localState.emailAllowedDomains.filter(function (domain) { return domain !== item; }) }); }); } } }; } : undefined, hideAddButton: !canSetAllowedDomains || !editing, addButtonText: "Add Domain" })); };
+var OrgSettingsEmailDomainsBody = function OrgSettingsEmailDomainsBody(_ref134) { var canSetEmailInvites = _ref134.canSetEmailInvites, canSetEmailJitProvisioning = _ref134.canSetEmailJitProvisioning, canSetAllowedDomains = _ref134.canSetAllowedDomains, localState = _ref134.localState, remoteState = _ref134.remoteState, setLocalState = _ref134.setLocalState; var _useSettingsContainer6 = useSettingsContainer(), editing = _useSettingsContainer6.editing; var handleJitProvisioningChange = useStateSliceSetter(setLocalState, 'isEmailJitProvisioningAllowed'); var handleEmailInvitesChange = useStateSliceSetter(setLocalState, 'emailInvites'); return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Email Invites" }, /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetEmailInvites, label: 'Allow inviting members to your organization via allowed email domains', checked: localState.emailInvites !== 'NOT_ALLOWED', onChange: function onChange(value) { return handleEmailInvitesChange(value ? 'ALL_ALLOWED' : 'NOT_ALLOWED'); } }), localState.emailInvites !== 'NOT_ALLOWED' && ( /*#__PURE__*/wn.createElement(PaddingLeft, null, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "row", flexWrap: "wrap" }, /*#__PURE__*/ wn.createElement(RadioGroup, { onChange: handleEmailInvitesChange, value: localState.emailInvites, items: Object.entries(emailInvitesLabelMap).map(function (_ref135) { var _ref136 = _slicedToArray2(_ref135, 2), value = _ref136[0], label = _ref136[1]; return { value: value, label: label, disabled: !editing || !canSetEmailInvites }; }) }))))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "JIT Provisioning", tooltipText: "If enabled, users who successfully authenticate via allowed email domains will be automatically granted an account if they do not already exist within your organization." }, /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canSetEmailJitProvisioning, label: 'Allow JIT provisioning for users from allowed email domains', checked: localState.isEmailJitProvisioningAllowed, onChange: handleJitProvisioningChange })), /*#__PURE__*/ wn.createElement(EmailDomainsTable, { localState: localState, remoteState: remoteState, setLocalState: setLocalState, canSetAllowedDomains: canSetAllowedDomains, editing: editing, manualConfiguration: false })); };
+var OrgSettingsEmailDomainsSection = function OrgSettingsEmailDomainsSection(_ref137) { var orgInfo = _ref137.orgInfo; var _useRbac22 = useRbac('stytch.organization', 'update.settings.email-jit-provisioning'), canSetEmailJitProvisioning = _useRbac22.data; var _useRbac23 = useRbac('stytch.organization', 'update.settings.email-invites'), canSetEmailInvites = _useRbac23.data; var _useRbac24 = useRbac('stytch.organization', 'update.settings.allowed-domains'), canSetAllowedDomains = _useRbac24.data; var remoteState = F$3(function () { return { emailInvites: orgInfo.email_invites, emailAllowedDomains: orgInfo.email_allowed_domains, isEmailJitProvisioningAllowed: orgInfo.email_jit_provisioning !== 'NOT_ALLOWED' }; }, [orgInfo]); var _useFormState7 = useFormState({ remoteState: remoteState }), localState = _useFormState7.localState, setLocalState = _useFormState7.setLocalState, editing = _useFormState7.editing, handleSetEditing = _useFormState7.handleSetEditing; var _useMutateAuthSetting2 = useMutateAuthSettings(), setOrgAuthSettings = _useMutateAuthSetting2.setOrgAuthSettings; var _useOrgSettingsRouter4 = useOrgSettingsRouterController(), useBlockNavigation = _useOrgSettingsRouter4.useBlockNavigation; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee22() { var mutatedProperties; return _regeneratorRuntime().wrap(function _callee22$(_context23) { while (1)
     switch (_context23.prev = _context23.next) {
         case 0:
             mutatedProperties = {};
@@ -10305,15 +10408,596 @@ var validateConfig = function validateConfig(config) { if (!config)
 } };
 var AdminPortalB2BProducts;
 (function (AdminPortalB2BProducts) { AdminPortalB2BProducts["emailMagicLinks"] = "emailMagicLinks"; AdminPortalB2BProducts["sso"] = "sso"; AdminPortalB2BProducts["password"] = "password"; AdminPortalB2BProducts["oauthGoogle"] = "oauthGoogle"; AdminPortalB2BProducts["oauthMicrosoft"] = "oauthMicrosoft"; })(AdminPortalB2BProducts || (AdminPortalB2BProducts = {}));
-var routeMap = { orgSettingsScreen: OrgSettingsScreen };
-var initialRoute = { screen: 'orgSettingsScreen' };
-var Content = function Content() { var _useAdminPortalConfig5 = useAdminPortalConfig(), adminPortalConfigError = _useAdminPortalConfig5.error, isLoading = _useAdminPortalConfig5.isLoading; if (adminPortalConfigError) {
+var routeMap$1 = { orgSettingsScreen: OrgSettingsScreen };
+var initialRoute$1 = { screen: 'orgSettingsScreen' };
+var Content$1 = function Content$1() { var _useAdminPortalConfig5 = useAdminPortalConfig(), adminPortalConfigError = _useAdminPortalConfig5.error, isLoading = _useAdminPortalConfig5.isLoading; if (adminPortalConfigError) {
     return /*#__PURE__*/ wn.createElement(Alert, null, "Organization Settings could not be loaded. Please contact your admin if you think this is a mistake.");
 } if (isLoading) {
     return /*#__PURE__*/ wn.createElement(PageLoadingIndicator, null);
-} return /*#__PURE__*/ wn.createElement(OrgSettingsRouterProvider, { initialRoute: initialRoute }, /*#__PURE__*/ wn.createElement(OrgSettingsRouter, { routeMap: routeMap })); };
-var AdminPortalOrgSettings$1 = function AdminPortalOrgSettings(props) { var uiConfig = useAdminPortalOrgUIConfig(); var initialClient = _$1(props.client); p$3(function () { readB2BInternals(initialClient.current).networkClient.logEvent({ name: 'render_b2b_admin_portal_org_settings', details: {} }); }, []); p$3(function () { validateConfig(uiConfig); }, [uiConfig]); return /*#__PURE__*/ wn.createElement(AdminPortalWrapper, { options: props }, /*#__PURE__*/ wn.createElement(Content, null)); };
+} return /*#__PURE__*/ wn.createElement(OrgSettingsRouterProvider, { initialRoute: initialRoute$1 }, /*#__PURE__*/ wn.createElement(OrgSettingsRouter, { routeMap: routeMap$1 })); };
+var AdminPortalOrgSettings$1 = function AdminPortalOrgSettings(props) { var uiConfig = useAdminPortalOrgUIConfig(); var initialClient = _$1(props.client); p$3(function () { readB2BInternals(initialClient.current).networkClient.logEvent({ name: 'render_b2b_admin_portal_org_settings', details: {} }); }, []); p$3(function () { validateConfig(uiConfig); }, [uiConfig]); return /*#__PURE__*/ wn.createElement(AdminPortalWrapper, { options: props }, /*#__PURE__*/ wn.createElement(Content$1, null)); };
 var mountAdminPortalOrgSettings = makeAdminPortalComponentMountFn(AdminPortalOrgSettings$1, 'stytch-b2b-admin-portal-org-settings-ui', 'mountAdminPortalOrgSettings');
+var ChevronLeft = {};
+var _interopRequireDefault$5 = interopRequireDefaultExports;
+var _interopRequireWildcard$5 = interopRequireWildcardExports;
+Object.defineProperty(ChevronLeft, "__esModule", { value: true });
+var default_1$5 = ChevronLeft["default"] = void 0;
+var React$5 = _interopRequireWildcard$5(require$$2);
+var _createSvgIcon$5 = _interopRequireDefault$5(requireCreateSvgIcon());
+var _default$5 = (0, _createSvgIcon$5["default"])(/*#__PURE__*/ React$5.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }), 'ChevronLeft');
+default_1$5 = ChevronLeft["default"] = _default$5;
+var NO_VALUE = '–';
+var decorateCurrentMemberName = function decorateCurrentMemberName(name) { return "".concat(name || NO_VALUE, " (You)"); };
+var memberGetKey = function memberGetKey(memberId) { return memberId ? ['members.search.id', memberId] : null; };
+var ROLE_ID_STYTCH_MEMBER = 'stytch_member';
+var ROLE_ID_STYTCH_ADMIN = 'stytch_admin';
+var fetchMembers = function fetchMembers(client) { return function (_ref138) { var cursor = _ref138.cursor, limit = _ref138.limit, email = _ref138.email, roles = _ref138.roles, statuses = _ref138.statuses; return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee23() { var operands, response; return _regeneratorRuntime().wrap(function _callee23$(_context24) { while (1)
+    switch (_context24.prev = _context24.next) {
+        case 0:
+            operands = [email && { filter_name: 'member_email_fuzzy', filter_value: email }, roles && { filter_name: 'member_roles', filter_value: roles }, statuses && { filter_name: 'statuses', filter_value: statuses }].filter(isTruthy);
+            _context24.next = 3;
+            return client.organization.members.search({ cursor: cursor, limit: limit, query: operands.length > 0 ? { operator: 'AND', operands: operands } : undefined });
+        case 3:
+            response = _context24.sent;
+            return _context24.abrupt("return", Object.assign(Object.assign({}, response), { isFetchMemberResponse: true }));
+        case 5:
+        case "end": return _context24.stop();
+    } }, _callee23); })); }; };
+var isFetchMembersResponse = function isFetchMembersResponse(data) { return _typeof2(data) === 'object' && data !== null && 'isFetchMemberResponse' in data && data.isFetchMemberResponse; };
+var useUpdateCachedMember = function useUpdateCachedMember() { var _useSWRConfig5 = useSWRConfig(), mutate = _useSWRConfig5.mutate, cache = _useSWRConfig5.cache; var updateCachedMember = T$2(function (memberId, setMember) { var _a; var _iterator2 = _createForOfIteratorHelper(cache.keys()), _step2; try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _key6 = _step2.value;
+        var data = cache.get(_key6);
+        if (isFetchMembersResponse(data === null || data === void 0 ? void 0 : data.data)) {
+            cache.set(_key6, Object.assign(Object.assign({}, data), { data: Object.assign(Object.assign({}, data.data), { members: data.data.members.map(function (cachedMember) { return cachedMember.member_id === memberId ? setMember(cachedMember) : cachedMember; }) }) }));
+        }
+        if (_key6 === unstable_serialize(function () { return memberGetKey(memberId); })) {
+            var cachedMember = (_a = cache.get(_key6)) === null || _a === void 0 ? void 0 : _a.data;
+            if (cachedMember) {
+                mutate(_key6, setMember(cachedMember));
+            }
+        }
+    }
+}
+catch (err) {
+    _iterator2.e(err);
+}
+finally {
+    _iterator2.f();
+} }, [cache, mutate]); var setMember = T$2(function (member) { updateCachedMember(member.member_id, function () { return member; }); }, [updateCachedMember]); var markMemberDeleted = T$2(function (memberId) { updateCachedMember(memberId, function (member) { return Object.assign(Object.assign({}, member), { status: 'deleted' }); }); }, [updateCachedMember]); return { setMember: setMember, markMemberDeleted: markMemberDeleted }; };
+var useMutateMember = function useMutateMember() { var _useSWRConfig6 = useSWRConfig(), mutateSWR = _useSWRConfig6.mutate; var client = useStytchClient(); var _useUpdateCachedMembe = useUpdateCachedMember(), setMember = _useUpdateCachedMembe.setMember; return useMutateWithToast(T$2(function (properties) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee25() { var result; return _regeneratorRuntime().wrap(function _callee25$(_context26) { while (1)
+    switch (_context26.prev = _context26.next) {
+        case 0:
+            _context26.next = 2;
+            return mutateSWR(memberGetKey(properties.member_id), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee24() { var resp; return _regeneratorRuntime().wrap(function _callee24$(_context25) { while (1)
+                switch (_context25.prev = _context25.next) {
+                    case 0:
+                        _context25.next = 2;
+                        return client.organization.members.update(properties);
+                    case 2:
+                        resp = _context25.sent;
+                        return _context25.abrupt("return", resp.member);
+                    case 4:
+                    case "end": return _context25.stop();
+                } }, _callee24); })); }, { optimisticData: function optimisticData(member) { properties.roles; var rest = __rest(properties, ["roles"]); return Object.assign(Object.assign({}, member), rest); }, rollbackOnError: true, populateCache: true, revalidate: false });
+        case 2:
+            result = _context26.sent;
+            if (result) {
+                setMember(result);
+            }
+        case 4:
+        case "end": return _context26.stop();
+    } }, _callee25); })); }, [client.organization.members, mutateSWR, setMember])); };
+var getRoleDefaultDescription = function getRoleDefaultDescription(role) { return role.description; };
+var useGetRoleDescription = function useGetRoleDescription() { var config = useAdminPortalUIConfig(); return T$2(function (role) { var _a; return ((_a = config === null || config === void 0 ? void 0 : config.getRoleDescription) === null || _a === void 0 ? void 0 : _a.call(config, role)) || getRoleDefaultDescription(role); }, [config]); };
+var getRoleDefaultDisplayName = function getRoleDefaultDisplayName(role) { return role.role_id; };
+var useGetRoleDisplayName = function useGetRoleDisplayName() { var config = useAdminPortalUIConfig(); return T$2(function (role) { var _a; return ((_a = config === null || config === void 0 ? void 0 : config.getRoleDisplayName) === null || _a === void 0 ? void 0 : _a.call(config, role)) || getRoleDefaultDisplayName(role); }, [config]); };
+var useRoleDisplayInfo = function useRoleDisplayInfo() { var allRoles = useRoles(); var getRoleDisplayName = useGetRoleDisplayName(); var getRoleDescription = useGetRoleDescription(); var roleInfo = F$3(function () { var _a; return (_a = allRoles === null || allRoles === void 0 ? void 0 : allRoles.reduce(function (acc, role) { acc[role.role_id] = { description: getRoleDescription(role), label: getRoleDisplayName(role) }; return acc; }, {})) !== null && _a !== void 0 ? _a : {}; }, [allRoles, getRoleDescription, getRoleDisplayName]); var getRoleIdDisplayName = T$2(function (roleId) { var _a; return (_a = roleInfo[roleId].label) !== null && _a !== void 0 ? _a : roleId; }, [roleInfo]); return { roleInfo: roleInfo, getRoleIdDisplayName: getRoleIdDisplayName }; };
+var wellKnownRoleIds = [ROLE_ID_STYTCH_MEMBER, ROLE_ID_STYTCH_ADMIN];
+var compareWellKnownRoleIds = function compareWellKnownRoleIds(a, b) { if (a === b) {
+    return 0;
+} for (var _i = 0, _wellKnownRoleIds = wellKnownRoleIds; _i < _wellKnownRoleIds.length; _i++) {
+    var roleId = _wellKnownRoleIds[_i];
+    if (a === roleId) {
+        return -1;
+    }
+    if (b === roleId) {
+        return 1;
+    }
+} return 0; };
+var useRoleSortFn = function useRoleSortFn() { var getRoleDisplayName = useGetRoleDisplayName(); var allRoles = useRoles(); var rolesById = F$3(function () { return allRoles === null || allRoles === void 0 ? void 0 : allRoles.reduce(function (acc, role) { acc[role.role_id] = Object.assign(Object.assign({}, role), { displayName: getRoleDisplayName(role) || getRoleDefaultDisplayName(role) }); return acc; }, {}); }, [allRoles, getRoleDisplayName]); return T$2(function (roles) { return roles.map(function (role) { var _a; var matchingPolicyRole = rolesById === null || rolesById === void 0 ? void 0 : rolesById[role.role_id]; return Object.assign(Object.assign(Object.assign({}, matchingPolicyRole), role), { displayName: (_a = matchingPolicyRole === null || matchingPolicyRole === void 0 ? void 0 : matchingPolicyRole.displayName) !== null && _a !== void 0 ? _a : role.role_id }); }).sort(function (a, b) { return compareWellKnownRoleIds(a.role_id, b.role_id) || a.displayName.localeCompare(b.displayName); }); }, [rolesById]); };
+var useRoleAutocomplete = function useRoleAutocomplete() { var _ref139 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, _ref139$excludeStytch = _ref139.excludeStytchMember, excludeStytchMember = _ref139$excludeStytch === void 0 ? false : _ref139$excludeStytch; var allRoles = useRoles(); var assignableRoles = F$3(function () { return excludeStytchMember ? allRoles === null || allRoles === void 0 ? void 0 : allRoles.filter(function (role) { return role.role_id !== ROLE_ID_STYTCH_MEMBER; }) : allRoles; }, [allRoles, excludeStytchMember]); var sortRoles = useRoleSortFn(); var roleSelectItems = F$3(function () { return sortRoles(assignableRoles !== null && assignableRoles !== void 0 ? assignableRoles : []).map(function (role) { return role.role_id; }); }, [assignableRoles, sortRoles]); var _useRoleDisplayInfo = useRoleDisplayInfo(), roleInfo = _useRoleDisplayInfo.roleInfo, getRoleIdDisplayName = _useRoleDisplayInfo.getRoleIdDisplayName; return { selectItems: roleSelectItems, getOptionDescription: function getOptionDescription(roleId) { return roleInfo[roleId].description; }, getOptionLabel: getRoleIdDisplayName }; };
+var _createRouter3 = createRouter(), MemberManagementRouterProvider = _createRouter3.RouterProvider, MemberManagementRouter = _createRouter3.Router, useMemberManagementRouterController = _createRouter3.useRouterController;
+var getRoleSourceTypeDisplayName = function getRoleSourceTypeDisplayName(sourceType) { switch (sourceType) {
+    case 'direct_assignment': return 'Manual assignment';
+    case 'email_assignment': return 'Email domain';
+    case 'sso_connection': return 'SSO connection';
+    case 'sso_connection_group': return 'SSO group';
+    case 'scim_connection_group': return 'SCIM group';
+    default: return sourceType;
+} };
+var roleAssignmentsRowKeyExtractor = function roleAssignmentsRowKeyExtractor(item) { return "".concat(item.role_id, "-").concat(item.sourceType); };
+var AccessSectionBody = function AccessSectionBody(_ref128) { var localState = _ref128.localState, setLocalState = _ref128.setLocalState, remoteState = _ref128.remoteState, implicitRoleAssignments = _ref128.implicitRoleAssignments, showRoleAssignment = _ref128.showRoleAssignment; var _useSettingsContainer7 = useSettingsContainer(), editing = _useSettingsContainer7.editing; var _ref129 = editing ? localState : remoteState, isMfaEnrolled = _ref129.isMfaEnrolled, explicitRoleAssignments = _ref129.explicitRoleAssignments, isBreakglass = _ref129.isBreakglass; var handleIsMfaEnrolledChange = useStateSliceSetter(setLocalState, 'isMfaEnrolled'); var setIsBreakglass = useStateSliceSetter(setLocalState, 'isBreakglass'); var _a = useModalState(function () { setIsBreakglass(true); }), openBreakGlassConfirmModal = _a.open, breakGlassConfirmModalProps = __rest(_a, ["open"]); var handleIsBreakglassChange = T$2(function (value) { if (value) {
+    openBreakGlassConfirmModal();
+}
+else {
+    setIsBreakglass(value);
+} }, [openBreakGlassConfirmModal, setIsBreakglass]); var _useRbac25 = useRbac('stytch.member', 'update.settings.roles'), canUpdateRoles = _useRbac25.data; var _useRbac26 = useRbac('stytch.member', 'update.settings.mfa-enrolled'), canUpdateMfaEnrolled = _useRbac26.data; var _useRbac27 = useRbac('stytch.member', 'update.settings.is-breakglass'), canUpdateBreakglass = _useRbac27.data; var sortRoles = useRoleSortFn(); var _b = useRoleAutocomplete({ excludeStytchMember: true }), roleSelectItems = _b.selectItems, roleAutocompleteProps = __rest(_b, ["selectItems"]); var availableRoleSelectItems = roleSelectItems.filter(function (roleId) { return !explicitRoleAssignments.includes(roleId); }); var _useRoleDisplayInfo2 = useRoleDisplayInfo(), getRoleIdDisplayName = _useRoleDisplayInfo2.getRoleIdDisplayName; var stytchMemberRoleDisplayName = roleAutocompleteProps.getOptionLabel(ROLE_ID_STYTCH_MEMBER); var combinedRoleAssignments = F$3(function () { return [].concat(_toConsumableArray2(sortRoles(implicitRoleAssignments)), _toConsumableArray2(sortRoles(explicitRoleAssignments.map(function (roleId) { return { role_id: roleId, sourceType: 'direct_assignment' }; })))); }, [explicitRoleAssignments, implicitRoleAssignments, sortRoles]); var _h115 = h$4([]), _h116 = _slicedToArray2(_h115, 2), pendingAssignments = _h116[0], setPendingAssignments = _h116[1]; var _c = useModalState(function () { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { explicitRoleAssignments: Array.from(new Set([].concat(_toConsumableArray2(state.explicitRoleAssignments), _toConsumableArray2(pendingAssignments)))) }); }); }), openRoleAssignmentModal = _c.open, roleAssignmentModalProps = __rest(_c, ["open"]); var roleAssignmentsItemRenderer = F$3(function () { return [{ title: 'Role', getValue: function getValue(assignment) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, getRoleIdDisplayName(assignment.role_id)); } }, { title: 'Source', getValue: function getValue(assignment) { return /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, getRoleSourceTypeDisplayName(assignment.sourceType)); } }]; }, [getRoleIdDisplayName]); var handleAddRoleAssignment = T$2(function () { setPendingAssignments([]); openRoleAssignmentModal(); }, [openRoleAssignmentModal]); var roleAssignmentsItemActionProps = F$3(function () { return function (item) { return item.sourceType === 'direct_assignment' ? { warningAction: { text: 'Revoke', onClick: function onClick() { setLocalState(function (state) { return Object.assign(Object.assign({}, state), { explicitRoleAssignments: state.explicitRoleAssignments.filter(function (roleId) { return roleId !== item.role_id; }) }); }); } } } : {}; }; }, [setLocalState]); return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, editing && ( /*#__PURE__*/wn.createElement(Modal, Object.assign({}, breakGlassConfirmModalProps, { title: "Exempt Member from primary auth requirements?", confirmButtonText: "Allow", warning: true }), /*#__PURE__*/ wn.createElement(Typography, null, "Enabling this toggle will allow the Member to circumvent your organization's authentication requirements if needed (i.e. to update SSO information in the case of a lockout)."))), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Exempt from primary auth requirements" }, /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canUpdateBreakglass, checked: isBreakglass, onChange: handleIsBreakglassChange, label: "Allow Member to circumvent your organization's authentication requirements if needed (i.e. to update SSO information in the case of a lockout)" })), /*#__PURE__*/ wn.createElement(SettingsSection, { title: "Enable MFA" }, /*#__PURE__*/ wn.createElement(Switch, { readOnly: !editing || !canUpdateMfaEnrolled, checked: isMfaEnrolled, onChange: handleIsMfaEnrolledChange, label: "Enable MFA for this Member. This will require the Member to set up and use MFA on login regardless of the organization policy. If enabled, this will override an optional MFA organization policy." })), showRoleAssignment && ( /*#__PURE__*/wn.createElement(SettingsSection, { title: "Role assignments" }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, roleAssignmentModalProps, { title: "Add Role assignment", confirmButtonText: "Add Role" }), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 0.5 }, /*#__PURE__*/ wn.createElement(Typography, { color: "secondary", variant: "caption" }, "Role"), /*#__PURE__*/ wn.createElement(Autocomplete, Object.assign({}, roleAutocompleteProps, { selectItems: availableRoleSelectItems, value: pendingAssignments, onChange: setPendingAssignments, placeholder: pendingAssignments.length > 0 ? undefined : 'Select Role' })))), /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "All members are automatically assigned the ", stytchMemberRoleDisplayName, " Role."), /*#__PURE__*/ wn.createElement(ListEditor, { items: combinedRoleAssignments, rowKeyExtractor: roleAssignmentsRowKeyExtractor, itemRenderer: roleAssignmentsItemRenderer, addButtonText: "Add Role assignment", hideAddButton: availableRoleSelectItems.length === 0, readOnly: !(editing && canUpdateRoles), onAdd: handleAddRoleAssignment, getItemActionProps: roleAssignmentsItemActionProps })))); };
+var AccessSection = function AccessSection(_ref140) { var member = _ref140.member; var _useRbac28 = useRbac('stytch.member', 'update.settings.roles'), canUpdateRoles = _useRbac28.data; var _useRbac29 = useRbac('stytch.member', 'update.settings.mfa-enrolled'), canUpdateMfaEnrolled = _useRbac29.data; var _useRbac30 = useRbac('stytch.member', 'update.settings.is-breakglass'), canUpdateBreakglass = _useRbac30.data; var isMemberDeleted = member.status === 'deleted'; var canEditSection = !isMemberDeleted && (canUpdateRoles || canUpdateMfaEnrolled || canUpdateBreakglass); var showRoleAssignment = !isMemberDeleted; var _F2 = F$3(function () { return member.roles.filter(function (role) { return role.role_id !== ROLE_ID_STYTCH_MEMBER; }).reduce(function (acc, role) { var implicitAssignments = new Set(role.sources.filter(function (source) { return source.type !== 'direct_assignment'; }).map(function (source) { return source.type; })); var _iterator3 = _createForOfIteratorHelper(implicitAssignments), _step3; try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var sourceType = _step3.value;
+        acc.implicitRoleAssignments.push({ role_id: role.role_id, sourceType: sourceType });
+    }
+}
+catch (err) {
+    _iterator3.e(err);
+}
+finally {
+    _iterator3.f();
+} var isExplicitAssignment = role.sources.some(function (source) { return source.type === 'direct_assignment'; }); if (isExplicitAssignment) {
+    acc.explicitRoleAssignments.push(role.role_id);
+} return acc; }, { explicitRoleAssignments: [], implicitRoleAssignments: [] }); }, [member.roles]), explicitRoleAssignments = _F2.explicitRoleAssignments, implicitRoleAssignments = _F2.implicitRoleAssignments; var remoteState = F$3(function () { return { isMfaEnrolled: member.mfa_enrolled, explicitRoleAssignments: explicitRoleAssignments, isBreakglass: member.is_breakglass }; }, [explicitRoleAssignments, member.is_breakglass, member.mfa_enrolled]); var _useFormState8 = useFormState({ remoteState: remoteState }), localState = _useFormState8.localState, setLocalState = _useFormState8.setLocalState, editing = _useFormState8.editing, handleSetEditing = _useFormState8.handleSetEditing; var _useMutateMember = useMutateMember(), mutate = _useMutateMember.mutate; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee26() { var memberOptions, shouldUpdate, setOption; return _regeneratorRuntime().wrap(function _callee26$(_context27) { while (1)
+    switch (_context27.prev = _context27.next) {
+        case 0:
+            memberOptions = { member_id: member.member_id };
+            shouldUpdate = false;
+            setOption = function setOption(key, value) { memberOptions[key] = value; shouldUpdate = true; };
+            if (localState.isMfaEnrolled !== remoteState.isMfaEnrolled) {
+                setOption('mfa_enrolled', localState.isMfaEnrolled);
+            }
+            if (localState.isBreakglass !== remoteState.isBreakglass) {
+                setOption('is_breakglass', localState.isBreakglass);
+            }
+            if (!arraysHaveSameContents(localState.explicitRoleAssignments, remoteState.explicitRoleAssignments)) {
+                setOption('roles', localState.explicitRoleAssignments);
+            }
+            if (!shouldUpdate) {
+                _context27.next = 9;
+                break;
+            }
+            _context27.next = 9;
+            return mutate(memberOptions);
+        case 9:
+        case "end": return _context27.stop();
+    } }, _callee26); })); }, [localState.explicitRoleAssignments, localState.isBreakglass, localState.isMfaEnrolled, member.member_id, mutate, remoteState.explicitRoleAssignments, remoteState.isBreakglass, remoteState.isMfaEnrolled]); var _useMemberManagementR = useMemberManagementRouterController(), useBlockNavigation = _useMemberManagementR.useBlockNavigation; return /*#__PURE__*/ wn.createElement(SettingsContainer, { title: "Access requirements & permissions", hasCTA: canEditSection, onSave: handleSave, useBlockNavigation: useBlockNavigation, editing: editing, setEditing: handleSetEditing }, /*#__PURE__*/ wn.createElement(AccessSectionBody, { remoteState: remoteState, localState: localState, setLocalState: setLocalState, implicitRoleAssignments: implicitRoleAssignments, showRoleAssignment: showRoleAssignment })); };
+var AuthManagementSection = function AuthManagementSection(_ref141) { var member = _ref141.member; var _useRbac31 = useRbac('stytch.member', 'update.info.delete.mfa-phone'), canDeleteMfaPhonePerm = _useRbac31.data; var _useRbac32 = useRbac('stytch.member', 'update.info.delete.mfa-totp'), canDeleteMfaTotpPerm = _useRbac32.data; var _useRbac33 = useRbac('stytch.member', 'update.info.delete.password'), canDeletePassword = _useRbac33.data; var _useRbac34 = useRbac('stytch.member', 'revoke-sessions'), canRevokeSessions = _useRbac34.data; var memberHasMfaPhone = !!member.mfa_phone_number; var memberHasTotp = !!member.totp_registration_id; var canDeleteMfaPhone = canDeleteMfaPhonePerm && memberHasMfaPhone; var canDeleteMfaTotp = canDeleteMfaTotpPerm && memberHasTotp; var canPerformAnyAction = canDeleteMfaPhone || canDeleteMfaTotp || canDeletePassword || canRevokeSessions; var client = useStytchClient(); var _useSWRConfig7 = useSWRConfig(), mutateSWR = _useSWRConfig7.mutate; var _useMutateWithToast = useMutateWithToast(function (memberId) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee28() { return _regeneratorRuntime().wrap(function _callee28$(_context29) { while (1)
+    switch (_context29.prev = _context29.next) {
+        case 0:
+            _context29.next = 2;
+            return mutateSWR(memberGetKey(memberId), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee27() { var result; return _regeneratorRuntime().wrap(function _callee27$(_context28) { while (1)
+                switch (_context28.prev = _context28.next) {
+                    case 0:
+                        _context28.next = 2;
+                        return client.organization.members.deleteMFATOTP(memberId);
+                    case 2:
+                        result = _context28.sent;
+                        return _context28.abrupt("return", result.member);
+                    case 4:
+                    case "end": return _context28.stop();
+                } }, _callee27); })); }, { populateCache: true, revalidate: false });
+        case 2:
+        case "end": return _context29.stop();
+    } }, _callee28); })); }), deleteMfaTotp = _useMutateWithToast.mutate; var _a = useModalState(function () { return deleteMfaTotp(member.member_id); }), openResetMfaTotpModal = _a.open, resetMfaTotpModalProps = __rest(_a, ["open"]); var _useMutateWithToast2 = useMutateWithToast(function (memberId) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee30() { return _regeneratorRuntime().wrap(function _callee30$(_context31) { while (1)
+    switch (_context31.prev = _context31.next) {
+        case 0:
+            _context31.next = 2;
+            return mutateSWR(memberGetKey(memberId), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee29() { var result; return _regeneratorRuntime().wrap(function _callee29$(_context30) { while (1)
+                switch (_context30.prev = _context30.next) {
+                    case 0:
+                        _context30.next = 2;
+                        return client.organization.members.deleteMFAPhoneNumber(memberId);
+                    case 2:
+                        result = _context30.sent;
+                        return _context30.abrupt("return", result.member);
+                    case 4:
+                    case "end": return _context30.stop();
+                } }, _callee29); })); }, { populateCache: true, revalidate: false });
+        case 2:
+        case "end": return _context31.stop();
+    } }, _callee30); })); }), deleteMfaPhoneNumber = _useMutateWithToast2.mutate; var _b = useModalState(function () { return deleteMfaPhoneNumber(member.member_id); }), openResetMfaPhoneNumberModal = _b.open, resetMfaPhoneNumberModalProps = __rest(_b, ["open"]); var _h117 = h$4(false), _h118 = _slicedToArray2(_h117, 2), sendPasswordReset = _h118[0], setSendPasswordReset = _h118[1]; var _useMutateWithToast3 = useMutateWithToast(function (memberId) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee32() { return _regeneratorRuntime().wrap(function _callee32$(_context33) { while (1)
+    switch (_context33.prev = _context33.next) {
+        case 0:
+            _context33.next = 2;
+            return mutateSWR(memberGetKey(memberId), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee31() { var result; return _regeneratorRuntime().wrap(function _callee31$(_context32) { while (1)
+                switch (_context32.prev = _context32.next) {
+                    case 0:
+                        if (!member.member_password_id) {
+                            _context32.next = 6;
+                            break;
+                        }
+                        _context32.next = 3;
+                        return client.organization.members.deletePassword(member.member_password_id);
+                    case 3:
+                        _context32.t0 = _context32.sent.member;
+                        _context32.next = 7;
+                        break;
+                    case 6: _context32.t0 = member;
+                    case 7:
+                        result = _context32.t0;
+                        if (!sendPasswordReset) {
+                            _context32.next = 11;
+                            break;
+                        }
+                        _context32.next = 11;
+                        return client.passwords.resetByEmailStart({ email_address: member.email_address, organization_id: member.organization_id });
+                    case 11: return _context32.abrupt("return", result);
+                    case 12:
+                    case "end": return _context32.stop();
+                } }, _callee31); })); }, { populateCache: true, revalidate: false });
+        case 2:
+        case "end": return _context33.stop();
+    } }, _callee32); })); }), resetPassword = _useMutateWithToast3.mutate; var _c = useModalState(function () { return resetPassword(member.member_id); }), openResetPasswordModal = _c.open, resetPasswordModalProps = __rest(_c, ["open"]); var _useMutateWithToast4 = useMutateWithToast(function (memberId) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee34() { return _regeneratorRuntime().wrap(function _callee34$(_context35) { while (1)
+    switch (_context35.prev = _context35.next) {
+        case 0:
+            _context35.next = 2;
+            return mutateSWR(memberGetKey(memberId), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee33() { return _regeneratorRuntime().wrap(function _callee33$(_context34) { while (1)
+                switch (_context34.prev = _context34.next) {
+                    case 0:
+                        _context34.next = 2;
+                        return client.session.revokeForMember({ member_id: memberId });
+                    case 2:
+                    case "end": return _context34.stop();
+                } }, _callee33); })); });
+        case 2:
+        case "end": return _context35.stop();
+    } }, _callee34); })); }), revokeSessions = _useMutateWithToast4.mutate; var _d = useModalState(function () { return revokeSessions(member.member_id); }), openRevokeSessionsModal = _d.open, revokeSessionsModalProps = __rest(_d, ["open"]); var _useMemberManagementR2 = useMemberManagementRouterController(), useBlockNavigation = _useMemberManagementR2.useBlockNavigation; return canPerformAnyAction ? ( /*#__PURE__*/wn.createElement(SettingsContainer, { title: "Authentication management", useBlockNavigation: useBlockNavigation }, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, (canDeleteMfaPhone || canDeleteMfaTotp) && ( /*#__PURE__*/wn.createElement(SettingsSection, { title: "MFA" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Reset the Member\u2019s MFA enrollment. If necessary, the Member will have to re-enroll in MFA the next time they login."), /*#__PURE__*/ wn.createElement(FlexBox, { gap: 1 }, canDeleteMfaTotp && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, resetMfaTotpModalProps, { title: "Reset Member\u2019s TOTP enrollment", confirmButtonText: "Reset TOTP", warning: true }), /*#__PURE__*/ wn.createElement(Typography, null, "Reset the Member\u2019s TOTP enrollment. If necessary, the Member will have to re-enroll in MFA the next time they login.")), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: openResetMfaTotpModal }, "Reset TOTP"))), canDeleteMfaPhone && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, resetMfaPhoneNumberModalProps, { title: "Reset Member\u2019s SMS OTP enrollment", confirmButtonText: "Reset SMS OTP", warning: true }), /*#__PURE__*/ wn.createElement(Typography, null, "Reset the Member\u2019s SMS OTP enrollment. If necessary, the Member will have to re-enroll in MFA the next time they login.")), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: openResetMfaPhoneNumberModal }, "Reset SMS OTP")))))), canDeletePassword && ( /*#__PURE__*/wn.createElement(SettingsSection, { title: "Password" }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, resetPasswordModalProps, { title: "Ask Member to reset their password?", confirmButtonText: "Reset password", warning: true }), /*#__PURE__*/ wn.createElement(Typography, null, "Delete the member\u2019s current password and optionally trigger a password reset email by checking the box below."), /*#__PURE__*/ wn.createElement(Typography, null, "The Member will need to set a new password or use a passwordless authentication method (if allowed by your organization auth settings) in order to login again."), /*#__PURE__*/ wn.createElement(Checkbox, { label: "Trigger password reset email", checked: sendPasswordReset, onClick: function onClick(checked) { setSendPasswordReset(checked); } })), /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Forcing a password reset will delete the Member\u2019s current password and send a reset password email."), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: openResetPasswordModal }, "Reset password"))), canRevokeSessions && ( /*#__PURE__*/wn.createElement(SettingsSection, { title: "Sessions" }, /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, revokeSessionsModalProps, { title: "Revoke Member\u2019s active sessions", confirmButtonText: "Revoke all sessions", warning: true }), /*#__PURE__*/ wn.createElement(Typography, null, "The Member will be force logged out and all their active sessions will be revoked.")), /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, "Force logout this Member. All active sessions will be revoked."), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: openRevokeSessionsModal }, "Revoke all sessions")))))) : null; };
+var getActionCopy = function getActionCopy(_ref142) { var status = _ref142.status, isEmailVerified = _ref142.isEmailVerified; if (status === 'invited') {
+    return { action: 'Revoke invite', description: 'The invited Member will be deleted and cannot be restored. You will need to resend an invite to add the Member to your organization.', modalTitle: 'Revoke invite?', modalAction: 'Revoke invite', modalDescription: 'You will need to resend an invite to add the Member to your organization.' };
+} if (status === 'deleted') {
+    var _description = 'Reactivating this Member will allow them to log into your organization under their previous account.';
+    return { action: 'Reactivate Member', description: _description, modalTitle: 'Reactivate Member?', modalAction: 'Reactivate', modalDescription: _description };
+} var description = isEmailVerified ? 'All of the Member’s authentication factors will be deleted and all active sessions will be revoked. You will be able to reactivate the Member and restore their email, but other authentication factors and Role assignments will not be restored.' : 'All of the Member’s authentication factors will be deleted and all active sessions will be revoked. The Member’s email is not verified, so you will not be able to reactivate the Member or restore their email.'; var modalDescription = isEmailVerified ? description : ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(Typography, null, "All of the Member\u2019s authentication factors will be deleted and all active sessions will be revoked."), /*#__PURE__*/ wn.createElement(Typography, { color: "error" }, "The Member\u2019s email is not verified, so you will not be able to reactivate the Member or restore their email."))); return { action: 'Deactivate Member', description: description, modalTitle: 'Deactivate Member?', modalAction: 'Deactivate Member', modalDescription: modalDescription }; };
+var useMemberActivation = function useMemberActivation(revalidateMemberList) { var _a, _b; var client = useStytchClient(); var _useSWRConfig8 = useSWRConfig(), mutateSWR = _useSWRConfig8.mutate; var _useMutateWithToast5 = useMutateWithToast(function (memberId) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee36() { return _regeneratorRuntime().wrap(function _callee36$(_context37) { while (1)
+    switch (_context37.prev = _context37.next) {
+        case 0:
+            _context37.next = 2;
+            return mutateSWR(memberGetKey(memberId), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee35() { return _regeneratorRuntime().wrap(function _callee35$(_context36) { while (1)
+                switch (_context36.prev = _context36.next) {
+                    case 0:
+                        _context36.next = 2;
+                        return client.organization.members["delete"](memberId);
+                    case 2:
+                    case "end": return _context36.stop();
+                } }, _callee35); })); });
+        case 2: return _context37.abrupt("return", _context37.sent);
+        case 3:
+        case "end": return _context37.stop();
+    } }, _callee36); })); }), deleteMember = _useMutateWithToast5.mutate; var _useMutateWithToast6 = useMutateWithToast(function (memberId) { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee38() { return _regeneratorRuntime().wrap(function _callee38$(_context39) { while (1)
+    switch (_context39.prev = _context39.next) {
+        case 0:
+            _context39.next = 2;
+            return mutateSWR(memberGetKey(memberId), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee37() { var result; return _regeneratorRuntime().wrap(function _callee37$(_context38) { while (1)
+                switch (_context38.prev = _context38.next) {
+                    case 0:
+                        _context38.next = 2;
+                        return client.organization.members.reactivate(memberId);
+                    case 2:
+                        result = _context38.sent;
+                        return _context38.abrupt("return", result.member);
+                    case 4:
+                    case "end": return _context38.stop();
+                } }, _callee37); })); }, { populateCache: true, revalidate: false });
+        case 2: return _context39.abrupt("return", _context39.sent);
+        case 3:
+        case "end": return _context39.stop();
+    } }, _callee38); })); }), reactivateMember = _useMutateWithToast6.mutate; var _useUpdateCachedMembe2 = useUpdateCachedMember(), markMemberDeleted = _useUpdateCachedMembe2.markMemberDeleted, setMember = _useUpdateCachedMembe2.setMember; var _h119 = h$4(), _h120 = _slicedToArray2(_h119, 2), memberPendingAction = _h120[0], setMemberPendingAction = _h120[1]; var _c = useModalState(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee39() { var member; return _regeneratorRuntime().wrap(function _callee39$(_context40) { while (1)
+    switch (_context40.prev = _context40.next) {
+        case 0:
+            if (memberPendingAction) {
+                _context40.next = 2;
+                break;
+            }
+            return _context40.abrupt("return");
+        case 2:
+            if (!(memberPendingAction.status === 'deleted')) {
+                _context40.next = 9;
+                break;
+            }
+            _context40.next = 5;
+            return reactivateMember(memberPendingAction.member_id);
+        case 5:
+            member = _context40.sent;
+            if (member) {
+                setMember(member);
+            }
+            _context40.next = 12;
+            break;
+        case 9:
+            _context40.next = 11;
+            return deleteMember(memberPendingAction.member_id);
+        case 11: markMemberDeleted(memberPendingAction.member_id);
+        case 12: revalidateMemberList === null || revalidateMemberList === void 0 ? void 0 : revalidateMemberList();
+        case 13:
+        case "end": return _context40.stop();
+    } }, _callee39); })); }), openConfirmationModal = _c.open, closeConfirmationModal = _c.close, deleteMemberModalProps = __rest(_c, ["open", "close"]); var close = function close() { closeConfirmationModal(); }; var openModal = function openModal(member) { setMemberPendingAction(member); openConfirmationModal(); }; var actionCopy = getActionCopy({ status: (_a = memberPendingAction === null || memberPendingAction === void 0 ? void 0 : memberPendingAction.status) !== null && _a !== void 0 ? _a : 'active', isEmailVerified: (_b = memberPendingAction === null || memberPendingAction === void 0 ? void 0 : memberPendingAction.email_address_verified) !== null && _b !== void 0 ? _b : false }); var modal = /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, deleteMemberModalProps, { close: close, title: actionCopy.modalTitle, confirmButtonText: actionCopy.modalAction, warning: true }), typeof actionCopy.modalDescription === 'string' ? ( /*#__PURE__*/wn.createElement(Typography, null, actionCopy.modalDescription)) : actionCopy.modalDescription); return { openModal: openModal, modal: modal }; };
+var DangerZoneSection = function DangerZoneSection(_ref143) { var member = _ref143.member; var _useRbac35 = useRbac('stytch.member', 'create'), canCreateMember = _useRbac35.data; var _useRbac36 = useRbac('stytch.member', 'delete'), canDeleteMember = _useRbac36.data; var isMemberDeleted = member.status === 'deleted'; var canMemberBeReactivated = member.email_address_verified; var canPerformAction = isMemberDeleted ? canCreateMember : canDeleteMember; var _useMemberActivation = useMemberActivation(), openModal = _useMemberActivation.openModal, modal = _useMemberActivation.modal; var actionCopy = getActionCopy({ status: member.status, isEmailVerified: member.email_address_verified }); var handleActionClick = T$2(function () { openModal(member); }, [member, openModal]); var _useMemberManagementR3 = useMemberManagementRouterController(), useBlockNavigation = _useMemberManagementR3.useBlockNavigation; return canPerformAction ? ( /*#__PURE__*/wn.createElement(SettingsContainer, { title: "Danger zone", useBlockNavigation: useBlockNavigation }, /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, !isMemberDeleted || canMemberBeReactivated ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, modal, /*#__PURE__*/ wn.createElement(Typography, { variant: "body2" }, actionCopy.description), /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", warning: true, onClick: handleActionClick }, actionCopy.action))) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, "The Member\u2019s email address was not verified. You cannot reactivate an unverified Member."))))) : null; };
+var MemberDetailsSectionBody = function MemberDetailsSectionBody(_ref144) { var localState = _ref144.localState, setLocalState = _ref144.setLocalState, remoteState = _ref144.remoteState; var _useSettingsContainer8 = useSettingsContainer(), editing = _useSettingsContainer8.editing; var _ref145 = editing ? localState : remoteState, emailAddress = _ref145.emailAddress, name = _ref145.name; var handleNameChange = useStateSliceSetter(setLocalState, 'name'); var handleEmailChange = useStateSliceSetter(setLocalState, 'emailAddress'); var _useRbac37 = useRbac('stytch.member', 'update.info.name'), canUpdateName = _useRbac37.data; var _useRbac38 = useRbac('stytch.member', 'update.info.email'), canUpdateEmail = _useRbac38.data; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 2 }, /*#__PURE__*/ wn.createElement(SettingsList, null, /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Name" }, editing && canUpdateName ? ( /*#__PURE__*/wn.createElement(Input$1, { value: name, onChange: handleNameChange })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, name || NO_VALUE))), /*#__PURE__*/ wn.createElement(SettingsListItem, { title: "Email" }, editing && canUpdateEmail ? ( /*#__PURE__*/wn.createElement(Input$1, { value: emailAddress, onChange: handleEmailChange, caption: "Updating will revoke any current sessions, force a password reset, and delete SSO/OAuth registrations." })) : ( /*#__PURE__*/wn.createElement(Typography, { variant: "body2" }, emailAddress || NO_VALUE))))); };
+var MemberDetailsSection = function MemberDetailsSection(_ref146) { var member = _ref146.member; var _useRbac39 = useRbac('stytch.member', 'update.info.name'), canUpdateName = _useRbac39.data; var _useRbac40 = useRbac('stytch.member', 'update.info.email'), canUpdateEmail = _useRbac40.data; var isMemberDeleted = member.status === 'deleted'; var canEditSection = !isMemberDeleted && (canUpdateName || canUpdateEmail); var remoteState = F$3(function () { return { emailAddress: member.email_address, name: member.name }; }, [member.email_address, member.name]); var _useFormState9 = useFormState({ remoteState: remoteState }), localState = _useFormState9.localState, setLocalState = _useFormState9.setLocalState, editing = _useFormState9.editing, handleSetEditing = _useFormState9.handleSetEditing; var _useMutateMember2 = useMutateMember(), mutate = _useMutateMember2.mutate; var handleSave = T$2(function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee40() { var memberOptions, shouldUpdate, setOption; return _regeneratorRuntime().wrap(function _callee40$(_context41) { while (1)
+    switch (_context41.prev = _context41.next) {
+        case 0:
+            memberOptions = { member_id: member.member_id };
+            shouldUpdate = false;
+            setOption = function setOption(key, value) { memberOptions[key] = value; shouldUpdate = true; };
+            if (localState.name !== remoteState.name) {
+                setOption('name', localState.name);
+            }
+            if (localState.emailAddress !== remoteState.emailAddress) {
+                setOption('email_address', localState.emailAddress);
+            }
+            if (!shouldUpdate) {
+                _context41.next = 8;
+                break;
+            }
+            _context41.next = 8;
+            return mutate(memberOptions);
+        case 8:
+        case "end": return _context41.stop();
+    } }, _callee40); })); }, [localState.emailAddress, localState.name, member.member_id, mutate, remoteState.emailAddress, remoteState.name]); var _useMemberManagementR4 = useMemberManagementRouterController(), useBlockNavigation = _useMemberManagementR4.useBlockNavigation; return /*#__PURE__*/ wn.createElement(SettingsContainer, { title: "Details", hasCTA: canEditSection, onSave: handleSave, useBlockNavigation: useBlockNavigation, editing: editing, setEditing: handleSetEditing }, /*#__PURE__*/ wn.createElement(MemberDetailsSectionBody, { remoteState: remoteState, localState: localState, setLocalState: setLocalState })); };
+var allMemberStatuses = ['active', 'invited', 'pending', 'deleted'];
+var allMemberStatusesSet = new Set(allMemberStatuses);
+var memberStatusDisplayNames = { active: 'Active', invited: 'Invited', pending: 'Pending', deleted: 'Deactivated' };
+var getMemberStatusDisplayName = function getMemberStatusDisplayName(status) { return status in memberStatusDisplayNames ? memberStatusDisplayNames[status] : status; };
+var useMember = function useMember(memberId) { var client = useStytchClient(); return useSWR(memberGetKey(memberId), function () { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee41() { var _a, response; return _regeneratorRuntime().wrap(function _callee41$(_context42) { while (1)
+    switch (_context42.prev = _context42.next) {
+        case 0:
+            _context42.next = 2;
+            return client.organization.members.search({ limit: 1, query: { operator: 'AND', operands: [{ filter_name: 'member_ids', filter_value: [memberId] }, { filter_name: 'statuses', filter_value: allMemberStatuses }] } });
+        case 2:
+            response = _context42.sent;
+            return _context42.abrupt("return", (_a = response.members.at(0)) !== null && _a !== void 0 ? _a : null);
+        case 4:
+        case "end": return _context42.stop();
+    } }, _callee41); })); }); };
+var MemberDetailsScreen = function MemberDetailsScreen(_ref147) { var memberId = _ref147.memberId; var _a; var _useMemberManagementR5 = useMemberManagementRouterController(), navigate = _useMemberManagementR5.navigate; var _useMember = useMember(memberId), member = _useMember.data, error = _useMember.error, isLoading = _useMember.isLoading; var memberName = (member === null || member === void 0 ? void 0 : member.name) || NO_VALUE; var _useSelf2 = useSelf(), self = _useSelf2.self; var isSelf = (self === null || self === void 0 ? void 0 : self.member_id) === memberId; var memberDisplayName = isSelf ? decorateCurrentMemberName(memberName) : memberName; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(Button, { compact: true, variant: "ghost", onClick: function onClick() { navigate({ screen: 'membersList' }); }, startIcon: /*#__PURE__*/ wn.createElement(default_1$5, null) }, "Back to all Members"), member ? ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", justifyContent: "flex-start", gap: 1 }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h2" }, memberDisplayName), member.status !== 'active' && /*#__PURE__*/ wn.createElement(Tag, { size: "small" }, getMemberStatusDisplayName(member.status))), /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, /*#__PURE__*/ wn.createElement(MemberDetailsSection, { member: member }), /*#__PURE__*/ wn.createElement(AccessSection, { member: member }), member.status === 'active' && /*#__PURE__*/ wn.createElement(AuthManagementSection, { member: member }), /*#__PURE__*/ wn.createElement(DangerZoneSection, { member: member })))) : error || member === null ? ( /*#__PURE__*/wn.createElement(Alert, null, (_a = extractErrorMessage(error)) !== null && _a !== void 0 ? _a : 'There was an error loading Member details.')) : isLoading && /*#__PURE__*/ wn.createElement(PageLoadingIndicator, null)); };
+var Add = {};
+var _interopRequireDefault$4 = interopRequireDefaultExports;
+var _interopRequireWildcard$4 = interopRequireWildcardExports;
+Object.defineProperty(Add, "__esModule", { value: true });
+var default_1$4 = Add["default"] = void 0;
+var React$4 = _interopRequireWildcard$4(require$$2);
+var _createSvgIcon$4 = _interopRequireDefault$4(requireCreateSvgIcon());
+var _default$4 = (0, _createSvgIcon$4["default"])(/*#__PURE__*/ React$4.createElement("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }), 'Add');
+default_1$4 = Add["default"] = _default$4;
+var DeleteOutlined = {};
+var _interopRequireDefault$3 = interopRequireDefaultExports;
+var _interopRequireWildcard$3 = interopRequireWildcardExports;
+Object.defineProperty(DeleteOutlined, "__esModule", { value: true });
+var default_1$3 = DeleteOutlined["default"] = void 0;
+var React$3 = _interopRequireWildcard$3(require$$2);
+var _createSvgIcon$3 = _interopRequireDefault$3(requireCreateSvgIcon());
+var _default$3 = (0, _createSvgIcon$3["default"])(/*#__PURE__*/ React$3.createElement("path", { d: "M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" }), 'DeleteOutlined');
+default_1$3 = DeleteOutlined["default"] = _default$3;
+var EditOutlined = {};
+var _interopRequireDefault$2 = interopRequireDefaultExports;
+var _interopRequireWildcard$2 = interopRequireWildcardExports;
+Object.defineProperty(EditOutlined, "__esModule", { value: true });
+var default_1$2 = EditOutlined["default"] = void 0;
+var React$2 = _interopRequireWildcard$2(require$$2);
+var _createSvgIcon$2 = _interopRequireDefault$2(requireCreateSvgIcon());
+var _default$2 = (0, _createSvgIcon$2["default"])(/*#__PURE__*/ React$2.createElement("path", { d: "M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" }), 'EditOutlined');
+default_1$2 = EditOutlined["default"] = _default$2;
+var VisibilityOutlined = {};
+var _interopRequireDefault$1 = interopRequireDefaultExports;
+var _interopRequireWildcard$1 = interopRequireWildcardExports;
+Object.defineProperty(VisibilityOutlined, "__esModule", { value: true });
+var default_1$1 = VisibilityOutlined["default"] = void 0;
+var React$1 = _interopRequireWildcard$1(require$$2);
+var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
+var _default$1 = (0, _createSvgIcon$1["default"])(/*#__PURE__*/ React$1.createElement("path", { d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z" }), 'VisibilityOutlined');
+default_1$1 = VisibilityOutlined["default"] = _default$1;
+var INFINITE_PREFIX = '$inf$';
+var EMPTY_PROMISE = Promise.resolve();
+var getFirstPageKey = function getFirstPageKey(getKey) { return serialize$1(getKey ? getKey(0, null) : null)[0]; };
+var infinite = function infinite(useSWRNext) { return function (getKey, fn, config) { var didMountRef = _$1(false); var cache = config.cache, _config$initialSize = config.initialSize, initialSize = _config$initialSize === void 0 ? 1 : _config$initialSize, _config$revalidateAll = config.revalidateAll, revalidateAll = _config$revalidateAll === void 0 ? false : _config$revalidateAll, _config$persistSize = config.persistSize, persistSize = _config$persistSize === void 0 ? false : _config$persistSize, _config$revalidateFir = config.revalidateFirstPage, revalidateFirstPage = _config$revalidateFir === void 0 ? true : _config$revalidateFir, _config$revalidateOnM = config.revalidateOnMount, revalidateOnMount = _config$revalidateOnM === void 0 ? false : _config$revalidateOnM, _config$parallel = config.parallel, parallel = _config$parallel === void 0 ? false : _config$parallel; var infiniteKey; try {
+    infiniteKey = getFirstPageKey(getKey);
+    if (infiniteKey)
+        infiniteKey = INFINITE_PREFIX + infiniteKey;
+}
+catch (err) { } var _createCacheHelper = createCacheHelper(cache, infiniteKey), _createCacheHelper2 = _slicedToArray2(_createCacheHelper, 3), get = _createCacheHelper2[0], set = _createCacheHelper2[1], subscribeCache = _createCacheHelper2[2]; var getSnapshot = T$2(function () { var size = isUndefined(get()._l) ? initialSize : get()._l; return size; }, [cache, infiniteKey, initialSize]); shimExports.useSyncExternalStore(T$2(function (callback) { if (infiniteKey)
+    return subscribeCache(infiniteKey, function () { callback(); }); return function () { }; }, [cache, infiniteKey]), getSnapshot, getSnapshot); var resolvePageSize = T$2(function () { var cachedPageSize = get()._l; return isUndefined(cachedPageSize) ? initialSize : cachedPageSize; }, [infiniteKey, initialSize]); var lastPageSizeRef = _$1(resolvePageSize()); useIsomorphicLayoutEffect(function () { if (!didMountRef.current) {
+    didMountRef.current = true;
+    return;
+} if (infiniteKey) {
+    set({ _l: persistSize ? lastPageSizeRef.current : resolvePageSize() });
+} }, [infiniteKey, cache]); var shouldRevalidateOnMount = revalidateOnMount && !didMountRef.current; var swr = useSWRNext(infiniteKey, /*#__PURE__*/ function () { var _ref148 = _asyncToGenerator(/*#__PURE__*/ _regeneratorRuntime().mark(function _callee43(key) { var forceRevalidateAll, data, pageSize, _createCacheHelper3, _createCacheHelper4, getCache, cacheData, revalidators, previousPageData, _loop2, i; return _regeneratorRuntime().wrap(function _callee43$(_context45) { while (1)
+    switch (_context45.prev = _context45.next) {
+        case 0:
+            forceRevalidateAll = get()._i;
+            data = [];
+            pageSize = resolvePageSize();
+            _createCacheHelper3 = createCacheHelper(cache, key), _createCacheHelper4 = _slicedToArray2(_createCacheHelper3, 1), getCache = _createCacheHelper4[0];
+            cacheData = getCache().data;
+            revalidators = [];
+            previousPageData = null;
+            _loop2 = /*#__PURE__*/ _regeneratorRuntime().mark(function _loop2(i) { var _serialize$, _serialize$2, pageKey, pageArg, _createCacheHelper5, _createCacheHelper6, getSWRCache, setSWRCache, pageData, shouldFetchPage, revalidate; return _regeneratorRuntime().wrap(function _loop2$(_context44) { while (1)
+                switch (_context44.prev = _context44.next) {
+                    case 0:
+                        _serialize$ = serialize$1(getKey(i, parallel ? null : previousPageData)), _serialize$2 = _slicedToArray2(_serialize$, 2), pageKey = _serialize$2[0], pageArg = _serialize$2[1];
+                        if (pageKey) {
+                            _context44.next = 3;
+                            break;
+                        }
+                        return _context44.abrupt("return", 1);
+                    case 3:
+                        _createCacheHelper5 = createCacheHelper(cache, pageKey), _createCacheHelper6 = _slicedToArray2(_createCacheHelper5, 2), getSWRCache = _createCacheHelper6[0], setSWRCache = _createCacheHelper6[1];
+                        pageData = getSWRCache().data;
+                        shouldFetchPage = revalidateAll || forceRevalidateAll || isUndefined(pageData) || revalidateFirstPage && !i && !isUndefined(cacheData) || shouldRevalidateOnMount || cacheData && !isUndefined(cacheData[i]) && !config.compare(cacheData[i], pageData);
+                        if (!(fn && shouldFetchPage)) {
+                            _context44.next = 16;
+                            break;
+                        }
+                        revalidate = /*#__PURE__*/ function () { var _ref149 = _asyncToGenerator(/*#__PURE__*/ _regeneratorRuntime().mark(function _callee42() { return _regeneratorRuntime().wrap(function _callee42$(_context43) { while (1)
+                            switch (_context43.prev = _context43.next) {
+                                case 0:
+                                    _context43.next = 2;
+                                    return fn(pageArg);
+                                case 2:
+                                    pageData = _context43.sent;
+                                    setSWRCache({ data: pageData, _k: pageArg });
+                                    data[i] = pageData;
+                                case 5:
+                                case "end": return _context43.stop();
+                            } }, _callee42); })); return function revalidate() { return _ref149.apply(this, arguments); }; }();
+                        if (!parallel) {
+                            _context44.next = 12;
+                            break;
+                        }
+                        revalidators.push(revalidate);
+                        _context44.next = 14;
+                        break;
+                    case 12:
+                        _context44.next = 14;
+                        return revalidate();
+                    case 14:
+                        _context44.next = 17;
+                        break;
+                    case 16: data[i] = pageData;
+                    case 17: if (!parallel) {
+                        previousPageData = pageData;
+                    }
+                    case 18:
+                    case "end": return _context44.stop();
+                } }, _loop2); });
+            i = 0;
+        case 9:
+            if (!(i < pageSize)) {
+                _context45.next = 16;
+                break;
+            }
+            return _context45.delegateYield(_loop2(i), "t0", 11);
+        case 11:
+            if (!_context45.t0) {
+                _context45.next = 13;
+                break;
+            }
+            return _context45.abrupt("break", 16);
+        case 13:
+            ++i;
+            _context45.next = 9;
+            break;
+        case 16:
+            if (!parallel) {
+                _context45.next = 19;
+                break;
+            }
+            _context45.next = 19;
+            return Promise.all(revalidators.map(function (r) { return r(); }));
+        case 19:
+            set({ _i: UNDEFINED });
+            return _context45.abrupt("return", data);
+        case 21:
+        case "end": return _context45.stop();
+    } }, _callee43); })); return function (_x) { return _ref148.apply(this, arguments); }; }(), config); var mutate = T$2(function (data, opts) { var options = typeof opts === 'boolean' ? { revalidate: opts } : opts || {}; var shouldRevalidate = options.revalidate !== false; if (!infiniteKey)
+    return EMPTY_PROMISE; if (shouldRevalidate) {
+    if (!isUndefined(data)) {
+        set({ _i: false });
+    }
+    else {
+        set({ _i: true });
+    }
+} return arguments.length ? swr.mutate(data, _objectSpread(_objectSpread({}, options), {}, { revalidate: shouldRevalidate })) : swr.mutate(); }, [infiniteKey, cache]); var setSize = T$2(function (arg) { if (!infiniteKey)
+    return EMPTY_PROMISE; var _createCacheHelper7 = createCacheHelper(cache, infiniteKey), _createCacheHelper8 = _slicedToArray2(_createCacheHelper7, 2), changeSize = _createCacheHelper8[1]; var size; if (isFunction$1(arg)) {
+    size = arg(resolvePageSize());
+}
+else if (typeof arg == 'number') {
+    size = arg;
+} if (typeof size != 'number')
+    return EMPTY_PROMISE; changeSize({ _l: size }); lastPageSizeRef.current = size; var data = []; var _createCacheHelper9 = createCacheHelper(cache, infiniteKey), _createCacheHelper10 = _slicedToArray2(_createCacheHelper9, 1), getInfiniteCache = _createCacheHelper10[0]; var previousPageData = null; for (var i = 0; i < size; ++i) {
+    var _serialize$3 = serialize$1(getKey(i, previousPageData)), _serialize$4 = _slicedToArray2(_serialize$3, 1), pageKey = _serialize$4[0];
+    var _createCacheHelper11 = createCacheHelper(cache, pageKey), _createCacheHelper12 = _slicedToArray2(_createCacheHelper11, 1), getCache = _createCacheHelper12[0];
+    var pageData = pageKey ? getCache().data : UNDEFINED;
+    if (isUndefined(pageData)) {
+        return mutate(getInfiniteCache().data);
+    }
+    data.push(pageData);
+    previousPageData = pageData;
+} return mutate(data); }, [infiniteKey, cache, mutate, resolvePageSize]); return { size: resolvePageSize(), setSize: setSize, mutate: mutate, get data() { return swr.data; }, get error() { return swr.error; }, get isValidating() { return swr.isValidating; }, get isLoading() { return swr.isLoading; } }; }; };
+var index = withMiddleware(useSWR, infinite);
+var FilterList = {};
+var _interopRequireDefault = interopRequireDefaultExports;
+var _interopRequireWildcard = interopRequireWildcardExports;
+Object.defineProperty(FilterList, "__esModule", { value: true });
+var default_1 = FilterList["default"] = void 0;
+var React = _interopRequireWildcard(require$$2);
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+var _default = (0, _createSvgIcon["default"])(/*#__PURE__*/ React.createElement("path", { d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" }), 'FilterList');
+default_1 = FilterList["default"] = _default;
+var anchorOrigin = { horizontal: 'left', vertical: 'bottom' };
+var transformOrigin = { horizontal: 'left', vertical: 'top' };
+var FilterMenu = function FilterMenu(_ref150) { var anchorEl = _ref150.anchorEl, items = _ref150.items, onChange = _ref150.onChange, value = _ref150.value; var theme = useTheme(); var iconColor = value.size > 0 ? theme.styleConfig.colors.primary : theme.styleConfig.colors.secondary; var _h121 = h$4(value), _h122 = _slicedToArray2(_h121, 2), pendingValue = _h122[0], setPendingValue = _h122[1]; var actions = F$3(function () { return items.map(function (item) { return { key: item.value, label: item.label, onClick: function onClick() { var newValue = new Set(pendingValue); if (pendingValue.has(item.value)) {
+        newValue["delete"](item.value);
+    }
+    else {
+        newValue.add(item.value);
+    } setPendingValue(newValue); }, icon: /*#__PURE__*/ wn.createElement(default_1$b, { style: { visibility: pendingValue.has(item.value) ? undefined : 'hidden' } }) }; }); }, [items, pendingValue]); var handleOpen = T$2(function () { setPendingValue(value); }, [value]); var handleClose = T$2(function () { onChange(pendingValue); }, [onChange, pendingValue]); return /*#__PURE__*/ wn.createElement(IconButtonMenu, { actions: actions, anchorEl: anchorEl, closeOnClick: false, icon: /*#__PURE__*/ wn.createElement(default_1, { htmlColor: iconColor }), item: undefined, idPrefix: "filter_column", menuAnchorOrigin: anchorOrigin, menuTransformOrigin: transformOrigin, onOpen: handleOpen, onClose: handleClose }); };
+var useDebouncedState = function useDebouncedState(initialValue, delay) { var _h123 = h$4(initialValue), _h124 = _slicedToArray2(_h123, 2), debouncedValue = _h124[0], setDebouncedValue = _h124[1]; var _h125 = h$4(initialValue), _h126 = _slicedToArray2(_h125, 2), pendingValue = _h126[0], setPendingValue = _h126[1]; var debouncedSetValue = F$3(function () { return debounce$2(setDebouncedValue, delay); }, [delay]); var setValue = T$2(function (newValue) { setPendingValue(newValue); debouncedSetValue(newValue); }, [debouncedSetValue]); return [debouncedValue, setValue, pendingValue]; };
+var useSessionStorage = makeUseStorage(typeof window !== 'undefined' ? window.sessionStorage : undefined);
+var serialize = function serialize(value) { return Array.from(value); };
+var usePersistentFilter = function usePersistentFilter(_ref151) { var viewId = _ref151.viewId, fieldId = _ref151.fieldId, defaultValue = _ref151.defaultValue, permittedValues = _ref151.permittedValues; var deserialize = T$2(function (value) { if (!value) {
+    return new Set(defaultValue);
+} return new Set(value.filter(function (v) { return permittedValues.has(v); })); }, [defaultValue, permittedValues]); var _useSessionStorage = useSessionStorage(serialize(defaultValue), "".concat(viewId, "_filter_").concat(fieldId)), _useSessionStorage2 = _slicedToArray2(_useSessionStorage, 2), serializedValue = _useSessionStorage2[0], setSerializedValue = _useSessionStorage2[1]; var value = F$3(function () { return deserialize(serializedValue); }, [deserialize, serializedValue]); var setValue = T$2(function (newValue) { return setSerializedValue(serialize(newValue)); }, [setSerializedValue]); return [value, setValue]; };
+var defaultInviteRoles = [];
+var useInviteModal = function useInviteModal(revalidateMemberList) { var _h127 = h$4(''), _h128 = _slicedToArray2(_h127, 2), inviteName = _h128[0], setInviteName = _h128[1]; var _h129 = h$4(''), _h130 = _slicedToArray2(_h129, 2), inviteEmail = _h130[0], setInviteEmail = _h130[1]; var _h131 = h$4(defaultInviteRoles), _h132 = _slicedToArray2(_h131, 2), inviteRoles = _h132[0], setInviteRoles = _h132[1]; var client = useStytchClient(); var _a = useModalState(), openInviteModal = _a.open, modalState = __rest(_a, ["open"]); var _useToast6 = useToast(), openToast = _useToast6.openToast; var handleConfirmInviteModal = function handleConfirmInviteModal() { return __awaiter(void 0, void 0, void 0, /*#__PURE__*/ _regeneratorRuntime().mark(function _callee44() { var message; return _regeneratorRuntime().wrap(function _callee44$(_context46) { while (1)
+    switch (_context46.prev = _context46.next) {
+        case 0:
+            _context46.prev = 0;
+            _context46.next = 3;
+            return client.magicLinks.email.invite({ name: inviteName, email_address: inviteEmail.trim(), roles: inviteRoles });
+        case 3:
+            _context46.next = 10;
+            break;
+        case 5:
+            _context46.prev = 5;
+            _context46.t0 = _context46["catch"](0);
+            message = extractErrorMessage(_context46.t0);
+            if (message) {
+                openToast({ text: message, type: 'error' });
+            }
+            return _context46.abrupt("return");
+        case 10:
+            revalidateMemberList();
+            modalState.close();
+        case 12:
+        case "end": return _context46.stop();
+    } }, _callee44, null, [[0, 5]]); })); }; var handleInviteClick = T$2(function () { setInviteName(''); setInviteEmail(''); setInviteRoles(defaultInviteRoles); openInviteModal(); }, [openInviteModal]); return { handleInviteClick: handleInviteClick, inviteModalProps: { modalState: Object.assign(Object.assign({}, modalState), { confirm: handleConfirmInviteModal }), inviteName: inviteName, setInviteName: setInviteName, inviteEmail: inviteEmail, setInviteEmail: setInviteEmail, inviteRoles: inviteRoles, setInviteRoles: setInviteRoles } }; };
+var InviteModal = function InviteModal(_ref152) { var modalState = _ref152.modalState, inviteEmail = _ref152.inviteEmail, inviteName = _ref152.inviteName, inviteRoles = _ref152.inviteRoles, setInviteEmail = _ref152.setInviteEmail, setInviteName = _ref152.setInviteName, setInviteRoles = _ref152.setInviteRoles; var roleAutocompleteProps = useRoleAutocomplete({ excludeStytchMember: true }); var stytchMemberRoleDisplayName = roleAutocompleteProps.getOptionLabel(ROLE_ID_STYTCH_MEMBER); var formIsValid = inviteEmail.trim().length > 0; return /*#__PURE__*/ wn.createElement(Modal, Object.assign({}, modalState, { keepOpenOnConfirm: true, title: "Invite Member", confirmButtonText: "Invite", disableConfirm: !formIsValid }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Name (optional)", placeholder: "Enter name", value: inviteName, onChange: setInviteName }), /*#__PURE__*/ wn.createElement(Input$1, { label: "Email address", placeholder: "Enter email address", value: inviteEmail, onChange: setInviteEmail, inputProps: passwordManagerDisableAutofillProps }), /*#__PURE__*/ wn.createElement(Autocomplete, Object.assign({}, roleAutocompleteProps, { placeholder: inviteRoles.length > 0 ? undefined : 'Select Role', label: "Role", caption: "All members are automatically assigned the ".concat(stytchMemberRoleDisplayName, " Role. Select additional Roles to assign more permissions."), value: inviteRoles, onChange: setInviteRoles }))); };
+var MIN_EMAIL_FUZZY_SEARCH_LENGTH = 3;
+var MEMBER_LIST_TABLE_VIEW_ID = 'adminPortalMemberList';
+var DEFAULT_STATUSES_FILTER = new Set(['active', 'invited', 'pending']);
+var allStatusesFilterItems = allMemberStatuses.map(function (status) { return { label: getMemberStatusDisplayName(status), value: status }; });
+var useMembers = function useMembers(_ref153) { var limit = _ref153.limit, emailRaw = _ref153.email, roles = _ref153.roles, statuses = _ref153.statuses; var client = useStytchClient(); var orgInfo = useOrgInfo(); var email = emailRaw && emailRaw.length >= MIN_EMAIL_FUZZY_SEARCH_LENGTH ? emailRaw : undefined; return index(function (index, prevData) { var _a; if (prevData && !prevData.results_metadata.next_cursor) {
+    return null;
+} return { orgId: (_a = orgInfo.data) === null || _a === void 0 ? void 0 : _a.organization_id, method: 'members.search', limit: limit, email: email, roles: roles === null || roles === void 0 ? void 0 : roles.slice().sort(), statuses: statuses === null || statuses === void 0 ? void 0 : statuses.slice().sort(), cursor: prevData === null || prevData === void 0 ? void 0 : prevData.results_metadata.next_cursor }; }, fetchMembers(client), { revalidateFirstPage: false }); };
+var getMemberId = function getMemberId(item) { return item.member_id; };
+var RolesList = function RolesList(_ref154) { var roles = _ref154.roles; var sortRows = useRoleSortFn(); var sortedRoles = F$3(function () { return sortRows(roles.length === 1 ? roles : roles.filter(function (role) { return role.role_id !== ROLE_ID_STYTCH_MEMBER; })).map(function (role) { return role.displayName; }); }, [roles, sortRows]); return /*#__PURE__*/ wn.createElement(TagList, { tags: sortedRoles }); };
+var ColumnTitleWithFilter = function ColumnTitleWithFilter(_ref155) { var items = _ref155.items, onChange = _ref155.onChange, value = _ref155.value, title = _ref155.title; var _h133 = h$4(null), _h134 = _slicedToArray2(_h133, 2), container = _h134[0], setContainer = _h134[1]; return /*#__PURE__*/ wn.createElement("div", { ref: setContainer }, /*#__PURE__*/ wn.createElement(FlexBox, { gap: 1, alignItems: "center" }, title, /*#__PURE__*/ wn.createElement(FilterMenu, { anchorEl: container !== null && container !== void 0 ? container : undefined, items: items, value: value, onChange: onChange }))); };
+var emptySet = new Set();
+var MemberListScreen = function MemberListScreen() { var _a, _b; var _useMemberManagementR6 = useMemberManagementRouterController(), navigate = _useMemberManagementR6.navigate; var _useRbac41 = useRbac('stytch.member', 'create'), canCreateMember = _useRbac41.data; var _useRbac42 = useRbac('stytch.member', 'delete'), canDeleteMember = _useRbac42.data; var _useRbac43 = useRbac('stytch.member', 'update.info.delete.mfa-phone'), canDeleteMfaPhone = _useRbac43.data; var _useRbac44 = useRbac('stytch.member', 'update.info.delete.mfa-totp'), canDeleteMfaTotp = _useRbac44.data; var _useRbac45 = useRbac('stytch.member', 'update.info.delete.password'), canDeletePassword = _useRbac45.data; var _useRbac46 = useRbac('stytch.member', 'update.info.mfa-phone'), canUpdateMfaPhone = _useRbac46.data; var _useRbac47 = useRbac('stytch.member', 'update.info.name'), canUpdateName = _useRbac47.data; var _useRbac48 = useRbac('stytch.member', 'update.info.untrusted-metadata'), canUpdateUntrustedMetadata = _useRbac48.data; var _useRbac49 = useRbac('stytch.member', 'update.settings.is-breakglass'), canUpdateIsBreakglass = _useRbac49.data; var _useRbac50 = useRbac('stytch.member', 'update.settings.mfa-enrolled'), canUpdateMfaEnrolled = _useRbac50.data; var _useRbac51 = useRbac('stytch.member', 'update.settings.default-mfa-method'), canUpdateDefaultMfaMethod = _useRbac51.data; var _useRbac52 = useRbac('stytch.member', 'update.settings.roles'), canUpdateRoles = _useRbac52.data; var canUpdateMember = canDeleteMfaPhone || canDeleteMfaTotp || canDeletePassword || canUpdateMfaPhone || canUpdateName || canUpdateUntrustedMetadata || canUpdateIsBreakglass || canUpdateMfaEnrolled || canUpdateDefaultMfaMethod || canUpdateRoles; var canActivateOrDeactivate = canCreateMember || canDeleteMember; var orgInfo = useOrgInfo(); var orgAllowsEmailInvites = orgInfo.data && orgInfo.data.email_invites !== 'NOT_ALLOWED'; var _useSelf3 = useSelf(), self = _useSelf3.self; var currentMemberId = self === null || self === void 0 ? void 0 : self.member_id; var canInviteMember = canCreateMember && orgAllowsEmailInvites; var roleAutocompleteProps = useRoleAutocomplete({ excludeStytchMember: true }); var allRolesSet = F$3(function () { return new Set(roleAutocompleteProps.selectItems); }, [roleAutocompleteProps.selectItems]); var allRolesFilterItems = F$3(function () { return roleAutocompleteProps.selectItems.map(function (roleId) { return { label: roleAutocompleteProps.getOptionLabel(roleId), value: roleId }; }); }, [roleAutocompleteProps]); var _usePersistentFilter = usePersistentFilter({ viewId: MEMBER_LIST_TABLE_VIEW_ID, fieldId: 'role', defaultValue: emptySet, permittedValues: allRolesSet }), _usePersistentFilter2 = _slicedToArray2(_usePersistentFilter, 2), filterRoles = _usePersistentFilter2[0], setFilterRoles = _usePersistentFilter2[1]; var _usePersistentFilter3 = usePersistentFilter({ viewId: MEMBER_LIST_TABLE_VIEW_ID, fieldId: 'status', defaultValue: DEFAULT_STATUSES_FILTER, permittedValues: allMemberStatusesSet }), _usePersistentFilter4 = _slicedToArray2(_usePersistentFilter3, 2), filterStatuses = _usePersistentFilter4[0], setFilterStatuses = _usePersistentFilter4[1]; var itemRenderer = F$3(function () { return [{ id: 'name', title: 'Name', getValue: function getValue(_ref156) { var name = _ref156.name, member_id = _ref156.member_id; return member_id === currentMemberId ? decorateCurrentMemberName(name) : name; } }, { id: 'email', title: 'Email', getValue: function getValue(_ref157) { var email_address = _ref157.email_address; return email_address; } }, { id: 'role', title: 'Role', getValue: function getValue(_ref158) { var roles = _ref158.roles; return /*#__PURE__*/ wn.createElement(RolesList, { roles: roles }); }, renderTitle: function renderTitle() { return /*#__PURE__*/ wn.createElement(ColumnTitleWithFilter, { title: "Role", items: allRolesFilterItems, value: filterRoles, onChange: setFilterRoles }); } }, { id: 'status', title: 'Status', getValue: function getValue(_ref159) { var status = _ref159.status; return getMemberStatusDisplayName(status); }, renderTitle: function renderTitle() { return /*#__PURE__*/ wn.createElement(ColumnTitleWithFilter, { title: "Status", items: allStatusesFilterItems, value: filterStatuses, onChange: setFilterStatuses }); } }]; }, [allRolesFilterItems, currentMemberId, filterRoles, filterStatuses, setFilterRoles, setFilterStatuses]); var _useDebouncedState = useDebouncedState(''), _useDebouncedState2 = _slicedToArray2(_useDebouncedState, 3), filterText = _useDebouncedState2[0], setFilterText = _useDebouncedState2[1], pendingFilterText = _useDebouncedState2[2]; var _useItemsPerPage3 = useItemsPerPage({ viewId: MEMBER_LIST_TABLE_VIEW_ID }), _useItemsPerPage4 = _slicedToArray2(_useItemsPerPage3, 2), itemsPerPage = _useItemsPerPage4[0], handleItemsPerPageChange = _useItemsPerPage4[1]; var _useMembers = useMembers({ limit: itemsPerPage, email: filterText || undefined, roles: filterRoles.size > 0 ? Array.from(filterRoles) : undefined, statuses: filterStatuses.size > 0 ? Array.from(filterStatuses) : undefined }), data = _useMembers.data, error = _useMembers.error, isLoading = _useMembers.isLoading, setSize = _useMembers.setSize, size = _useMembers.size, mutate = _useMembers.mutate; var resultsMetadata = (_a = data === null || data === void 0 ? void 0 : data.at(-1)) === null || _a === void 0 ? void 0 : _a.results_metadata; var _usePagination2 = usePagination({ itemsCount: size, itemsPerPage: 1 }), currentPage = _usePagination2.currentPage, setCurrentPage = _usePagination2.setCurrentPage; var tableProps = { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: itemsPerPage, rowsPerPageOptions: itemsPerPageOptions, onRowsPerPageChange: handleItemsPerPageChange, items: F$3(function () { var _a; return (_a = data === null || data === void 0 ? void 0 : data.flatMap(function (page) { return page.members; })) !== null && _a !== void 0 ? _a : []; }, [data]), loadNext: T$2(function () { return setSize(function (size) { return size + 1; }); }, [setSize]), metadata: F$3(function () { var _a, _b; return { cursor: (_a = resultsMetadata === null || resultsMetadata === void 0 ? void 0 : resultsMetadata.next_cursor) !== null && _a !== void 0 ? _a : '__none', total: (_b = resultsMetadata === null || resultsMetadata === void 0 ? void 0 : resultsMetadata.total) !== null && _b !== void 0 ? _b : 0 }; }, [resultsMetadata === null || resultsMetadata === void 0 ? void 0 : resultsMetadata.next_cursor, resultsMetadata === null || resultsMetadata === void 0 ? void 0 : resultsMetadata.total]) }; var _useInviteModal = useInviteModal(mutate), handleInviteClick = _useInviteModal.handleInviteClick, inviteModalProps = _useInviteModal.inviteModalProps; var handleEdit = T$2(function (member) { navigate({ screen: 'memberDetails', params: { memberId: member.member_id } }); }, [navigate]); var _useMemberActivation2 = useMemberActivation(mutate), openModal = _useMemberActivation2.openModal, modal = _useMemberActivation2.modal; var handleActivateDeactivateMember = T$2(function (member) { openModal(member); }, [openModal]); var actions = F$3(function () { var getDeleteAction = function getDeleteAction(member) { switch (member.status) {
+    case 'invited':
+        if (canDeleteMember) {
+            return 'revoke-invite';
+        }
+        break;
+    case 'active':
+        if (canDeleteMember) {
+            return 'deactivate';
+        }
+        break;
+    case 'deleted':
+        if (canCreateMember && member.email_address_verified) {
+            return 'reactivate';
+        }
+        break;
+} }; return [{ key: 'view', label: 'View member', icon: /*#__PURE__*/ wn.createElement(default_1$1, null), onClick: handleEdit, isVisible: !canUpdateMember }, { key: 'edit', label: 'Edit member', icon: /*#__PURE__*/ wn.createElement(default_1$2, null), onClick: handleEdit, isVisible: canUpdateMember }, { key: 'revoke-invite', label: 'Revoke invite', icon: /*#__PURE__*/ wn.createElement(default_1$3, null), onClick: handleActivateDeactivateMember, isDangerous: true, isVisible: function isVisible(member) { return getDeleteAction(member) === 'revoke-invite'; } }, { key: 'deactivate', label: 'Deactivate', icon: /*#__PURE__*/ wn.createElement(default_1$3, null), onClick: handleActivateDeactivateMember, isDangerous: true, isVisible: function isVisible(member) { return getDeleteAction(member) === 'deactivate'; } }, { key: 'reactivate', label: 'Reactivate', icon: /*#__PURE__*/ wn.createElement(default_1$i, null), onClick: handleActivateDeactivateMember, isVisible: function isVisible(member) { return getDeleteAction(member) === 'reactivate'; } }]; }, [canCreateMember, canDeleteMember, canUpdateMember, handleActivateDeactivateMember, handleEdit]); var _useActionMenu2 = useActionMenu({ actions: actions, idPrefix: 'member', getId: getMemberId }), getItemActionProps = _useActionMenu2.getItemActionProps; return /*#__PURE__*/ wn.createElement(FlexBox, { flexDirection: "column", gap: 3 }, canActivateOrDeactivate && modal, /*#__PURE__*/ wn.createElement(FlexBox, { alignItems: "center", justifyContent: "space-between" }, /*#__PURE__*/ wn.createElement(Typography, { variant: "h1" }, "Members"), canInviteMember && ( /*#__PURE__*/wn.createElement(wn.Fragment, null, /*#__PURE__*/ wn.createElement(InviteModal, Object.assign({}, inviteModalProps)), /*#__PURE__*/ wn.createElement(Button, { variant: "primary", startIcon: /*#__PURE__*/ wn.createElement(default_1$4, null), onClick: handleInviteClick }, "Invite")))), /*#__PURE__*/ wn.createElement(SearchBar, { placeholder: "Search by email", value: pendingFilterText, onChange: setFilterText }), error ? ( /*#__PURE__*/wn.createElement(Alert, null, (_b = extractErrorMessage(error)) !== null && _b !== void 0 ? _b : 'There was an error loading the Members list.')) : ( /*#__PURE__*/wn.createElement(PaginatedTable, Object.assign({}, tableProps, { itemRenderer: itemRenderer, isLoading: isLoading, getItemActionProps: getItemActionProps, rowKeyExtractor: getMemberId, titleVariant: "h4" })))); };
+var routeMap = { membersList: MemberListScreen, memberDetails: MemberDetailsScreen };
+var initialRoute = { screen: 'membersList' };
+var Content = function Content() { var _useSelf4 = useSelf(), fromCache = _useSelf4.fromCache, self = _useSelf4.self; var _useRbac53 = useRbac('stytch.member', 'search'), canSearchMembers = _useRbac53.data; if (!self && fromCache || self && canSearchMembers === undefined) {
+    return /*#__PURE__*/ wn.createElement(PageLoadingIndicator, null);
+} if (!self || !canSearchMembers) {
+    return /*#__PURE__*/ wn.createElement(Alert, null, "You do not have permission to manage members. Please contact your admin if you think this is a mistake.");
+} return /*#__PURE__*/ wn.createElement(MemberManagementRouterProvider, { initialRoute: initialRoute }, /*#__PURE__*/ wn.createElement(MemberManagementRouter, { routeMap: routeMap })); };
+var AdminPortalMemberManagement$1 = function AdminPortalMemberManagement(props) { var initialClient = _$1(props.client); p$3(function () { readB2BInternals(initialClient.current).networkClient.logEvent({ name: 'render_b2b_admin_portal_member_management', details: {} }); }, []); return /*#__PURE__*/ wn.createElement(AdminPortalWrapper, { options: props }, /*#__PURE__*/ wn.createElement(Content, null)); };
+var mountAdminPortalMemberManagement = makeAdminPortalComponentMountFn(AdminPortalMemberManagement$1, 'stytch-b2b-admin-portal-member-management-ui', 'mountAdminPortalMemberManagement');
 
 const makeAdminPortalComponent = (mountFn, componentName) => {
     const Component = (props) => {
@@ -10326,7 +11010,7 @@ const makeAdminPortalComponent = (mountFn, componentName) => {
             }
             mountFn(Object.assign(Object.assign({}, props), { client: stytchClient, element: containerEl.current }));
         }, [stytchClient, props]);
-        return React$d.createElement("div", { ref: containerEl });
+        return React$j.createElement("div", { ref: containerEl });
     };
     return Component;
 };
@@ -10347,4 +11031,12 @@ const AdminPortalSSO = makeAdminPortalComponent(mountAdminPortalSSO, 'AdminPorta
  */
 const AdminPortalOrgSettings = makeAdminPortalComponent(mountAdminPortalOrgSettings, 'AdminPortalOrgSettings');
 
-export { AdminPortalB2BProducts, AdminPortalOrgSettings, AdminPortalSSO };
+/**
+ * The Admin Portal member management UI component.
+ * This component must be rendered within a {@link StytchB2BProvider}.
+ *
+ * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ */
+const AdminPortalMemberManagement = makeAdminPortalComponent(mountAdminPortalMemberManagement, 'AdminPortalMemberManagement');
+
+export { AdminPortalB2BProducts, AdminPortalMemberManagement, AdminPortalOrgSettings, AdminPortalSSO };