@niledatabase/react 2.3.0 → 2.3.1

package/dist/react.esm.js

@@ -1,2 +1,1196 @@
-import*as e from"react";import t,{createContext as r,useMemo as a,useContext as n,useState as o,useEffect as l}from"react";import i from"@niledatabase/browser";import{QueryClient as c,QueryClientProvider as s,useMutation as m}from"@tanstack/react-query";import u from"@mui/material/CssBaseline";import{CssVarsProvider as d}from"@mui/joy/styles";import p from"@mui/joy/Box";import f from"@mui/joy/Button";import h from"@mui/joy/Stack";import g from"@mui/joy/Typography";import E from"@mui/joy/Alert";import{useFormContext as b,Controller as y,useForm as x,FormProvider as w}from"react-hook-form";import v from"@mui/joy/Input";import S from"@mui/joy/FormControl";import C from"@mui/joy/FormHelperText";import k from"@mui/icons-material/Error";import T from"@mui/joy/FormLabel";import j from"@mui/joy/Select";import P from"@mui/joy/Option";import U from"@mui/joy/Tooltip";import{Switch as I,Modal as q,ModalDialog as F,Stack as R,Typography as B,FormControl as M,FormLabel as O,Input as V,Button as A}from"@mui/joy";import L from"@mui/joy/Checkbox";import D from"@mui/joy/List";import $ from"@mui/joy/ListItem";import{DataGrid as N}from"@mui/x-data-grid";import z from"@mui/icons-material/Add";import G from"lodash/isNull";import H from"lodash/isUndefined";import W from"@mui/icons-material/CopyAll";import Q from"@mui/icons-material/CheckCircleOutlined";function J({theme:e,children:r,slotProps:a}){return t.createElement(d,{...a,theme:e},t.createElement(u,{enableColorScheme:!0}),r)}const K=new c,X=r({api:new i({basePath:"https://api.thenile.dev",credentials:"include"}),basePath:""}),{Provider:Y}=X,Z=({children:e})=>t.createElement(s,{client:K},e),_=e=>{const{children:r,theme:n,slotProps:o,tenantId:l,QueryProvider:c=Z,basePath:s="https://api.thenile.dev",api:m}=e,u=a((()=>({api:m??new i({basePath:s,credentials:"include"}),tenantId:String(l),basePath:s})),[m,s,l]);return t.createElement(c,null,t.createElement(J,{slotProps:o?.provider,theme:n},t.createElement(Y,{value:u},r)))},ee=()=>n(X),te=()=>{const{basePath:e,tenantId:t}=ee();return a((()=>({tenantId:t,basePath:e})),[e,t])},re=()=>ee().api;var ae;function ne(){return ne=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},ne.apply(this,arguments)}var oe=function(t){return e.createElement("svg",ne({xmlns:"http://www.w3.org/2000/svg",width:18,height:18},t),ae||(ae=e.createElement("g",{fillRule:"evenodd"},e.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"}),e.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"}),e.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"}),e.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"}),e.createElement("path",{fill:"none",d:"M0 0h18v18H0z"}))))};function le(e){const{databaseId:r,newTenantName:a}=e,{basePath:n}=te(),o=`${n}/databases/${encodeURIComponent(r??"")}/users/oidc/google/login`,l=a?"?newTenant="+encodeURIComponent(a):"",i=(e?.href??o)+l;return t.createElement(p,{component:"a",href:i,display:"flex",flex:1,sx:{textDecoration:"none"}},t.createElement(p,null,t.createElement(f,{sx:{padding:0,textTransform:"initial",flex:1},"aria-label":"log in with google"},t.createElement(h,{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)"}},t.createElement(p,{padding:"11px",display:"flex",border:"1px solid rgb(66, 133, 244)",borderRadius:"4px",sx:{background:"rgb(255, 255, 255)"}},t.createElement(oe,{"aria-hidden":"true"})),t.createElement(p,{padding:"10px",flex:1},t.createElement(g,{sx:{color:"white"},fontWeight:700,fontFamily:"Roboto, sans-serif",fontSize:"14px",height:"20px"},"Continue with Google"))))))}function ie(t){const{options:r,attribute:a,display:n,helperText:o}=t,{watch:l,control:i}=b(),c=l(a.name),s={};return o&&(s.color="danger"),e.createElement(y,{name:a.name,rules:{required:Boolean(a.required)},control:i,render:({field:t})=>e.createElement(h,null,e.createElement(T,{htmlFor:`${t.name}`},n.label),e.createElement(p,{role:"group","aria-labelledby":a.name,sx:{borderRadius:"var(--joy-radius-sm)",p:.5,border:o?"1px solid var(--joy-palette-danger-outlinedBorder)":"none"}},e.createElement(D,{orientation:"horizontal",wrap:!0,sx:{"--List-gap":"8px"}},r.map((n=>(s.id=String(n.value),e.createElement($,{key:`${n.value}-${n.label}`},e.createElement(L,{overlay:r.length>1,...s,checked:c.includes(n.value),disableIcon:r.length>1,variant:"soft",label:n.label,onChange:e=>{if(a.allowMultiple)if(e.target.checked)c?t.onChange(c.concat(n.value)):t.onChange([n.value]);else{const e=c.filter((e=>e!==n.value));e.length>0?t.onChange(e):t.onChange("")}else e.target.checked?t.onChange(n.value):t.onChange("")}}))))))),e.createElement(g,{sx:{color:"var(--joy-palette-danger-500)"},level:"body-sm"},o))})}var ce;!function(e){e.Text="text",e.Password="password",e.Select="select",e.Number="number",e.Float="float",e.Checkbox="checkbox",e.Switch="switch"}(ce||(ce={}));const se=e=>!0===e.allowMultiple&&!Array.isArray(e.defaultValue)&&e.defaultValue?"number"==typeof e.defaultValue?[e.defaultValue]:[String(e.defaultValue)]:e.defaultValue??"";function me(e){const{error:r,attr:a}=e;return r?t.createElement(U,{title:r,color:"danger",sx:{cursor:"pointer"}},t.createElement(T,null,a.label??a.name,t.createElement(k,{sx:{ml:.5,"--Icon-color":"#c41c1c"},fontSize:"small"}))):t.createElement(T,null,a.label??a.name)}function ue(e){const{mutation:r,buttonText:a,attributes:n,cancelButton:o,loading:l,successMessage:i}=e,c=t.useMemo((()=>n.reduce(((e,t)=>(e[t.name]=se(t),e)),{})),[n]),s=x({defaultValues:c}),{register:m,control:u,handleSubmit:d,formState:{errors:g}}=s,E=t.useCallback((e=>{r.mutate(e)}),[r]);return t.createElement(w,{...s},t.createElement(h,{component:"form",onSubmit:d((e=>E(e))),spacing:2},n.map((e=>{const r={},a={key:e.name,label:e.label??e.name,id:e.label??e.name,placeholder:e.placeholder??e.label??e.name,error:Boolean(g[e.name]),disabled:Boolean(e.disabled)},n=e.options??[],o=e.helpText??"";let l="";switch(e.required&&(l=g[e.name]?`${e.label??e.name} is required`:"",r.required=!0),e.type){case ce.Switch:return t.createElement(S,{key:a.key,id:a.id,orientation:"horizontal",sx:{alignItems:"center"}},t.createElement(p,null,t.createElement(me,{error:l,attr:e}),t.createElement(C,{id:`${e.name}-helper-text`},o)),t.createElement(y,{control:u,rules:{required:Boolean(e.required)},name:e.name,render:({field:r})=>{const a={};return g[e.name]&&(a.color="danger"),t.createElement(I,{id:`switch-field-${e.name}`,...a,...r,checked:Boolean(r.value),onChange:e=>{r.onChange(e.target.checked)},color:r.value?"success":"neutral",endDecorator:r.value?n[0].label:n[1].label})}}));case ce.Checkbox:return t.createElement(ie,{key:a.key,attribute:e,display:a,options:n,helperText:o});case ce.Select:return t.createElement(S,{key:a.key,id:a.id},t.createElement(me,{error:l,attr:e}),t.createElement(y,{control:u,rules:{required:Boolean(e.required)},name:e.name,render:({field:r})=>{const l={};g[e.name]&&(l.color="danger");const i=String(r.value);return t.createElement(h,null,t.createElement(j,{id:`select-field-${e.name}`,placeholder:`${a.placeholder}...`,...l,...r,value:i,onChange:(e,t)=>{r.onChange(t)}},n.map((e=>t.createElement(P,{key:String(e.value??""),value:e.value},e.label)))),t.createElement(C,{id:`${e.name}-helper-text`},o))}}));case ce.Password:return t.createElement(S,{key:a.key,id:a.id},t.createElement(me,{error:l,attr:e}),t.createElement(v,{...a,...m(e.name,r),type:ce.Password}),t.createElement(C,{id:`${e.name}-helper-text`},o));case ce.Number:return t.createElement(S,{key:a.key,id:a.id},t.createElement(me,{error:l,attr:e}),t.createElement(v,{...a,...m(e.name,r),type:ce.Number}),t.createElement(C,{id:`${e.name}-helper-text`},o));case ce.Text:default:return t.createElement(S,{key:a.key,id:a.id},t.createElement(me,{error:l,attr:e}),t.createElement(v,{...a,...m(e.name,r)}),t.createElement(C,{id:`${e.name}-helper-text`},o))}})),o?t.createElement(h,{spacing:2,direction:"row"},o,t.createElement(p,null,t.createElement(f,{type:"submit"},a))):t.createElement(p,null,t.createElement(h,{direction:"row",gap:2},t.createElement(f,{type:"submit",loading:l},a),i))))}function de(e){const[r,a]=t.useState(),{buttonText:n="Sign up",onSuccess:o,onError:l,attributes:i,beforeMutate:c}=e,s=re(),u=m((async e=>{a(void 0);const t=(c&&c(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."),s.auth.signUp({signUpRequest:{email:r,password:n,preferredName:o,newTenant:l}})}),{onSuccess:o,onError:(e,t)=>{a(e.message),l&&l(e,t)}}),d=t.useMemo((()=>{const e=[{name:"email",label:"Email",type:ce.Text,defaultValue:"",required:!0},{name:"password",label:"Password",type:ce.Password,defaultValue:"",required:!0}];return i&&i.length>0?e.concat(i):e}),[i]);return t.createElement(h,{gap:2},r?t.createElement(E,{color:"danger"},r):null,t.createElement(ue,{mutation:u,buttonText:n,attributes:d}))}function pe(e){const[r,a]=t.useState(),{attributes:n,onSuccess:o,onError:l,beforeMutate:i}=e,c=re(),s=m((async e=>{a(void 0);const t=(i&&i(e))??e;return await c.auth.login({loginRequest:t})}),{onSuccess:o,onError:l}),u=t.useMemo((()=>{const e=[{name:"email",label:"Email",type:ce.Text,defaultValue:"",required:!0},{name:"password",label:"Password",type:ce.Password,defaultValue:"",required:!0}];return n&&n.length>0?e.concat(n):e}),[n]);return t.createElement(h,{gap:2},r?t.createElement(E,{color:"danger"},r):null,t.createElement(ue,{mutation:s,buttonText:"Log in",attributes:u}))}function fe(e){const{attributes:r,onSuccess:a,onError:n,beforeMutate:o,nextButtonText:l="Next",loginButtonText:i="Log in",disableSSO:c=!1}=e,s=re(),[u,d]=t.useState(c?i:l),p=m((async e=>{const t=(o&&o(e))??e;return await s.auth.login({loginRequest:{email:t.email,password:t.password},sso:!c})}),{onSuccess:(e,t)=>{e&&(e?.redirectURI?window.location.href=e.redirectURI:u!==i?d(i):a&&a(e,t))},onError:(e,t)=>{u===i?n&&n(e,t):d(i)}}),f=t.useMemo((()=>{const e=[{name:"email",label:"Email",type:ce.Text,defaultValue:"",required:!0}];return u===i&&e.push({name:"password",label:"Password",type:ce.Password,defaultValue:"",required:!0}),r&&r.length>0?e.concat(r):e}),[r,u,i]);return t.createElement(ue,{mutation:p,buttonText:u,attributes:f})}function he(e){const{open:r,setOpen:a,refetch:n}=e,{tenantId:o}=te(),l=re(),[i,c]=t.useState(),{watch:s,register:u,handleSubmit:d}=x(),p=s("email");t.useEffect((()=>{null!=i&&c()}),[p]);const f=m((e=>l.users.createTenantUser({signUpRequest:e,tenantId:String(o)})),{onSuccess(e){n&&n(e),a(!1)},onError(e){e instanceof Error&&c(e.message)}}),h=t.useCallback((async e=>{c(""),f.mutate(e)}),[f]);return t.createElement(q,{open:r},t.createElement(F,null,t.createElement(R,{spacing:2},t.createElement(B,{level:"h4"},"Create user"),t.createElement(t.Fragment,null,i&&t.createElement(B,{color:"danger"},i)),t.createElement(R,{component:"form",sx:{width:"40ch"},spacing:1,onSubmit:d((e=>h(e)))},t.createElement(M,{sx:{"--FormHelperText-color":"var(--joy-palette-danger-500)"}},t.createElement(O,{htmlFor:"email"},"Email"),t.createElement(V,{...u("email"),fullWidth:!0,size:"lg",id:"email",name:"email",autoComplete:"current-email",required:!0,error:Boolean(i)})),t.createElement(M,{sx:{"--FormHelperText-color":"var(--joy-palette-danger-500)"}},t.createElement(O,{htmlFor:"password"},"Password"),t.createElement(V,{...u("password"),fullWidth:!0,size:"lg",id:"password",autoComplete:"current-password",type:"password",required:!0})),t.createElement(R,{direction:"row",sx:{pt:2},spacing:2},t.createElement(A,{onClick:()=>a(!1),variant:"plain"},"Cancel"),t.createElement(A,{type:"submit"},"Create"))))))}function ge(e){const{allowCreation:r,buttonText:a,onUserCreateSuccess:n}=e,[l,i]=o(!1);return r?t.createElement(h,{alignItems:"flex-end",gap:1},t.createElement(he,{open:l,setOpen:i,refetch:n}),t.createElement(f,{startDecorator:t.createElement(z,null),size:"sm",onClick:()=>i(!0)},a)):null}const Ee=e=>Object.keys(e).reduce(((t,r)=>{const a=e[r];return a instanceof Set?t[r]=Array.from(a).join(", "):Array.isArray(a)?t[r]=a.join(", "):t[r]=a,t}),{}),be=(e,t,r)=>{if(!e)return[[],[]];const a=e.map(Ee),n=Object.keys(a[0]),o={},l=n?.map((e=>{const n=function(e,t,r){let a=r&&e?r.measureText(String(e)).width:50;a+=27;let n=a;return n=16+Math.ceil(r?r.measureText(t.reduce(((t,r)=>{let a=r[String(e)];return(G(a)||H(a))&&(a=""),a=a?.toString(),t.length>a.length?t:a}),"")).width:50),n<a&&(n=a),n+=8,n}(e,a,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:n}})).filter(Boolean)??[];return[l,a]};function ye(e,t){const r=function(){const[e,t]=o();return l((()=>{const e=document.createElement("canvas").getContext("2d");e&&(e.font="18px Roboto",t(e))}),[]),e}(),[n,i]=a((()=>be(e,r,t)),[e,r,t]);return[n,i]}function xe(e){const{data:r,allowCreation:a=!0,buttonText:n="Add a user",onUserCreateSuccess:o,slots:l,include:i=["email","preferedName"]}=e,c={width:"100%",height:"100%",...l?.dataGrid??{}},[s,m]=ye(r,i);return t.createElement(h,{flex:1},t.createElement(ge,{allowCreation:a,buttonText:n,onUserCreateSuccess:o}),t.createElement(N,{sx:c,rows:m,columns:s,hideFooter:!0}))}function we(e){const{config:r,providerName:a,onSuccess:n,onError:o,allowEdit:l=!0,configurationGuide:i}=e,c=re(),[s,u]=t.useState(!1),[d,p]=t.useState(!1),[f,b]=t.useState(r),y=t.useRef(),x=t.useMemo((()=>{const e=[{name:"enabled",label:"Allow Okta logins",type:ce.Switch,defaultValue:!0===f?.enabled,options:[{label:"Enabled"},{label:"Disabled"}],disabled:!l},{name:"clientId",label:"Client id",type:ce.Text,defaultValue:f?.clientId??"",required:!0,disabled:!l},{name:"configUrl",label:"Config url",type:ce.Text,defaultValue:f?.configUrl??"",helpText:"The URL of the .well-known/openid-configuration for the identity provider",required:!0,disabled:!l},{name:"emailDomains",label:"Email domains",type:ce.Text,defaultValue:f?.emailDomains?.join(", ")??"",required:!0,helpText:"A comma seperated list of email domains (yourDomain.com) to be used",disabled:!l}];return f?.clientId||e.splice(2,0,{name:"clientSecret",label:"Client secret",type:ce.Password,defaultValue:"",required:!0,disabled:!l}),e}),[l,f?.clientId,f?.configUrl,f?.emailDomains,f?.enabled]),w=m((e=>{u(!0);const t={providerName:a.toLowerCase(),updateProviderRequest:{...e,emailDomains:e.emailDomains.split(",")}};return null!=f?c.auth.updateProvider(t):c.auth.createProvider(t)}),{onSuccess:(e,t)=>{b(e),p(!0),n&&n(e,t)},onError:o,onSettled:(e,t,r)=>{u(!1),y.current&&clearTimeout(y.current),y.current=setTimeout((()=>{p(!1)}),3e3),e||(t&&!t?.message.includes("Unterminated string")||b({enabled:r.enabled,clientId:r.clientId,configUrl:r.configUrl,emailDomains:r.emailDomains.split(", ")}),p(!0),n&&n(e,r))}});return t.useEffect((()=>{})),t.createElement(h,{gap:2,position:"relative"},t.createElement(g,{level:"h4"},"Step 1"),i,t.createElement(g,{level:"h4"},"Step 2"),t.createElement(ue,{mutation:w,buttonText:"Update",attributes:x,loading:s,successMessage:t.createElement(E,{color:"success",sx:{opacity:d?1:0,transition:"opacity 200ms",height:"0.9rem"},startDecorator:t.createElement(Q,null)},t.createElement(g,{textAlign:"center",fontSize:"sm"},"Provider updated"))}))}function ve({callbackUrl:e}){const[r,a]=t.useState(!1),n=t.useRef();return t.useEffect((()=>{n.current&&clearTimeout(n.current),n.current=setTimeout((()=>{a(!1)}),3250)}),[r]),t.createElement(h,{gap:2},t.createElement(g,null,"In order for Okta to redirect properly, provide the following URL as the"," ",t.createElement(p,{component:"span",sx:{fontFamily:"monospace"}},"Sign-in redirect URIs")," ","in the admin configuration of your application."),t.createElement(v,{onClick:async()=>{e&&(await navigator.clipboard.writeText(e),a(!0))},sx:e=>({input:{cursor:"pointer"},span:{cursor:"pointer"},"&:hover svg":{"--Icon-color":e.palette.primary[500]}}),value:e,readOnly:!0,endDecorator:t.createElement(U,{title:"Copy Okta redirect URL"},t.createElement(p,{position:"relative",width:r?"82px":"24px",height:"24px"},t.createElement(p,{position:"absolute",top:"0",left:"0",sx:{opacity:r?0:1,transition:"opacity 300ms"}},t.createElement(W,null)),t.createElement(p,{position:"absolute",top:"0",left:"0",sx:{opacity:r?1:0,transition:"opacity 300ms"}},t.createElement(h,{direction:"row",gap:1},t.createElement(Q,null),t.createElement(g,{color:"primary"},"Copied!")))))}))}function Se(e){const{callbackUrl:r,providers:a,...n}=e;if(!a)return null;const o=a?.find((e=>"okta"===e.provider));return t.createElement(we,{...n,config:o,providerName:"Okta",configurationGuide:t.createElement(ve,{callbackUrl:r})})}export{ce as FormAttributeType,le as GoogleLoginButton,_ as NileProvider,Se as Okta,we as SSOForm,fe as SingleSignOnForm,pe as UserLoginForm,de as UserSignupForm,xe as UserTenantList};
+import * as React from 'react';
+import React__default, { useMemo, useContext, createContext, useState, useEffect } from 'react';
+import Browser from '@niledatabase/browser';
+import { QueryClientProvider, QueryClient, useMutation } from '@tanstack/react-query';
+import CssBaseline from '@mui/material/CssBaseline';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import Alert from '@mui/joy/Alert';
+import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-form';
+import Input from '@mui/joy/Input';
+import FormControl from '@mui/joy/FormControl';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Error$1 from '@mui/icons-material/Error';
+import FormLabel from '@mui/joy/FormLabel';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+import Tooltip from '@mui/joy/Tooltip';
+import { Switch, Modal, ModalDialog, Stack as Stack$1, Typography as Typography$1, FormControl as FormControl$1, FormLabel as FormLabel$1, Input as Input$1, Button as Button$1 } from '@mui/joy';
+import Checkbox from '@mui/joy/Checkbox';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import { DataGrid } from '@mui/x-data-grid';
+import Add from '@mui/icons-material/Add';
+import CopyAll from '@mui/icons-material/CopyAll';
+import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+function Themer({
+  theme,
+  children,
+  slotProps
+}) {
+  return /*#__PURE__*/React__default.createElement(CssVarsProvider, {
+    ...slotProps,
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(CssBaseline, {
+    enableColorScheme: true
+  }), children);
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+const queryClient = /*#__PURE__*/new QueryClient();
+const defaultContext = {
+  api: /*#__PURE__*/new Browser({
+    basePath: 'https://api.thenile.dev',
+    credentials: 'include'
+  }),
+  basePath: ''
+};
+const context = /*#__PURE__*/createContext(defaultContext);
+const {
+  Provider
+} = context;
+const BaseQueryProvider = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(QueryClientProvider, {
+    client: queryClient
+  }, children);
+};
+const NileProvider = props => {
+  const {
+    children,
+    theme,
+    slotProps,
+    tenantId,
+    QueryProvider = BaseQueryProvider,
+    basePath = 'https://api.thenile.dev',
+    api
+  } = props;
+  const values = useMemo(() => {
+    return {
+      api: api ?? new Browser({
+        basePath,
+        credentials: 'include'
+      }),
+      tenantId: String(tenantId),
+      basePath
+    };
+  }, [api, basePath, tenantId]);
+  return /*#__PURE__*/React__default.createElement(QueryProvider, null, /*#__PURE__*/React__default.createElement(Themer, {
+    slotProps: slotProps?.provider,
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(Provider, {
+    value: values
+  }, children)));
+};
+const useNileContext = () => {
+  return useContext(context);
+};
+const useNileConfig = () => {
+  const {
+    basePath,
+    tenantId
+  } = useNileContext();
+  return 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.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.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.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.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.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.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__default.createElement(Box, {
+    component: "a",
+    href: href,
+    display: "flex",
+    flex: 1,
+    sx: {
+      textDecoration: 'none'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Button, {
+    sx: {
+      padding: 0,
+      textTransform: 'initial',
+      flex: 1
+    },
+    "aria-label": "log in with google"
+  }, /*#__PURE__*/React__default.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__default.createElement(Box, {
+    padding: "11px",
+    display: "flex",
+    border: "1px solid rgb(66, 133, 244)",
+    borderRadius: "4px",
+    sx: {
+      background: 'rgb(255, 255, 255)'
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgGoogle, {
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "10px",
+    flex: 1
+  }, /*#__PURE__*/React__default.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
+  } = useFormContext();
+  const currentVals = watch(attribute.name);
+  const checkProps = {};
+  if (helperText) {
+    checkProps.color = 'danger';
+  }
+  return /*#__PURE__*/React.createElement(Controller, {
+    name: attribute.name,
+    rules: {
+      required: Boolean(attribute.required)
+    },
+    control: control,
+    render: ({
+      field
+    }) => {
+      return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(FormLabel, {
+        htmlFor: `${field.name}`
+      }, display.label), /*#__PURE__*/React.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.createElement(List, {
+        orientation: "horizontal",
+        wrap: true,
+        sx: {
+          '--List-gap': '8px'
+        }
+      }, options.map(item => {
+        checkProps.id = String(item.value);
+        return /*#__PURE__*/React.createElement(ListItem, {
+          key: `${item.value}-${item.label}`
+        }, /*#__PURE__*/React.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.createElement(Typography, {
+        sx: {
+          color: 'var(--joy-palette-danger-500)'
+        },
+        level: "body-sm"
+      }, helperText));
+    }
+  });
+}
+
+var AttributeType;
+(function (AttributeType) {
+  AttributeType["Text"] = "text";
+  AttributeType["Password"] = "password";
+  AttributeType["Select"] = "select";
+  AttributeType["Number"] = "number";
+  AttributeType["Float"] = "float";
+  AttributeType["Checkbox"] = "checkbox";
+  AttributeType["Switch"] = "switch";
+})(AttributeType || (AttributeType = {}));
+
+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__default.createElement(Tooltip, {
+      title: error,
+      color: "danger",
+      sx: {
+        cursor: 'pointer'
+      }
+    }, /*#__PURE__*/React__default.createElement(FormLabel, null, attr.label ?? attr.name, /*#__PURE__*/React__default.createElement(Error$1, {
+      sx: {
+        ml: 0.5,
+        '--Icon-color': '#c41c1c'
+      },
+      fontSize: "small"
+    })));
+  }
+  return /*#__PURE__*/React__default.createElement(FormLabel, null, attr.label ?? attr.name);
+}
+function SimpleForm(props) {
+  const {
+    mutation,
+    buttonText,
+    attributes,
+    cancelButton,
+    loading,
+    successMessage
+  } = props;
+  const defaultValues = React__default.useMemo(() => attributes.reduce((accum, attr) => {
+    accum[attr.name] = getAttributeDefault(attr);
+    return accum;
+  }, {}), [attributes]);
+  const methods = useForm({
+    defaultValues
+  });
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: {
+      errors
+    }
+  } = methods;
+  const onSubmit = React__default.useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data => {
+    mutation.mutate(data);
+  }, [mutation]);
+  return /*#__PURE__*/React__default.createElement(FormProvider, {
+    ...methods
+  }, /*#__PURE__*/React__default.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 AttributeType.Switch:
+        return /*#__PURE__*/React__default.createElement(FormControl, {
+          key: display.key,
+          id: display.id,
+          orientation: "horizontal",
+          sx: {
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React__default.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText)), /*#__PURE__*/React__default.createElement(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__default.createElement(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 AttributeType.Checkbox:
+        return /*#__PURE__*/React__default.createElement(CheckGroup, {
+          key: display.key,
+          attribute: attr,
+          display: display,
+          options: options,
+          helperText: helperText
+        });
+      case AttributeType.Select:
+        return /*#__PURE__*/React__default.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React__default.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React__default.createElement(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__default.createElement(Stack, null, /*#__PURE__*/React__default.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__default.createElement(Option, {
+                key: String(option.value ?? ''),
+                value: option.value
+              }, option.label);
+            })), /*#__PURE__*/React__default.createElement(FormHelperText, {
+              id: `${attr.name}-helper-text`
+            }, helperText));
+          }
+        }));
+      case AttributeType.Password:
+        return /*#__PURE__*/React__default.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React__default.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React__default.createElement(Input, {
+          ...display,
+          ...register(attr.name, fieldConfig),
+          type: AttributeType.Password
+        }), /*#__PURE__*/React__default.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText));
+      case AttributeType.Number:
+        return /*#__PURE__*/React__default.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React__default.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React__default.createElement(Input, {
+          ...display,
+          ...register(attr.name, fieldConfig),
+          type: AttributeType.Number
+        }), /*#__PURE__*/React__default.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText));
+      case AttributeType.Text:
+      default:
+        return /*#__PURE__*/React__default.createElement(FormControl, {
+          key: display.key,
+          id: display.id
+        }, /*#__PURE__*/React__default.createElement(Labler, {
+          error: error,
+          attr: attr
+        }), /*#__PURE__*/React__default.createElement(Input, {
+          ...display,
+          ...register(attr.name, fieldConfig)
+        }), /*#__PURE__*/React__default.createElement(FormHelperText, {
+          id: `${attr.name}-helper-text`
+        }, helperText));
+    }
+  }), cancelButton ? ( /*#__PURE__*/React__default.createElement(Stack, {
+    spacing: 2,
+    direction: "row"
+  }, cancelButton, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Button, {
+    type: "submit"
+  }, buttonText)))) : ( /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    gap: 2
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: "submit",
+    loading: loading
+  }, buttonText), successMessage)))));
+}
+
+function SignUpForm(props) {
+  const [error, setError] = React__default.useState();
+  const {
+    buttonText = 'Sign up',
+    onSuccess,
+    onError,
+    attributes,
+    beforeMutate
+  } = props;
+  const api = useApi();
+  const mutation = 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__default.useMemo(() => {
+    const mainAttributes = [{
+      name: 'email',
+      label: 'Email',
+      type: AttributeType.Text,
+      defaultValue: '',
+      required: true
+    }, {
+      name: 'password',
+      label: 'Password',
+      type: AttributeType.Password,
+      defaultValue: '',
+      required: true
+    }];
+    if (attributes && attributes.length > 0) {
+      return mainAttributes.concat(attributes);
+    }
+    return mainAttributes;
+  }, [attributes]);
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    gap: 2
+  }, error ? /*#__PURE__*/React__default.createElement(Alert, {
+    color: "danger"
+  }, error) : null, /*#__PURE__*/React__default.createElement(SimpleForm, {
+    mutation: mutation,
+    buttonText: buttonText,
+    attributes: completeAttributes
+  }));
+}
+
+function LoginForm(props) {
+  const [error, setError] = React__default.useState();
+  const {
+    attributes,
+    onSuccess,
+    onError,
+    beforeMutate
+  } = props;
+  const api = useApi();
+  const mutation = 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__default.useMemo(() => {
+    const mainAttributes = [{
+      name: 'email',
+      label: 'Email',
+      type: AttributeType.Text,
+      defaultValue: '',
+      required: true
+    }, {
+      name: 'password',
+      label: 'Password',
+      type: AttributeType.Password,
+      defaultValue: '',
+      required: true
+    }];
+    if (attributes && attributes.length > 0) {
+      return mainAttributes.concat(attributes);
+    }
+    return mainAttributes;
+  }, [attributes]);
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    gap: 2
+  }, error ? /*#__PURE__*/React__default.createElement(Alert, {
+    color: "danger"
+  }, error) : null, /*#__PURE__*/React__default.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__default.useState(disableSSO ? loginButtonText : nextButtonText);
+  const mutation = 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__default.useMemo(() => {
+    const mainAttributes = [{
+      name: 'email',
+      label: 'Email',
+      type: AttributeType.Text,
+      defaultValue: '',
+      required: true
+    }];
+    if (buttonText === loginButtonText) {
+      mainAttributes.push({
+        name: 'password',
+        label: 'Password',
+        type: AttributeType.Password,
+        defaultValue: '',
+        required: true
+      });
+    }
+    if (attributes && attributes.length > 0) {
+      return mainAttributes.concat(attributes);
+    }
+    return mainAttributes;
+  }, [attributes, buttonText, loginButtonText]);
+  return /*#__PURE__*/React__default.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__default.useState();
+  const {
+    watch,
+    register,
+    handleSubmit
+  } = useForm();
+  const email = watch('email');
+  React__default.useEffect(() => {
+    if (errorText != null) {
+      setErrorText();
+    }
+    // if email changes, no more error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [email]);
+  const mutation = 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__default.useCallback(async data => {
+    setErrorText('');
+    mutation.mutate(data);
+  }, [mutation]);
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    open: open
+  }, /*#__PURE__*/React__default.createElement(ModalDialog, null, /*#__PURE__*/React__default.createElement(Stack$1, {
+    spacing: 2
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    level: "h4"
+  }, "Create user"), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, errorText && /*#__PURE__*/React__default.createElement(Typography$1, {
+    color: "danger"
+  }, errorText)), /*#__PURE__*/React__default.createElement(Stack$1, {
+    component: "form",
+    sx: {
+      width: '40ch'
+    },
+    spacing: 1,
+    onSubmit: handleSubmit(data => handleUpdate(data))
+  }, /*#__PURE__*/React__default.createElement(FormControl$1, {
+    sx: {
+      '--FormHelperText-color': 'var(--joy-palette-danger-500)'
+    }
+  }, /*#__PURE__*/React__default.createElement(FormLabel$1, {
+    htmlFor: "email"
+  }, "Email"), /*#__PURE__*/React__default.createElement(Input$1, {
+    ...register('email'),
+    fullWidth: true,
+    size: "lg",
+    id: "email",
+    name: "email",
+    autoComplete: "current-email",
+    required: true,
+    error: Boolean(errorText)
+  })), /*#__PURE__*/React__default.createElement(FormControl$1, {
+    sx: {
+      '--FormHelperText-color': 'var(--joy-palette-danger-500)'
+    }
+  }, /*#__PURE__*/React__default.createElement(FormLabel$1, {
+    htmlFor: "password"
+  }, "Password"), /*#__PURE__*/React__default.createElement(Input$1, {
+    ...register('password'),
+    fullWidth: true,
+    size: "lg",
+    id: "password",
+    autoComplete: "current-password",
+    type: "password",
+    required: true
+  })), /*#__PURE__*/React__default.createElement(Stack$1, {
+    direction: "row",
+    sx: {
+      pt: 2
+    },
+    spacing: 2
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    onClick: () => setOpen(false),
+    variant: "plain"
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button$1, {
+    type: "submit"
+  }, "Create"))))));
+}
+
+function CreateUser(props) {
+  const {
+    allowCreation,
+    buttonText,
+    onUserCreateSuccess
+  } = props;
+  const [open, setOpen] = useState(false);
+  if (!allowCreation) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    alignItems: "flex-end",
+    gap: 1
+  }, /*#__PURE__*/React__default.createElement(AddUser, {
+    open: open,
+    setOpen: setOpen,
+    refetch: onUserCreateSuccess
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    startDecorator: /*#__PURE__*/React__default.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] = useState();
+  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] = 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__default.createElement(Stack, {
+    flex: 1
+  }, /*#__PURE__*/React__default.createElement(CreateUser, {
+    allowCreation: allowCreation,
+    buttonText: buttonText,
+    onUserCreateSuccess: onUserCreateSuccess
+  }), /*#__PURE__*/React__default.createElement(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__default.useState(false);
+  const [success, setSuccess] = React__default.useState(false);
+  const [optimisticConfig, setConfig] = React__default.useState(config);
+  const timer = React__default.useRef();
+  const attributes = React__default.useMemo(() => {
+    const attributes = [{
+      name: 'enabled',
+      label: 'Allow Okta logins',
+      type: AttributeType.Switch,
+      defaultValue: optimisticConfig?.enabled === true,
+      options: [{
+        label: 'Enabled'
+      }, {
+        label: 'Disabled'
+      }],
+      disabled: !allowEdit
+    }, {
+      name: 'clientId',
+      label: 'Client id',
+      type: AttributeType.Text,
+      defaultValue: optimisticConfig?.clientId ?? '',
+      required: true,
+      disabled: !allowEdit
+    }, {
+      name: 'configUrl',
+      label: 'Config url',
+      type: AttributeType.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: AttributeType.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: AttributeType.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 = 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__default.useEffect(() => {
+  });
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    gap: 2,
+    position: "relative"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    level: "h4"
+  }, "Step 1"), configurationGuide, /*#__PURE__*/React__default.createElement(Typography, {
+    level: "h4"
+  }, "Step 2"), /*#__PURE__*/React__default.createElement(SimpleForm, {
+    mutation: mutation,
+    buttonText: "Update",
+    attributes: attributes,
+    loading: loading,
+    successMessage: /*#__PURE__*/React__default.createElement(Alert, {
+      color: "success",
+      sx: {
+        opacity: success ? 1 : 0,
+        transition: 'opacity 200ms',
+        height: '0.9rem'
+      },
+      startDecorator: /*#__PURE__*/React__default.createElement(CheckCircleOutlined, null)
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      textAlign: "center",
+      fontSize: "sm"
+    }, "Provider updated"))
+  }));
+}
+
+function ConfigGuide({
+  callbackUrl
+}) {
+  const [copied, setCopied] = React__default.useState(false);
+  const timer = React__default.useRef();
+  React__default.useEffect(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      setCopied(false);
+    }, 3250);
+  }, [copied]);
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    gap: 2
+  }, /*#__PURE__*/React__default.createElement(Typography, null, "In order for Okta to redirect properly, provide the following URL as the", ' ', /*#__PURE__*/React__default.createElement(Box, {
+    component: "span",
+    sx: {
+      fontFamily: 'monospace'
+    }
+  }, "Sign-in redirect URIs"), ' ', "in the admin configuration of your application."), /*#__PURE__*/React__default.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__default.createElement(Tooltip, {
+      title: "Copy Okta redirect URL"
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      position: "relative",
+      width: copied ? '82px' : '24px',
+      height: "24px"
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      sx: {
+        opacity: copied ? 0 : 1,
+        transition: 'opacity 300ms'
+      }
+    }, /*#__PURE__*/React__default.createElement(CopyAll, null)), /*#__PURE__*/React__default.createElement(Box, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      sx: {
+        opacity: !copied ? 0 : 1,
+        transition: 'opacity 300ms'
+      }
+    }, /*#__PURE__*/React__default.createElement(Stack, {
+      direction: "row",
+      gap: 1
+    }, /*#__PURE__*/React__default.createElement(CheckCircleOutlined, null), /*#__PURE__*/React__default.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__default.createElement(BaseSSOForm, {
+    ...remaining,
+    config: config,
+    providerName: "Okta",
+    configurationGuide: /*#__PURE__*/React__default.createElement(ConfigGuide, {
+      callbackUrl: callbackUrl
+    })
+  });
+}
+
+export { AttributeType as FormAttributeType, GoogleSSOButton as GoogleLoginButton, NileProvider, Okta, BaseSSOForm as SSOForm, SingleSignOnForm, LoginForm as UserLoginForm, SignUpForm as UserSignupForm, UserList as UserTenantList };
 //# sourceMappingURL=react.esm.js.map