@niledatabase/react 2.3.0 → 2.3.2-alpha.0

package/dist/react.cjs.development.js

@@ -1,2 +1,1225 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@niledatabase/browser"),r=require("@tanstack/react-query"),n=require("@mui/material/CssBaseline"),a=require("@mui/joy/styles"),o=require("@mui/joy/Box"),l=require("@mui/joy/Button"),i=require("@mui/joy/Stack"),c=require("@mui/joy/Typography"),s=require("@mui/joy/Alert"),u=require("react-hook-form"),m=require("@mui/joy/Input"),d=require("@mui/joy/FormControl"),p=require("@mui/joy/FormHelperText"),b=require("@mui/icons-material/Error"),g=require("@mui/joy/FormLabel"),h=require("@mui/joy/Select"),f=require("@mui/joy/Option"),E=require("@mui/joy/Tooltip"),x=require("@mui/joy"),y=require("@mui/joy/Checkbox"),w=require("@mui/joy/List"),v=require("@mui/joy/ListItem"),T=require("@mui/x-data-grid"),S=require("@mui/icons-material/Add"),C=require("lodash/isNull"),q=require("lodash/isUndefined"),k=require("@mui/icons-material/CopyAll"),F=require("@mui/icons-material/CheckCircleOutlined");function A(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var j=A(e);function P({theme:t,children:r,slotProps:o}){return e.createElement(a.CssVarsProvider,{...o,theme:t},e.createElement(n,{enableColorScheme:!0}),r)}const I=new r.QueryClient,M={api:new t({basePath:"https://api.thenile.dev",credentials:"include"}),basePath:""},U=e.createContext(M),{Provider:O}=U,R=({children:t})=>e.createElement(r.QueryClientProvider,{client:I},t),B=()=>e.useContext(U),V=()=>{const{basePath:t,tenantId:r}=B();return e.useMemo((()=>({tenantId:r,basePath:t})),[t,r])},D=()=>B().api;var L;function N(){return N=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},N.apply(this,arguments)}var $=function(e){return j.createElement("svg",N({xmlns:"http://www.w3.org/2000/svg",width:18,height:18},e),L||(L=j.createElement("g",{fillRule:"evenodd"},j.createElement("path",{fill:"#EA4335",d:"M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48"}),j.createElement("path",{fill:"#4285F4",d:"M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62"}),j.createElement("path",{fill:"#FBBC05",d:"M3.88 10.78A5.5 5.5 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04z"}),j.createElement("path",{fill:"#34A853",d:"M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18"}),j.createElement("path",{fill:"none",d:"M0 0h18v18H0z"}))))};function z(e){const{options:t,attribute:r,display:n,helperText:a}=e,{watch:l,control:s}=u.useFormContext(),m=l(r.name),d={};return a&&(d.color="danger"),j.createElement(u.Controller,{name:r.name,rules:{required:Boolean(r.required)},control:s,render:({field:e})=>j.createElement(i,null,j.createElement(g,{htmlFor:`${e.name}`},n.label),j.createElement(o,{role:"group","aria-labelledby":r.name,sx:{borderRadius:"var(--joy-radius-sm)",p:.5,border:a?"1px solid var(--joy-palette-danger-outlinedBorder)":"none"}},j.createElement(w,{orientation:"horizontal",wrap:!0,sx:{"--List-gap":"8px"}},t.map((n=>(d.id=String(n.value),j.createElement(v,{key:`${n.value}-${n.label}`},j.createElement(y,{overlay:t.length>1,...d,checked:m.includes(n.value),disableIcon:t.length>1,variant:"soft",label:n.label,onChange:t=>{if(r.allowMultiple)if(t.target.checked)m?e.onChange(m.concat(n.value)):e.onChange([n.value]);else{const t=m.filter((e=>e!==n.value));t.length>0?e.onChange(t):e.onChange("")}else t.target.checked?e.onChange(n.value):e.onChange("")}}))))))),j.createElement(c,{sx:{color:"var(--joy-palette-danger-500)"},level:"body-sm"},a))})}var G;exports.FormAttributeType=void 0,(G=exports.FormAttributeType||(exports.FormAttributeType={})).Text="text",G.Password="password",G.Select="select",G.Number="number",G.Float="float",G.Checkbox="checkbox",G.Switch="switch";const H=e=>!0===e.allowMultiple&&!Array.isArray(e.defaultValue)&&e.defaultValue?"number"==typeof e.defaultValue?[e.defaultValue]:[String(e.defaultValue)]:e.defaultValue??"";function W(t){const{error:r,attr:n}=t;return r?e.createElement(E,{title:r,color:"danger",sx:{cursor:"pointer"}},e.createElement(g,null,n.label??n.name,e.createElement(b,{sx:{ml:.5,"--Icon-color":"#c41c1c"},fontSize:"small"}))):e.createElement(g,null,n.label??n.name)}function Q(t){const{mutation:r,buttonText:n,attributes:a,cancelButton:c,loading:s,successMessage:b}=t,g=e.useMemo((()=>a.reduce(((e,t)=>(e[t.name]=H(t),e)),{})),[a]),E=u.useForm({defaultValues:g}),{register:y,control:w,handleSubmit:v,formState:{errors:T}}=E,S=e.useCallback((e=>{r.mutate(e)}),[r]);return e.createElement(u.FormProvider,{...E},e.createElement(i,{component:"form",onSubmit:v((e=>S(e))),spacing:2},a.map((t=>{const r={},n={key:t.name,label:t.label??t.name,id:t.label??t.name,placeholder:t.placeholder??t.label??t.name,error:Boolean(T[t.name]),disabled:Boolean(t.disabled)},a=t.options??[],l=t.helpText??"";let c="";switch(t.required&&(c=T[t.name]?`${t.label??t.name} is required`:"",r.required=!0),t.type){case exports.FormAttributeType.Switch:return e.createElement(d,{key:n.key,id:n.id,orientation:"horizontal",sx:{alignItems:"center"}},e.createElement(o,null,e.createElement(W,{error:c,attr:t}),e.createElement(p,{id:`${t.name}-helper-text`},l)),e.createElement(u.Controller,{control:w,rules:{required:Boolean(t.required)},name:t.name,render:({field:r})=>{const n={};return T[t.name]&&(n.color="danger"),e.createElement(x.Switch,{id:`switch-field-${t.name}`,...n,...r,checked:Boolean(r.value),onChange:e=>{r.onChange(e.target.checked)},color:r.value?"success":"neutral",endDecorator:r.value?a[0].label:a[1].label})}}));case exports.FormAttributeType.Checkbox:return e.createElement(z,{key:n.key,attribute:t,display:n,options:a,helperText:l});case exports.FormAttributeType.Select:return e.createElement(d,{key:n.key,id:n.id},e.createElement(W,{error:c,attr:t}),e.createElement(u.Controller,{control:w,rules:{required:Boolean(t.required)},name:t.name,render:({field:r})=>{const o={};T[t.name]&&(o.color="danger");const c=String(r.value);return e.createElement(i,null,e.createElement(h,{id:`select-field-${t.name}`,placeholder:`${n.placeholder}...`,...o,...r,value:c,onChange:(e,t)=>{r.onChange(t)}},a.map((t=>e.createElement(f,{key:String(t.value??""),value:t.value},t.label)))),e.createElement(p,{id:`${t.name}-helper-text`},l))}}));case exports.FormAttributeType.Password:return e.createElement(d,{key:n.key,id:n.id},e.createElement(W,{error:c,attr:t}),e.createElement(m,{...n,...y(t.name,r),type:exports.FormAttributeType.Password}),e.createElement(p,{id:`${t.name}-helper-text`},l));case exports.FormAttributeType.Number:return e.createElement(d,{key:n.key,id:n.id},e.createElement(W,{error:c,attr:t}),e.createElement(m,{...n,...y(t.name,r),type:exports.FormAttributeType.Number}),e.createElement(p,{id:`${t.name}-helper-text`},l));case exports.FormAttributeType.Text:default:return e.createElement(d,{key:n.key,id:n.id},e.createElement(W,{error:c,attr:t}),e.createElement(m,{...n,...y(t.name,r)}),e.createElement(p,{id:`${t.name}-helper-text`},l))}})),c?e.createElement(i,{spacing:2,direction:"row"},c,e.createElement(o,null,e.createElement(l,{type:"submit"},n))):e.createElement(o,null,e.createElement(i,{direction:"row",gap:2},e.createElement(l,{type:"submit",loading:s},n),b))))}function _(t){const{open:n,setOpen:a,refetch:o}=t,{tenantId:l}=V(),i=D(),[c,s]=e.useState(),{watch:m,register:d,handleSubmit:p}=u.useForm(),b=m("email");e.useEffect((()=>{null!=c&&s()}),[b]);const g=r.useMutation((e=>i.users.createTenantUser({signUpRequest:e,tenantId:String(l)})),{onSuccess(e){o&&o(e),a(!1)},onError(e){e instanceof Error&&s(e.message)}}),h=e.useCallback((async e=>{s(""),g.mutate(e)}),[g]);return e.createElement(x.Modal,{open:n},e.createElement(x.ModalDialog,null,e.createElement(x.Stack,{spacing:2},e.createElement(x.Typography,{level:"h4"},"Create user"),e.createElement(e.Fragment,null,c&&e.createElement(x.Typography,{color:"danger"},c)),e.createElement(x.Stack,{component:"form",sx:{width:"40ch"},spacing:1,onSubmit:p((e=>h(e)))},e.createElement(x.FormControl,{sx:{"--FormHelperText-color":"var(--joy-palette-danger-500)"}},e.createElement(x.FormLabel,{htmlFor:"email"},"Email"),e.createElement(x.Input,{...d("email"),fullWidth:!0,size:"lg",id:"email",name:"email",autoComplete:"current-email",required:!0,error:Boolean(c)})),e.createElement(x.FormControl,{sx:{"--FormHelperText-color":"var(--joy-palette-danger-500)"}},e.createElement(x.FormLabel,{htmlFor:"password"},"Password"),e.createElement(x.Input,{...d("password"),fullWidth:!0,size:"lg",id:"password",autoComplete:"current-password",type:"password",required:!0})),e.createElement(x.Stack,{direction:"row",sx:{pt:2},spacing:2},e.createElement(x.Button,{onClick:()=>a(!1),variant:"plain"},"Cancel"),e.createElement(x.Button,{type:"submit"},"Create"))))))}function J(t){const{allowCreation:r,buttonText:n,onUserCreateSuccess:a}=t,[o,c]=e.useState(!1);return r?e.createElement(i,{alignItems:"flex-end",gap:1},e.createElement(_,{open:o,setOpen:c,refetch:a}),e.createElement(l,{startDecorator:e.createElement(S,null),size:"sm",onClick:()=>c(!0)},n)):null}const K=e=>Object.keys(e).reduce(((t,r)=>{const n=e[r];return n instanceof Set?t[r]=Array.from(n).join(", "):Array.isArray(n)?t[r]=n.join(", "):t[r]=n,t}),{}),X=(e,t,r)=>{if(!e)return[[],[]];const n=e.map(K),a=Object.keys(n[0]),o={},l=a?.map((e=>{const a=function(e,t,r){let n=r&&e?r.measureText(String(e)).width:50;n+=27;let a=n;return a=16+Math.ceil(r?r.measureText(t.reduce(((t,r)=>{let n=r[String(e)];return(C(n)||q(n))&&(n=""),n=n?.toString(),t.length>n.length?t:n}),"")).width:50),a<n&&(a=n),a+=8,a}(e,n,t),l=e.slice();if(r.includes(l))return null==o[l]?o[l]=l.length:o[l]+=1,{field:l.padEnd(o[l]),headerName:l.padEnd(o[l]),width:a}})).filter(Boolean)??[];return[l,n]};function Y(t,r){const n=function(){const[t,r]=e.useState();return e.useEffect((()=>{const e=document.createElement("canvas").getContext("2d");e&&(e.font="18px Roboto",r(e))}),[]),t}(),[a,o]=e.useMemo((()=>X(t,n,r)),[t,n,r]);return[a,o]}function Z(t){const{config:n,providerName:a,onSuccess:o,onError:l,allowEdit:u=!0,configurationGuide:m}=t,d=D(),[p,b]=e.useState(!1),[g,h]=e.useState(!1),[f,E]=e.useState(n),x=e.useRef(),y=e.useMemo((()=>{const e=[{name:"enabled",label:"Allow Okta logins",type:exports.FormAttributeType.Switch,defaultValue:!0===f?.enabled,options:[{label:"Enabled"},{label:"Disabled"}],disabled:!u},{name:"clientId",label:"Client id",type:exports.FormAttributeType.Text,defaultValue:f?.clientId??"",required:!0,disabled:!u},{name:"configUrl",label:"Config url",type:exports.FormAttributeType.Text,defaultValue:f?.configUrl??"",helpText:"The URL of the .well-known/openid-configuration for the identity provider",required:!0,disabled:!u},{name:"emailDomains",label:"Email domains",type:exports.FormAttributeType.Text,defaultValue:f?.emailDomains?.join(", ")??"",required:!0,helpText:"A comma seperated list of email domains (yourDomain.com) to be used",disabled:!u}];return f?.clientId||e.splice(2,0,{name:"clientSecret",label:"Client secret",type:exports.FormAttributeType.Password,defaultValue:"",required:!0,disabled:!u}),e}),[u,f?.clientId,f?.configUrl,f?.emailDomains,f?.enabled]),w=r.useMutation((e=>{b(!0);const t={providerName:a.toLowerCase(),updateProviderRequest:{...e,emailDomains:e.emailDomains.split(",")}};return null!=f?d.auth.updateProvider(t):d.auth.createProvider(t)}),{onSuccess:(e,t)=>{E(e),h(!0),o&&o(e,t)},onError:l,onSettled:(e,t,r)=>{b(!1),x.current&&clearTimeout(x.current),x.current=setTimeout((()=>{h(!1)}),3e3),e||(t&&!t?.message.includes("Unterminated string")||E({enabled:r.enabled,clientId:r.clientId,configUrl:r.configUrl,emailDomains:r.emailDomains.split(", ")}),h(!0),o&&o(e,r))}});return e.useEffect((()=>{})),e.createElement(i,{gap:2,position:"relative"},e.createElement(c,{level:"h4"},"Step 1"),m,e.createElement(c,{level:"h4"},"Step 2"),e.createElement(Q,{mutation:w,buttonText:"Update",attributes:y,loading:p,successMessage:e.createElement(s,{color:"success",sx:{opacity:g?1:0,transition:"opacity 200ms",height:"0.9rem"},startDecorator:e.createElement(F,null)},e.createElement(c,{textAlign:"center",fontSize:"sm"},"Provider updated"))}))}function ee({callbackUrl:t}){const[r,n]=e.useState(!1),a=e.useRef();return e.useEffect((()=>{a.current&&clearTimeout(a.current),a.current=setTimeout((()=>{n(!1)}),3250)}),[r]),e.createElement(i,{gap:2},e.createElement(c,null,"In order for Okta to redirect properly, provide the following URL as the"," ",e.createElement(o,{component:"span",sx:{fontFamily:"monospace"}},"Sign-in redirect URIs")," ","in the admin configuration of your application."),e.createElement(m,{onClick:async()=>{t&&(await navigator.clipboard.writeText(t),n(!0))},sx:e=>({input:{cursor:"pointer"},span:{cursor:"pointer"},"&:hover svg":{"--Icon-color":e.palette.primary[500]}}),value:t,readOnly:!0,endDecorator:e.createElement(E,{title:"Copy Okta redirect URL"},e.createElement(o,{position:"relative",width:r?"82px":"24px",height:"24px"},e.createElement(o,{position:"absolute",top:"0",left:"0",sx:{opacity:r?0:1,transition:"opacity 300ms"}},e.createElement(k,null)),e.createElement(o,{position:"absolute",top:"0",left:"0",sx:{opacity:r?1:0,transition:"opacity 300ms"}},e.createElement(i,{direction:"row",gap:1},e.createElement(F,null),e.createElement(c,{color:"primary"},"Copied!")))))}))}exports.GoogleLoginButton=function(t){const{databaseId:r,newTenantName:n}=t,{basePath:a}=V(),s=`${a}/databases/${encodeURIComponent(r??"")}/users/oidc/google/login`,u=n?"?newTenant="+encodeURIComponent(n):"",m=(t?.href??s)+u;return e.createElement(o,{component:"a",href:m,display:"flex",flex:1,sx:{textDecoration:"none"}},e.createElement(o,null,e.createElement(l,{sx:{padding:0,textTransform:"initial",flex:1},"aria-label":"log in with google"},e.createElement(i,{direction:"row",alignItems:"center",p:0,flex:1,fontFamily:"Roboto, sans-serif",fontSize:"14px",display:"inline-flex",color:"rgb(255 255, 255)",boxShadow:"rgb(0 0 0 / 24%) 0px 2px 2px 0px rgb(0 0 0 / 24%) 0px 0px 1px 0px",borderRadius:"4px",border:"1px solid transparent",fontWeight:"500",sx:{backgroundColor:"rgb(66 133, 244)"}},e.createElement(o,{padding:"11px",display:"flex",border:"1px solid rgb(66, 133, 244)",borderRadius:"4px",sx:{background:"rgb(255, 255, 255)"}},e.createElement($,{"aria-hidden":"true"})),e.createElement(o,{padding:"10px",flex:1},e.createElement(c,{sx:{color:"white"},fontWeight:700,fontFamily:"Roboto, sans-serif",fontSize:"14px",height:"20px"},"Continue with Google"))))))},exports.NileProvider=r=>{const{children:n,theme:a,slotProps:o,tenantId:l,QueryProvider:i=R,basePath:c="https://api.thenile.dev",api:s}=r,u=e.useMemo((()=>({api:s??new t({basePath:c,credentials:"include"}),tenantId:String(l),basePath:c})),[s,c,l]);return e.createElement(i,null,e.createElement(P,{slotProps:o?.provider,theme:a},e.createElement(O,{value:u},n)))},exports.Okta=function(t){const{callbackUrl:r,providers:n,...a}=t;if(!n)return null;const o=n?.find((e=>"okta"===e.provider));return e.createElement(Z,{...a,config:o,providerName:"Okta",configurationGuide:e.createElement(ee,{callbackUrl:r})})},exports.SSOForm=Z,exports.SingleSignOnForm=function(t){const{attributes:n,onSuccess:a,onError:o,beforeMutate:l,nextButtonText:i="Next",loginButtonText:c="Log in",disableSSO:s=!1}=t,u=D(),[m,d]=e.useState(s?c:i),p=r.useMutation((async e=>{const t=(l&&l(e))??e;return await u.auth.login({loginRequest:{email:t.email,password:t.password},sso:!s})}),{onSuccess:(e,t)=>{e&&(e?.redirectURI?window.location.href=e.redirectURI:m!==c?d(c):a&&a(e,t))},onError:(e,t)=>{m===c?o&&o(e,t):d(c)}}),b=e.useMemo((()=>{const e=[{name:"email",label:"Email",type:exports.FormAttributeType.Text,defaultValue:"",required:!0}];return m===c&&e.push({name:"password",label:"Password",type:exports.FormAttributeType.Password,defaultValue:"",required:!0}),n&&n.length>0?e.concat(n):e}),[n,m,c]);return e.createElement(Q,{mutation:p,buttonText:m,attributes:b})},exports.UserLoginForm=function(t){const[n,a]=e.useState(),{attributes:o,onSuccess:l,onError:c,beforeMutate:u}=t,m=D(),d=r.useMutation((async e=>{a(void 0);const t=(u&&u(e))??e;return await m.auth.login({loginRequest:t})}),{onSuccess:l,onError:c}),p=e.useMemo((()=>{const e=[{name:"email",label:"Email",type:exports.FormAttributeType.Text,defaultValue:"",required:!0},{name:"password",label:"Password",type:exports.FormAttributeType.Password,defaultValue:"",required:!0}];return o&&o.length>0?e.concat(o):e}),[o]);return e.createElement(i,{gap:2},n?e.createElement(s,{color:"danger"},n):null,e.createElement(Q,{mutation:d,buttonText:"Log in",attributes:p}))},exports.UserSignupForm=function(t){const[n,a]=e.useState(),{buttonText:o="Sign up",onSuccess:l,onError:c,attributes:u,beforeMutate:m}=t,d=D(),p=r.useMutation((async e=>{a(void 0);const t=(m&&m(e))??e,{email:r,password:n,preferredName:o,newTenant:l,...i}=t;return Object.keys(i).length>0&&console.warn("additional metadata not supported yet."),d.auth.signUp({signUpRequest:{email:r,password:n,preferredName:o,newTenant:l}})}),{onSuccess:l,onError:(e,t)=>{a(e.message),c&&c(e,t)}}),b=e.useMemo((()=>{const e=[{name:"email",label:"Email",type:exports.FormAttributeType.Text,defaultValue:"",required:!0},{name:"password",label:"Password",type:exports.FormAttributeType.Password,defaultValue:"",required:!0}];return u&&u.length>0?e.concat(u):e}),[u]);return e.createElement(i,{gap:2},n?e.createElement(s,{color:"danger"},n):null,e.createElement(Q,{mutation:p,buttonText:o,attributes:b}))},exports.UserTenantList=function(t){const{data:r,allowCreation:n=!0,buttonText:a="Add a user",onUserCreateSuccess:o,slots:l,include:c=["email","preferedName"]}=t,s={width:"100%",height:"100%",...l?.dataGrid??{}},[u,m]=Y(r,c);return e.createElement(i,{flex:1},e.createElement(J,{allowCreation:n,buttonText:a,onUserCreateSuccess:o}),e.createElement(T.DataGrid,{sx:s,rows:m,columns:u,hideFooter:!0}))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Browser = require('@niledatabase/browser');
+var reactQuery = require('@tanstack/react-query');
+var CssBaseline = require('@mui/material/CssBaseline');
+var styles = require('@mui/joy/styles');
+var Box = require('@mui/joy/Box');
+var Button = require('@mui/joy/Button');
+var Stack = require('@mui/joy/Stack');
+var Typography = require('@mui/joy/Typography');
+var Alert = require('@mui/joy/Alert');
+var reactHookForm = require('react-hook-form');
+var Input = require('@mui/joy/Input');
+var FormControl = require('@mui/joy/FormControl');
+var FormHelperText = require('@mui/joy/FormHelperText');
+var Error$1 = require('@mui/icons-material/Error');
+var FormLabel = require('@mui/joy/FormLabel');
+var Select = require('@mui/joy/Select');
+var Option = require('@mui/joy/Option');
+var Tooltip = require('@mui/joy/Tooltip');
+var joy = require('@mui/joy');
+var Checkbox = require('@mui/joy/Checkbox');
+var List = require('@mui/joy/List');
+var ListItem = require('@mui/joy/ListItem');
+var xDataGrid = require('@mui/x-data-grid');
+var Add = require('@mui/icons-material/Add');
+var CopyAll = require('@mui/icons-material/CopyAll');
+var CheckCircleOutlined = require('@mui/icons-material/CheckCircleOutlined');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+function Themer({
+  theme,
+  children,
+  slotProps
+}) {
+  return /*#__PURE__*/React.createElement(styles.CssVarsProvider, {
+    ...slotProps,
+    theme: theme
+  }, /*#__PURE__*/React.createElement(CssBaseline, {
+    enableColorScheme: true
+  }), children);
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+const queryClient = /*#__PURE__*/new reactQuery.QueryClient();
+const defaultContext = {
+  api: /*#__PURE__*/new Browser({
+    basePath: 'https://api.thenile.dev',
+    credentials: 'include'
+  }),
+  basePath: ''
+};
+const context = /*#__PURE__*/React.createContext(defaultContext);
+const {
+  Provider
+} = context;
+const BaseQueryProvider = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(reactQuery.QueryClientProvider, {
+    client: queryClient
+  }, children);
+};
+const NileProvider = props => {
+  const {
+    children,
+    theme,
+    slotProps,
+    tenantId,
+    QueryProvider = BaseQueryProvider,
+    basePath = 'https://api.thenile.dev',
+    api
+  } = props;
+  const values = React.useMemo(() => {
+    return {
+      api: api ?? new Browser({
+        basePath,
+        credentials: 'include'
+      }),
+      tenantId: String(tenantId),
+      basePath
+    };
+  }, [api, basePath, tenantId]);
+  return /*#__PURE__*/React.createElement(QueryProvider, null, /*#__PURE__*/React.createElement(Themer, {
+    slotProps: slotProps?.provider,
+    theme: theme
+  }, /*#__PURE__*/React.createElement(Provider, {
+    value: values
+  }, children)));
+};
+const useNileContext = () => {
+  return React.useContext(context);
+};
+const useNileConfig = () => {
+  const {
+    basePath,
+    tenantId
+  } = useNileContext();
+  return React.useMemo(() => ({
+    tenantId,
+    basePath
+  }), [basePath, tenantId]);
+};
+const useApi = () => {
+  return useNileContext().api;
+};
+
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgGoogle = function SvgGoogle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#EA4335",
+    d: "M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#4285F4",
+    d: "M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FBBC05",
+    d: "M3.88 10.78A5.5 5.5 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#34A853",
+    d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    d: "M0 0h18v18H0z"
+  }))));
+};
+
+const LOGIN_PATH = 'users/oidc/google/login';
+/**
+ * A component for a Google login button, according to their design language.
+ * This works when an identity provider is configured in the admin dashboard.
+ * @param props href: a string to override the URL provided by the context
+ * @returns a JSX.Element to render
+ */
+function GoogleSSOButton(props) {
+  const {
+    databaseId,
+    newTenantName
+  } = props;
+  const {
+    basePath
+  } = useNileConfig();
+  const encodedDatabase = encodeURIComponent(databaseId ?? '');
+  const contextHref = `${basePath}/databases/${encodedDatabase}/${LOGIN_PATH}`;
+  const query = newTenantName ? '?newTenant=' + encodeURIComponent(newTenantName) : '';
+  const href = (props?.href ?? contextHref) + query;
+  return /*#__PURE__*/React.createElement(Box, {
+    component: "a",
+    href: href,
+    display: "flex",
+    flex: 1,
+    sx: {
+      textDecoration: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+    sx: {
+      padding: 0,
+      textTransform: 'initial',
+      flex: 1
+    },
+    "aria-label": "log in with google"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    p: 0,
+    flex: 1,
+    fontFamily: "Roboto, sans-serif",
+    fontSize: "14px",
+    display: "inline-flex",
+    color: "rgb(255 255, 255)",
+    boxShadow: "rgb(0 0 0 / 24%) 0px 2px 2px 0px rgb(0 0 0 / 24%) 0px 0px 1px 0px",
+    borderRadius: "4px",
+    border: "1px solid transparent",
+    fontWeight: "500",
+    sx: {
+      backgroundColor: 'rgb(66 133, 244)'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "11px",
+    display: "flex",
+    border: "1px solid rgb(66, 133, 244)",
+    borderRadius: "4px",
+    sx: {
+      background: 'rgb(255, 255, 255)'
+    }
+  }, /*#__PURE__*/React.createElement(SvgGoogle, {
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React.createElement(Box, {
+    padding: "10px",
+    flex: 1
+  }, /*#__PURE__*/React.createElement(Typography, {
+    sx: {
+      color: 'white'
+    },
+    fontWeight: 700,
+    fontFamily: "Roboto, sans-serif",
+    fontSize: "14px",
+    height: "20px"
+  }, "Continue with Google"))))));
+}
+
+function CheckGroup(props) {
+  const {
+    options,
+    attribute,
+    display,
+    helperText
+  } = props;
+  const {
+    watch,
+    control
+  } = reactHookForm.useFormContext();
+  const currentVals = watch(attribute.name);
+  const checkProps = {};
+  if (helperText) {
+    checkProps.color = 'danger';
+  }
+  return /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
+    name: attribute.name,
+    rules: {
+      required: Boolean(attribute.required)
+    },
+    control: control,
+    render: ({
+      field
+    }) => {
+      return /*#__PURE__*/React__namespace.createElement(Stack, null, /*#__PURE__*/React__namespace.createElement(FormLabel, {
+        htmlFor: `${field.name}`
+      }, display.label), /*#__PURE__*/React__namespace.createElement(Box, {
+        role: "group",
+        "aria-labelledby": attribute.name,
+        sx: {
+          borderRadius: 'var(--joy-radius-sm)',
+          p: 0.5,
+          border: helperText ? '1px solid var(--joy-palette-danger-outlinedBorder)' : 'none'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(List, {
+        orientation: "horizontal",
+        wrap: true,
+        sx: {
+          '--List-gap': '8px'
+        }
+      }, options.map(item => {
+        checkProps.id = String(item.value);
+        return /*#__PURE__*/React__namespace.createElement(ListItem, {
+          key: `${item.value}-${item.label}`
+        }, /*#__PURE__*/React__namespace.createElement(Checkbox, {
+          overlay: options.length > 1,
+          ...checkProps,
+          checked: currentVals.includes(item.value),
+          disableIcon: options.length > 1,
+          variant: "soft",
+          label: item.label,
+          onChange: event => {
+            if (attribute.allowMultiple) {
+              if (event.target.checked) {
+                if (!currentVals) {
+                  field.onChange([item.value]);
+                } else {
+                  field.onChange(currentVals.concat(item.value));
+                }
+              } else {
+                const remaining = currentVals.filter(val => val !== item.value);
+                if (remaining.length > 0) {
+                  field.onChange(remaining);
+                } else {
+                  field.onChange('');
+                }
+              }
+            } else {
+              if (event.target.checked) {
+                field.onChange(item.value);
+              } else {
+                field.onChange('');
+              }
+            }
+          }
+        }));
+      }))), /*#__PURE__*/React__namespace.createElement(Typography, {
+        sx: {
+          color: 'var(--joy-palette-danger-500)'
+        },
+        level: "body-sm"
+      }, helperText));
+    }
+  });
+}
+
+exports.FormAttributeType = void 0;
+(function (AttributeType) {
+  AttributeType["Text"] = "text";
+  AttributeType["Password"] = "password";
+  AttributeType["Select"] = "select";
+  AttributeType["Number"] = "number";
+  AttributeType["Float"] = "float";
+  AttributeType["Checkbox"] = "checkbox";
+  AttributeType["Switch"] = "switch";
+})(exports.FormAttributeType || (exports.FormAttributeType = {}));
+
+const getAttributeDefault = attribute => {
+  // have to look to see if it is an enum
+  if (attribute.allowMultiple === true) {
+    if (!Array.isArray(attribute.defaultValue) && attribute.defaultValue) {
+      if (typeof attribute.defaultValue === 'number') {
+        return [attribute.defaultValue];
+      }
+      return [String(attribute.defaultValue)];
+    }
+  }
+  return attribute.defaultValue ?? '';
+};
+function Labler(props) {
+  const {
+    error,
+    attr
+  } = props;
+  if (error) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: error,
+      color: "danger",
+      sx: {
+        cursor: 'pointer'
+      }
+    }, /*#__PURE__*/React.createElement(FormLabel, null, attr.label ?? attr.name, /*#__PURE__*/React.createElement(Error$1, {
+      sx: {
+        ml: 0.5,
+        '--Icon-color': '#c41c1c'
+      },
+      fontSize: "small"
+    })));
+  }
+  return /*#__PURE__*/React.createElement(FormLabel, null, attr.label ?? attr.name);
+}
+function SimpleForm(props) {
+  const {
+    mutation,
+    buttonText,
+    attributes,
+    cancelButton,
+    loading,
+    successMessage
+  } = props;
+  const defaultValues = React.useMemo(() => attributes.reduce((accum, attr) => {
+    accum[attr.name] = getAttributeDefault(attr);
+    return accum;
+  }, {}), [attributes]);
+  const methods = reactHookForm.useForm({
+    defaultValues
+  });
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: {
+      errors
+    }
+  } = methods;
+  const onSubmit = React.useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data => {
+    mutation.mutate(data);
+  }, [mutation]);
+  return /*#__PURE__*/React.createElement(reactHookForm.FormProvider, {
+    ...methods
+  }, /*#__PURE__*/React.createElement(Stack, {
+    component: "form",
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onSubmit: handleSubmit(data => onSubmit(data)),
+    spacing: 2
+  }, attributes.map(attr => {
+    const fieldConfig = {};
+    const display = {
+      key: attr.name,
+      label: attr.label ?? attr.name,
+      id: attr.label ?? attr.name,
+      placeholder: attr.placeholder ?? attr.label ?? attr.name,
+      error: Boolean(errors[attr.name]),
+      disabled: Boolean(attr.disabled)
+    };
+    const options = attr.options ?? [];
+    const helperText = attr.helpText ?? '';
+    let error = '';
+    if (attr.required) {
+      error = errors[attr.name] ? `${attr.label ?? attr.name} is required` : '';
+      fieldConfig.required = true;
+    }
+    switch (attr.type) {
+      case exports.FormAttributeType.Switch:
+        return /*#__PURE__*/React.createElement(FormControl, {
+          key: display.key,
+          id: display.id,
+          orientation: "horizontal",
+          sx: {
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText)), /*#__PURE__*/React.createElement(reactHookForm.Controller, {
+          control: control,
+          rules: {
+            required: Boolean(attr.required)
+          },
+          name: attr.name,
+          render: ({
+            field
+          }) => {
+            const color = {};
+            if (errors[attr.name]) {
+              color.color = 'danger';
+            }
+            return /*#__PURE__*/React.createElement(joy.Switch, {
+              id: `switch-field-${attr.name}`,
+              ...color,
+              ...field,
+              checked: Boolean(field.value),
+              onChange: event => {
+                field.onChange(event.target.checked);
+              },
+              color: field.value ? 'success' : 'neutral',
+              endDecorator: field.value ? options[0].label : options[1].label
+            });
+          }
+        }));
+      case exports.FormAttributeType.Checkbox:
+        return /*#__PURE__*/React.createElement(CheckGroup, {
+          key: display.key,
+          attribute: attr,
+          display: display,
+          options: options,
+          helperText: helperText
+        });
+      case exports.FormAttributeType.Select:
+        return /*#__PURE__*/React.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React.createElement(reactHookForm.Controller, {
+          control: control,
+          rules: {
+            required: Boolean(attr.required)
+          },
+          name: attr.name,
+          render: ({
+            field
+          }) => {
+            const color = {};
+            if (errors[attr.name]) {
+              color.color = 'danger';
+            }
+            const value = String(field.value);
+            return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Select, {
+              id: `select-field-${attr.name}`,
+              placeholder: `${display.placeholder}...`,
+              ...color,
+              ...field,
+              value: value,
+              onChange: (_, newValue) => {
+                field.onChange(newValue);
+              }
+            }, options.map(option => {
+              return /*#__PURE__*/React.createElement(Option, {
+                key: String(option.value ?? ''),
+                value: option.value
+              }, option.label);
+            })), /*#__PURE__*/React.createElement(FormHelperText, {
+              id: `${attr.name}-helper-text`
+            }, helperText));
+          }
+        }));
+      case exports.FormAttributeType.Password:
+        return /*#__PURE__*/React.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React.createElement(Input, {
+          ...display,
+          ...register(attr.name, fieldConfig),
+          type: exports.FormAttributeType.Password
+        }), /*#__PURE__*/React.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText));
+      case exports.FormAttributeType.Number:
+        return /*#__PURE__*/React.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React.createElement(Input, {
+          ...display,
+          ...register(attr.name, fieldConfig),
+          type: exports.FormAttributeType.Number
+        }), /*#__PURE__*/React.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText));
+      case exports.FormAttributeType.Text:
+      default:
+        return /*#__PURE__*/React.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React.createElement(Input, {
+          ...display,
+          ...register(attr.name, fieldConfig)
+        }), /*#__PURE__*/React.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText));
+    }
+  }), cancelButton ? ( /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
+    direction: "row"
+  }, cancelButton, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+    type: "submit"
+  }, buttonText)))) : ( /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    loading: loading
+  }, buttonText), successMessage)))));
+}
+
+function SignUpForm(props) {
+  const [error, setError] = React.useState();
+  const {
+    buttonText = 'Sign up',
+    onSuccess,
+    onError,
+    attributes,
+    beforeMutate
+  } = props;
+  const api = useApi();
+  const mutation = reactQuery.useMutation(async _data => {
+    setError(undefined);
+    const possibleData = beforeMutate && beforeMutate(_data);
+    const data = possibleData ?? _data;
+    const {
+      email,
+      password,
+      preferredName,
+      newTenant,
+      ...metadata
+    } = data;
+    if (Object.keys(metadata).length > 0) {
+      // eslint-disable-next-line no-console
+      console.warn('additional metadata not supported yet.');
+    }
+    return api.auth.signUp({
+      signUpRequest: {
+        email,
+        password,
+        preferredName,
+        newTenant
+      }
+    });
+  }, {
+    onSuccess,
+    onError: (e, vars) => {
+      setError(e.message);
+      onError && onError(e, vars);
+    }
+  });
+  const completeAttributes = React.useMemo(() => {
+    const mainAttributes = [{
+      name: 'email',
+      label: 'Email',
+      type: exports.FormAttributeType.Text,
+      defaultValue: '',
+      required: true
+    }, {
+      name: 'password',
+      label: 'Password',
+      type: exports.FormAttributeType.Password,
+      defaultValue: '',
+      required: true
+    }];
+    if (attributes && attributes.length > 0) {
+      return mainAttributes.concat(attributes);
+    }
+    return mainAttributes;
+  }, [attributes]);
+  return /*#__PURE__*/React.createElement(Stack, {
+    gap: 2
+  }, error ? /*#__PURE__*/React.createElement(Alert, {
+    color: "danger"
+  }, error) : null, /*#__PURE__*/React.createElement(SimpleForm, {
+    mutation: mutation,
+    buttonText: buttonText,
+    attributes: completeAttributes
+  }));
+}
+
+function LoginForm(props) {
+  const [error, setError] = React.useState();
+  const {
+    attributes,
+    onSuccess,
+    onError,
+    beforeMutate
+  } = props;
+  const api = useApi();
+  const mutation = reactQuery.useMutation(async _data => {
+    setError(undefined);
+    const possibleData = beforeMutate && beforeMutate(_data);
+    const data = possibleData ?? _data;
+    return await api.auth.login({
+      loginRequest: data
+    });
+  }, {
+    onSuccess,
+    onError
+  });
+  const completeAttributes = React.useMemo(() => {
+    const mainAttributes = [{
+      name: 'email',
+      label: 'Email',
+      type: exports.FormAttributeType.Text,
+      defaultValue: '',
+      required: true
+    }, {
+      name: 'password',
+      label: 'Password',
+      type: exports.FormAttributeType.Password,
+      defaultValue: '',
+      required: true
+    }];
+    if (attributes && attributes.length > 0) {
+      return mainAttributes.concat(attributes);
+    }
+    return mainAttributes;
+  }, [attributes]);
+  return /*#__PURE__*/React.createElement(Stack, {
+    gap: 2
+  }, error ? /*#__PURE__*/React.createElement(Alert, {
+    color: "danger"
+  }, error) : null, /*#__PURE__*/React.createElement(SimpleForm, {
+    mutation: mutation,
+    buttonText: "Log in",
+    attributes: completeAttributes
+  }));
+}
+
+function SingleSignOnForm(props) {
+  const {
+    attributes,
+    onSuccess,
+    onError,
+    beforeMutate,
+    nextButtonText = 'Next',
+    loginButtonText = 'Log in',
+    disableSSO = false
+  } = props;
+  const api = useApi();
+  const [buttonText, setButtonText] = React.useState(disableSSO ? loginButtonText : nextButtonText);
+  const mutation = reactQuery.useMutation(async _data => {
+    const possibleData = beforeMutate && beforeMutate(_data);
+    const data = possibleData ?? _data;
+    return await api.auth.login({
+      loginRequest: {
+        email: data.email,
+        password: data.password
+      },
+      sso: !disableSSO
+    });
+  }, {
+    onSuccess: (token, data) => {
+      if (token) {
+        if (token?.redirectURI) {
+          window.location.href = token.redirectURI;
+        } else if (buttonText !== loginButtonText) {
+          setButtonText(loginButtonText);
+        } else {
+          onSuccess && onSuccess(token, data);
+        }
+      }
+    },
+    onError: (error, data) => {
+      // it is possible SSO failed, so only show errors on if the password is available
+      if (buttonText === loginButtonText) {
+        onError && onError(error, data);
+      } else {
+        setButtonText(loginButtonText);
+      }
+    }
+  });
+  const completeAttributes = React.useMemo(() => {
+    const mainAttributes = [{
+      name: 'email',
+      label: 'Email',
+      type: exports.FormAttributeType.Text,
+      defaultValue: '',
+      required: true
+    }];
+    if (buttonText === loginButtonText) {
+      mainAttributes.push({
+        name: 'password',
+        label: 'Password',
+        type: exports.FormAttributeType.Password,
+        defaultValue: '',
+        required: true
+      });
+    }
+    if (attributes && attributes.length > 0) {
+      return mainAttributes.concat(attributes);
+    }
+    return mainAttributes;
+  }, [attributes, buttonText, loginButtonText]);
+  return /*#__PURE__*/React.createElement(SimpleForm, {
+    mutation: mutation,
+    buttonText: buttonText,
+    attributes: completeAttributes
+  });
+}
+
+function AddUser(props) {
+  const {
+    open,
+    setOpen,
+    refetch
+  } = props;
+  const {
+    tenantId
+  } = useNileConfig();
+  const api = useApi();
+  const [errorText, setErrorText] = React.useState();
+  const {
+    watch,
+    register,
+    handleSubmit
+  } = reactHookForm.useForm();
+  const email = watch('email');
+  React.useEffect(() => {
+    if (errorText != null) {
+      setErrorText();
+    }
+    // if email changes, no more error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [email]);
+  const mutation = reactQuery.useMutation(data => api.users.createTenantUser({
+    signUpRequest: data,
+    tenantId: String(tenantId)
+  }), {
+    onSuccess(data) {
+      refetch && refetch(data);
+      setOpen(false);
+    },
+    onError(e) {
+      if (e instanceof Error) {
+        setErrorText(e.message);
+      }
+    }
+  });
+  const handleUpdate = React.useCallback(async data => {
+    setErrorText('');
+    mutation.mutate(data);
+  }, [mutation]);
+  return /*#__PURE__*/React.createElement(joy.Modal, {
+    open: open
+  }, /*#__PURE__*/React.createElement(joy.ModalDialog, null, /*#__PURE__*/React.createElement(joy.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(joy.Typography, {
+    level: "h4"
+  }, "Create user"), /*#__PURE__*/React.createElement(React.Fragment, null, errorText && /*#__PURE__*/React.createElement(joy.Typography, {
+    color: "danger"
+  }, errorText)), /*#__PURE__*/React.createElement(joy.Stack, {
+    component: "form",
+    sx: {
+      width: '40ch'
+    },
+    spacing: 1,
+    onSubmit: handleSubmit(data => handleUpdate(data))
+  }, /*#__PURE__*/React.createElement(joy.FormControl, {
+    sx: {
+      '--FormHelperText-color': 'var(--joy-palette-danger-500)'
+    }
+  }, /*#__PURE__*/React.createElement(joy.FormLabel, {
+    htmlFor: "email"
+  }, "Email"), /*#__PURE__*/React.createElement(joy.Input, {
+    ...register('email'),
+    fullWidth: true,
+    size: "lg",
+    id: "email",
+    name: "email",
+    autoComplete: "current-email",
+    required: true,
+    error: Boolean(errorText)
+  })), /*#__PURE__*/React.createElement(joy.FormControl, {
+    sx: {
+      '--FormHelperText-color': 'var(--joy-palette-danger-500)'
+    }
+  }, /*#__PURE__*/React.createElement(joy.FormLabel, {
+    htmlFor: "password"
+  }, "Password"), /*#__PURE__*/React.createElement(joy.Input, {
+    ...register('password'),
+    fullWidth: true,
+    size: "lg",
+    id: "password",
+    autoComplete: "current-password",
+    type: "password",
+    required: true
+  })), /*#__PURE__*/React.createElement(joy.Stack, {
+    direction: "row",
+    sx: {
+      pt: 2
+    },
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(joy.Button, {
+    onClick: () => setOpen(false),
+    variant: "plain"
+  }, "Cancel"), /*#__PURE__*/React.createElement(joy.Button, {
+    type: "submit"
+  }, "Create"))))));
+}
+
+function CreateUser(props) {
+  const {
+    allowCreation,
+    buttonText,
+    onUserCreateSuccess
+  } = props;
+  const [open, setOpen] = React.useState(false);
+  if (!allowCreation) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "flex-end",
+    gap: 1
+  }, /*#__PURE__*/React.createElement(AddUser, {
+    open: open,
+    setOpen: setOpen,
+    refetch: onUserCreateSuccess
+  }), /*#__PURE__*/React.createElement(Button, {
+    startDecorator: /*#__PURE__*/React.createElement(Add, null),
+    size: "sm",
+    onClick: () => setOpen(true)
+  }, buttonText));
+}
+
+function getColumnSize(column, rows, canvasContext) {
+  const dataWidthReducer = (longest,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  nextRow) => {
+    let value = nextRow[String(column)];
+    if (value == null) {
+      value = '';
+    }
+    value = value?.toString();
+    return longest.length > value.length ? longest : value;
+  };
+  let columnHeaderLen = canvasContext && column ? canvasContext.measureText(String(column)).width : 50;
+  /* padding 12, icon-width 15 */
+  columnHeaderLen += 15 + 12;
+  let width = columnHeaderLen;
+  width = 16 + Math.ceil(canvasContext ? canvasContext.measureText(rows.reduce(dataWidthReducer, '')).width : 50);
+  if (width < columnHeaderLen) {
+    width = columnHeaderLen;
+  }
+  /* Gracefull */
+  width += 8;
+  return width;
+}
+
+function useTextSizer() {
+  const [ctx, setCtx] = React.useState();
+  React.useEffect(() => {
+    const canvas = document.createElement('canvas');
+    const canvasContext = canvas.getContext('2d');
+    if (canvasContext) {
+      canvasContext.font = '18px Roboto';
+      setCtx(canvasContext);
+    }
+  }, []);
+  return ctx;
+}
+
+const makeRenderable = vals => {
+  return Object.keys(vals).reduce((cleaned, key) => {
+    const val = vals[key];
+    if (val instanceof Set) {
+      cleaned[key] = Array.from(val).join(', ');
+    } else if (Array.isArray(val)) {
+      cleaned[key] = val.join(', ');
+    } else {
+      cleaned[key] = val;
+    }
+    return cleaned;
+  }, {});
+};
+const parseResults = (data, ctx, include) => {
+  if (!data) {
+    return [[], []];
+  }
+  const rows = data.map(makeRenderable);
+  const fields = Object.keys(rows[0]);
+  const existentCols = {};
+  const mapCols = col => {
+    const width = getColumnSize(col, rows, ctx);
+    const name = col.slice();
+    if (include.includes(name)) {
+      // add spaces to the end of column names so they are not duplicated in the UI
+      if (existentCols[name] == null) {
+        existentCols[name] = name.length;
+      } else {
+        existentCols[name] += 1;
+      }
+      return {
+        field: name.padEnd(existentCols[name]),
+        headerName: name.padEnd(existentCols[name]),
+        width
+      };
+    }
+  };
+  const cols = fields?.map(mapCols).filter(Boolean) ?? [];
+  return [cols, rows];
+};
+function useDataParser(data, include) {
+  const ctx = useTextSizer();
+  const [cols, rows] = React.useMemo(() => parseResults(data, ctx, include), [data, ctx, include]);
+  return [cols, rows];
+}
+
+function UserList(props) {
+  const {
+    data,
+    allowCreation = true,
+    buttonText = 'Add a user',
+    onUserCreateSuccess,
+    slots,
+    include = ['email', 'preferedName']
+  } = props;
+  const dataGridSx = {
+    width: '100%',
+    height: '100%',
+    ...(slots?.dataGrid ?? {})
+  };
+  const [columns, rows] = useDataParser(data, include);
+  return /*#__PURE__*/React.createElement(Stack, {
+    flex: 1
+  }, /*#__PURE__*/React.createElement(CreateUser, {
+    allowCreation: allowCreation,
+    buttonText: buttonText,
+    onUserCreateSuccess: onUserCreateSuccess
+  }), /*#__PURE__*/React.createElement(xDataGrid.DataGrid, {
+    sx: dataGridSx,
+    rows: rows,
+    columns: columns,
+    hideFooter: true
+  }));
+}
+
+function BaseSSOForm(props) {
+  const {
+    config,
+    providerName,
+    onSuccess,
+    onError,
+    allowEdit = true,
+    configurationGuide
+  } = props;
+  const api = useApi();
+  const [loading, setLoading] = React.useState(false);
+  const [success, setSuccess] = React.useState(false);
+  const [optimisticConfig, setConfig] = React.useState(config);
+  const timer = React.useRef();
+  const attributes = React.useMemo(() => {
+    const attributes = [{
+      name: 'enabled',
+      label: 'Allow Okta logins',
+      type: exports.FormAttributeType.Switch,
+      defaultValue: optimisticConfig?.enabled === true,
+      options: [{
+        label: 'Enabled'
+      }, {
+        label: 'Disabled'
+      }],
+      disabled: !allowEdit
+    }, {
+      name: 'clientId',
+      label: 'Client id',
+      type: exports.FormAttributeType.Text,
+      defaultValue: optimisticConfig?.clientId ?? '',
+      required: true,
+      disabled: !allowEdit
+    }, {
+      name: 'configUrl',
+      label: 'Config url',
+      type: exports.FormAttributeType.Text,
+      defaultValue: optimisticConfig?.configUrl ?? '',
+      helpText: 'The URL of the .well-known/openid-configuration for the identity provider',
+      required: true,
+      disabled: !allowEdit
+    }, {
+      name: 'emailDomains',
+      label: 'Email domains',
+      type: exports.FormAttributeType.Text,
+      defaultValue: optimisticConfig?.emailDomains?.join(', ') ?? '',
+      required: true,
+      helpText: 'A comma seperated list of email domains (yourDomain.com) to be used',
+      disabled: !allowEdit
+    }];
+    if (!optimisticConfig?.clientId) {
+      attributes.splice(2, 0, {
+        name: 'clientSecret',
+        label: 'Client secret',
+        type: exports.FormAttributeType.Password,
+        defaultValue: '',
+        required: true,
+        disabled: !allowEdit
+      });
+    }
+    return attributes;
+  }, [allowEdit, optimisticConfig?.clientId, optimisticConfig?.configUrl, optimisticConfig?.emailDomains, optimisticConfig?.enabled]);
+  const handleTimer = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      setSuccess(false);
+    }, 3000);
+  };
+  const mutation = reactQuery.useMutation(ssoRequest => {
+    setLoading(true);
+    const payload = {
+      providerName: providerName.toLowerCase(),
+      updateProviderRequest: {
+        ...ssoRequest,
+        emailDomains: ssoRequest.emailDomains.split(',')
+      }
+    };
+    if (optimisticConfig != null) {
+      return api.auth.updateProvider(payload);
+    } else {
+      return api.auth.createProvider(payload);
+    }
+  }, {
+    onSuccess: (data, vars) => {
+      setConfig(data);
+      setSuccess(true);
+      onSuccess && onSuccess(data, vars);
+    },
+    onError,
+    onSettled: (data, error, vars) => {
+      setLoading(false);
+      handleTimer();
+      if (!data) {
+        if (!error || error?.message.includes('Unterminated string')) {
+          // something unexpected happened on the BE, but it's non-fatal
+          setConfig({
+            enabled: vars.enabled,
+            clientId: vars.clientId,
+            configUrl: vars.configUrl,
+            emailDomains: vars.emailDomains.split(', ')
+          });
+        }
+        setSuccess(true);
+        onSuccess && onSuccess(data, vars);
+      }
+    }
+  });
+  React.useEffect(() => {
+  });
+  return /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    level: "h4"
+  }, "Step 1"), configurationGuide, /*#__PURE__*/React.createElement(Typography, {
+    level: "h4"
+  }, "Step 2"), /*#__PURE__*/React.createElement(SimpleForm, {
+    mutation: mutation,
+    buttonText: "Update",
+    attributes: attributes,
+    loading: loading,
+    successMessage: /*#__PURE__*/React.createElement(Alert, {
+      color: "success",
+      sx: {
+        opacity: success ? 1 : 0,
+        transition: 'opacity 200ms',
+        height: '0.9rem'
+      },
+      startDecorator: /*#__PURE__*/React.createElement(CheckCircleOutlined, null)
+    }, /*#__PURE__*/React.createElement(Typography, {
+      textAlign: "center",
+      fontSize: "sm"
+    }, "Provider updated"))
+  }));
+}
+
+function ConfigGuide({
+  callbackUrl
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const timer = React.useRef();
+  React.useEffect(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      setCopied(false);
+    }, 3250);
+  }, [copied]);
+  return /*#__PURE__*/React.createElement(Stack, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Typography, null, "In order for Okta to redirect properly, provide the following URL as the", ' ', /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: {
+      fontFamily: 'monospace'
+    }
+  }, "Sign-in redirect URIs"), ' ', "in the admin configuration of your application."), /*#__PURE__*/React.createElement(Input, {
+    onClick: async () => {
+      if (callbackUrl) {
+        await navigator.clipboard.writeText(callbackUrl);
+        setCopied(true);
+      }
+    },
+    sx: theme => ({
+      input: {
+        cursor: 'pointer'
+      },
+      span: {
+        cursor: 'pointer'
+      },
+      '&:hover svg': {
+        '--Icon-color': theme.palette.primary[500]
+      }
+    }),
+    value: callbackUrl,
+    readOnly: true,
+    endDecorator: /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Copy Okta redirect URL"
+    }, /*#__PURE__*/React.createElement(Box, {
+      position: "relative",
+      width: copied ? '82px' : '24px',
+      height: "24px"
+    }, /*#__PURE__*/React.createElement(Box, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      sx: {
+        opacity: copied ? 0 : 1,
+        transition: 'opacity 300ms'
+      }
+    }, /*#__PURE__*/React.createElement(CopyAll, null)), /*#__PURE__*/React.createElement(Box, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      sx: {
+        opacity: !copied ? 0 : 1,
+        transition: 'opacity 300ms'
+      }
+    }, /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      gap: 1
+    }, /*#__PURE__*/React.createElement(CheckCircleOutlined, null), /*#__PURE__*/React.createElement(Typography, {
+      color: "primary"
+    }, "Copied!")))))
+  }));
+}
+function Okta(props) {
+  const {
+    callbackUrl,
+    providers,
+    ...remaining
+  } = props;
+  if (!providers) {
+    return null;
+  }
+  const config = providers?.find(provider => provider.provider === 'okta');
+  return /*#__PURE__*/React.createElement(BaseSSOForm, {
+    ...remaining,
+    config: config,
+    providerName: "Okta",
+    configurationGuide: /*#__PURE__*/React.createElement(ConfigGuide, {
+      callbackUrl: callbackUrl
+    })
+  });
+}
+
+exports.GoogleLoginButton = GoogleSSOButton;
+exports.NileProvider = NileProvider;
+exports.Okta = Okta;
+exports.SSOForm = BaseSSOForm;
+exports.SingleSignOnForm = SingleSignOnForm;
+exports.UserLoginForm = LoginForm;
+exports.UserSignupForm = SignUpForm;
+exports.UserTenantList = UserList;
 //# sourceMappingURL=react.cjs.development.js.map