@strapi/admin 5.0.0-beta.1 → 5.0.0-beta.2

package/dist/admin/Theme-Gult7t3_.mjs

@@ -0,0 +1,1094 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useRef, useEffect, useState, useMemo } from 'react';
+import { createContext as createContext$1 } from '@radix-ui/react-context';
+import { useIntl, IntlProvider } from 'react-intl';
+import { Flex, useCallbackRef, Alert, Main, Loader, EmptyStateLayout, Icon, Box, DesignSystemProvider } from '@strapi/design-system';
+import { ExclamationMarkCircle, EmptyPermissions, EmptyDocuments } from '@strapi/icons';
+import { useNavigate } from 'react-router-dom';
+import { b as adminApi, e as useInitQuery, f as useTelemetryPropertiesQuery, g as useProjectSettingsQuery, h as useUpdateProjectSettingsMutation } from './admin-w3o7ePNm.mjs';
+import { Link } from '@strapi/design-system/v2';
+import isEqual from 'lodash/isEqual';
+import axios from 'axios';
+import * as ContextSelector from 'use-context-selector';
+import defaultsDeep from 'lodash/defaultsDeep';
+import { useStore, useDispatch, useSelector } from 'react-redux';
+import { createGlobalStyle } from 'styled-components';
+import { createSelector, createSlice } from '@reduxjs/toolkit';
+
+function createContext(rootComponentName, defaultContext) {
+  const Context = ContextSelector.createContext(defaultContext);
+  const Provider = (props) => {
+    const { children, ...context } = props;
+    const value = React.useMemo(() => context, Object.values(context));
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  };
+  const useContext = (consumerName, selector) => ContextSelector.useContextSelector(Context, (ctx) => {
+    if (ctx)
+      return selector(ctx);
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  });
+  Provider.displayName = rootComponentName + "Provider";
+  return [Provider, useContext];
+}
+
+const useTypedDispatch = useDispatch;
+const useTypedStore = useStore;
+const useTypedSelector = useSelector;
+const createTypedSelector = (selector) => createSelector((state) => state, selector);
+
+const THEME_LOCAL_STORAGE_KEY = "STRAPI_THEME";
+const LANGUAGE_LOCAL_STORAGE_KEY = "strapi-admin-language";
+const adminSlice = createSlice({
+  name: "admin",
+  initialState: () => {
+    return {
+      language: {
+        locale: "en",
+        localeNames: { en: "English" }
+      },
+      permissions: {},
+      theme: {
+        availableThemes: [],
+        currentTheme: localStorage.getItem(THEME_LOCAL_STORAGE_KEY) || "system"
+      }
+    };
+  },
+  reducers: {
+    setAppTheme(state, action) {
+      state.theme.currentTheme = action.payload;
+      window.localStorage.setItem(THEME_LOCAL_STORAGE_KEY, action.payload);
+    },
+    setAvailableThemes(state, action) {
+      state.theme.availableThemes = action.payload;
+    },
+    setLocale(state, action) {
+      state.language.locale = action.payload;
+      window.localStorage.setItem(LANGUAGE_LOCAL_STORAGE_KEY, action.payload);
+      document.documentElement.setAttribute("lang", action.payload);
+    }
+  }
+});
+const reducer = adminSlice.reducer;
+const { setAppTheme, setAvailableThemes, setLocale } = adminSlice.actions;
+
+const authService = adminApi.injectEndpoints({
+  endpoints: (builder) => ({
+    /**
+     * ME
+     */
+    getMe: builder.query({
+      query: () => ({
+        method: "GET",
+        url: "/admin/users/me"
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      providesTags: (res) => res ? ["Me", { type: "User", id: res.id }] : ["Me"]
+    }),
+    getMyPermissions: builder.query({
+      query: () => ({
+        method: "GET",
+        url: "/admin/users/me/permissions"
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    updateMe: builder.mutation({
+      query: (body) => ({
+        method: "PUT",
+        url: "/admin/users/me",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      invalidatesTags: ["Me"]
+    }),
+    /**
+     * Permissions
+     */
+    checkPermissions: builder.query({
+      query: (permissions) => ({
+        method: "POST",
+        url: "/admin/permissions/check",
+        data: permissions
+      })
+    }),
+    /**
+     * Auth methods
+     */
+    login: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/login",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      invalidatesTags: ["Me"]
+    }),
+    logout: builder.mutation({
+      query: () => ({
+        method: "POST",
+        url: "/admin/logout"
+      })
+    }),
+    resetPassword: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/reset-password",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    renewToken: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/renew-token",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    getRegistrationInfo: builder.query({
+      query: (registrationToken) => ({
+        url: "/admin/registration-info",
+        method: "GET",
+        config: {
+          params: {
+            registrationToken
+          }
+        }
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    registerAdmin: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/register-admin",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    registerUser: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/register",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    forgotPassword: builder.mutation({
+      query: (body) => ({
+        url: "/admin/forgot-password",
+        method: "POST",
+        data: body
+      })
+    }),
+    isSSOLocked: builder.query({
+      query: () => ({
+        url: "/admin/providers/isSSOLocked",
+        method: "GET"
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    getProviders: builder.query({
+      query: () => ({
+        url: "/admin/providers",
+        method: "GET"
+      })
+    }),
+    getProviderOptions: builder.query({
+      query: () => ({
+        url: "/admin/providers/options",
+        method: "GET"
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      providesTags: ["ProvidersOptions"]
+    }),
+    updateProviderOptions: builder.mutation({
+      query: (body) => ({
+        url: "/admin/providers/options",
+        method: "PUT",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      invalidatesTags: ["ProvidersOptions"]
+    })
+  }),
+  overrideExisting: false
+});
+const {
+  useCheckPermissionsQuery,
+  useLazyCheckPermissionsQuery,
+  useGetMeQuery,
+  useLoginMutation,
+  useRenewTokenMutation,
+  useLogoutMutation,
+  useUpdateMeMutation,
+  useResetPasswordMutation,
+  useRegisterAdminMutation,
+  useRegisterUserMutation,
+  useGetRegistrationInfoQuery,
+  useForgotPasswordMutation,
+  useGetMyPermissionsQuery,
+  useIsSSOLockedQuery,
+  useGetProvidersQuery,
+  useGetProviderOptionsQuery,
+  useUpdateProviderOptionsMutation
+} = authService;
+
+const [Provider, useAuth] = createContext("Auth");
+const STORAGE_KEYS = {
+  TOKEN: "jwtToken",
+  USER: "userInfo"
+};
+const AuthProvider = ({ children, _defaultPermissions = [] }) => {
+  const dispatch = useTypedDispatch();
+  const [token, setToken] = React.useState(() => {
+    const token2 = localStorage.getItem(STORAGE_KEYS.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS.TOKEN);
+    if (typeof token2 === "string") {
+      return JSON.parse(token2);
+    }
+    return null;
+  });
+  const { data: user } = useGetMeQuery(void 0, {
+    /**
+     * If there's no token, we don't try to fetch
+     * the user data because it will fail.
+     */
+    skip: !token
+  });
+  const {
+    data: userPermissions = _defaultPermissions,
+    refetch,
+    isUninitialized
+  } = useGetMyPermissionsQuery(void 0, {
+    skip: !token
+  });
+  const navigate = useNavigate();
+  const [loginMutation] = useLoginMutation();
+  const [renewTokenMutation] = useRenewTokenMutation();
+  const [logoutMutation] = useLogoutMutation();
+  const clearStorage = React.useCallback(() => {
+    localStorage.removeItem(STORAGE_KEYS.TOKEN);
+    localStorage.removeItem(STORAGE_KEYS.USER);
+    sessionStorage.removeItem(STORAGE_KEYS.TOKEN);
+    sessionStorage.removeItem(STORAGE_KEYS.USER);
+    setToken(null);
+  }, []);
+  React.useEffect(() => {
+    const token2 = localStorage.getItem(STORAGE_KEYS.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS.TOKEN);
+    if (token2) {
+      renewTokenMutation({ token: JSON.parse(token2) }).then((res) => {
+        if ("data" in res) {
+          setToken(res.data.token);
+        } else {
+          clearStorage();
+          navigate("/auth/login");
+        }
+      });
+    }
+  }, [renewTokenMutation, clearStorage, navigate]);
+  React.useEffect(() => {
+    if (user) {
+      if (user.preferedLanguage) {
+        dispatch(setLocale(user.preferedLanguage));
+      }
+    }
+  }, [dispatch, user]);
+  React.useEffect(() => {
+    if (token) {
+      storeToken(token, false);
+    }
+  }, [token]);
+  React.useEffect(() => {
+    const handleUserStorageChange = (event) => {
+      if (event.key === STORAGE_KEYS.USER && event.newValue === null) {
+        clearStorage();
+        navigate("/auth/login");
+      }
+    };
+    window.addEventListener("storage", handleUserStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleUserStorageChange);
+    };
+  });
+  const login = React.useCallback(
+    async ({ rememberMe, ...body }) => {
+      const res = await loginMutation(body);
+      if ("data" in res) {
+        const { token: token2 } = res.data;
+        storeToken(token2, rememberMe);
+        setToken(token2);
+      }
+      return res;
+    },
+    [loginMutation]
+  );
+  const logout = React.useCallback(async () => {
+    await logoutMutation();
+    clearStorage();
+    navigate("/auth/login");
+  }, [clearStorage, logoutMutation, navigate]);
+  const refetchPermissions = React.useCallback(async () => {
+    if (!isUninitialized) {
+      await refetch();
+    }
+  }, [isUninitialized, refetch]);
+  const [checkPermissions] = useLazyCheckPermissionsQuery();
+  const checkUserHasPermissions = React.useCallback(
+    async (permissions, passedPermissions) => {
+      if (!permissions || !permissions.length) {
+        return true;
+      }
+      const matchingPermissions = permissions.filter(
+        (permission) => (passedPermissions || userPermissions).findIndex(
+          (perm) => perm.action === permission.action && perm.subject === permission.subject
+        ) >= 0
+      );
+      const shouldCheckConditions = matchingPermissions.some(
+        (perm) => Array.isArray(perm.conditions) && perm.conditions.length > 0
+      );
+      if (!shouldCheckConditions) {
+        return matchingPermissions.length > 0;
+      }
+      const { data, error } = await checkPermissions({
+        permissions: matchingPermissions.map((perm) => ({
+          action: perm.action,
+          subject: perm.subject
+        }))
+      });
+      if (error) {
+        throw error;
+      } else {
+        return data?.data.every((v) => v === true) ?? false;
+      }
+    },
+    [checkPermissions, userPermissions]
+  );
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      token,
+      user,
+      login,
+      logout,
+      permissions: userPermissions,
+      checkUserHasPermissions,
+      refetchPermissions,
+      setToken,
+      children
+    }
+  );
+};
+const storeToken = (token, persist) => {
+  if (!persist) {
+    return window.sessionStorage.setItem(STORAGE_KEYS.TOKEN, JSON.stringify(token));
+  }
+  return window.localStorage.setItem(STORAGE_KEYS.TOKEN, JSON.stringify(token));
+};
+
+const NotificationsContext = React.createContext({
+  toggleNotification: () => {
+  }
+});
+const NotificationsProvider = ({ children }) => {
+  const notificationIdRef = React.useRef(0);
+  const [notifications, setNotifications] = React.useState([]);
+  const toggleNotification = React.useCallback(
+    ({ type, message, link, timeout, blockTransition, onClose, title }) => {
+      setNotifications((s) => [
+        ...s,
+        {
+          id: notificationIdRef.current++,
+          type,
+          message,
+          link,
+          timeout,
+          blockTransition,
+          onClose,
+          title
+        }
+      ]);
+    },
+    []
+  );
+  const clearNotification = React.useCallback((id) => {
+    setNotifications((s) => s.filter((n) => n.id !== id));
+  }, []);
+  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);
+  return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        left: "50%",
+        marginLeft: "-250px",
+        position: "fixed",
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        top: `${46 / 16}rem`,
+        width: `${500 / 16}rem`,
+        zIndex: 10,
+        children: notifications.map((notification) => {
+          return /* @__PURE__ */ jsx(
+            Notification,
+            {
+              ...notification,
+              clearNotification
+            },
+            notification.id
+          );
+        })
+      }
+    ),
+    children
+  ] });
+};
+const Notification = ({
+  clearNotification,
+  blockTransition = false,
+  id,
+  link,
+  message,
+  onClose,
+  timeout = 2500,
+  title,
+  type
+}) => {
+  const { formatMessage } = useIntl();
+  const onCloseCallback = useCallbackRef(onClose);
+  const handleClose = React.useCallback(() => {
+    onCloseCallback();
+    clearNotification(id);
+  }, [clearNotification, id, onCloseCallback]);
+  React.useEffect(() => {
+    if (!blockTransition) {
+      const timeoutReference = setTimeout(() => {
+        handleClose();
+      }, timeout);
+      return () => {
+        clearTimeout(timeoutReference);
+      };
+    }
+  }, [blockTransition, handleClose, timeout]);
+  let variant;
+  let alertTitle;
+  if (type === "info") {
+    variant = "default";
+    alertTitle = formatMessage({
+      id: "notification.default.title",
+      defaultMessage: "Information:"
+    });
+  } else if (type === "danger") {
+    variant = "danger";
+    alertTitle = formatMessage({
+      id: "notification.warning.title",
+      defaultMessage: "Warning:"
+    });
+  } else if (type === "warning") {
+    variant = "warning";
+    alertTitle = formatMessage({
+      id: "notification.warning.title",
+      defaultMessage: "Warning:"
+    });
+  } else {
+    variant = "success";
+    alertTitle = formatMessage({
+      id: "notification.success.title",
+      defaultMessage: "Success:"
+    });
+  }
+  if (title) {
+    alertTitle = title;
+  }
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      action: link ? /* @__PURE__ */ jsx(Link, { href: link.url, isExternal: true, children: link.label }) : void 0,
+      onClose: handleClose,
+      closeLabel: formatMessage({
+        id: "global.close",
+        defaultMessage: "Close"
+      }),
+      title: alertTitle,
+      variant,
+      children: message
+    }
+  );
+};
+/**
+ * @preserve
+ * @description Returns an object to interact with the notification
+ * system. The callbacks are wrapped in `useCallback` for a stable
+ * identity.
+ *
+ * @example
+ * ```tsx
+ * import { useNotification } from '@strapi/strapi/admin';
+ *
+ * const MyComponent = () => {
+ *  const { toggleNotification } = useNotification();
+ *
+ *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;
+ */
+const useNotification = () => React.useContext(NotificationsContext);
+
+function getPrefixedId(message, callback) {
+  const prefixedMessage = `apiError.${message}`;
+  if (typeof callback === "function") {
+    return callback(prefixedMessage);
+  }
+  return prefixedMessage;
+}
+
+function normalizeError(error, { name, intlMessagePrefixCallback }) {
+  const { message } = error;
+  const normalizedError = {
+    id: getPrefixedId(message, intlMessagePrefixCallback),
+    defaultMessage: message,
+    name: error.name ?? name,
+    values: {}
+  };
+  if ("path" in error) {
+    normalizedError.values = { path: error.path.join(".") };
+  }
+  return normalizedError;
+}
+const validateErrorIsYupValidationError = (err) => typeof err.details === "object" && err.details !== null && "errors" in err.details;
+function normalizeAPIError(apiError, intlMessagePrefixCallback) {
+  const error = apiError.response?.data.error;
+  if (error) {
+    if (validateErrorIsYupValidationError(error)) {
+      return {
+        name: error.name,
+        message: error?.message || null,
+        errors: error.details.errors.map(
+          (err) => normalizeError(err, { name: error.name, intlMessagePrefixCallback })
+        )
+      };
+    }
+    return normalizeError(error, { intlMessagePrefixCallback });
+  }
+  return null;
+}
+
+function useAPIErrorHandler(intlMessagePrefixCallback) {
+  const { formatMessage } = useIntl();
+  const formatError = React.useCallback(
+    (error) => {
+      try {
+        const formattedErr = formatAPIError(error, { intlMessagePrefixCallback, formatMessage });
+        if (!formattedErr) {
+          return formatAxiosError(error, { intlMessagePrefixCallback, formatMessage });
+        }
+        return formattedErr;
+      } catch (_) {
+        throw new Error("formatAPIError: Unknown error:", error);
+      }
+    },
+    [formatMessage, intlMessagePrefixCallback]
+  );
+  return {
+    /**
+     * @alpha
+     * Convert ValidationErrors from the API into an object that can be used by forms.
+     */
+    _unstableFormatValidationErrors: React.useCallback(
+      (error) => {
+        if (typeof error.details === "object" && error.details !== null) {
+          if ("errors" in error.details && Array.isArray(error.details.errors)) {
+            const validationErrors = error.details.errors;
+            return validationErrors.reduce((acc, err) => {
+              const { path, message } = err;
+              return {
+                ...acc,
+                [path.join(".")]: message
+              };
+            }, {});
+          } else {
+            const details = error.details;
+            return Object.keys(details).reduce((acc, key) => {
+              const messages = details[key];
+              return {
+                ...acc,
+                [key]: messages.join(", ")
+              };
+            }, {});
+          }
+        } else {
+          return {};
+        }
+      },
+      []
+    ),
+    /**
+     * @alpha
+     * This handles the errors given from `redux-toolkit`'s axios based baseQuery function.
+     */
+    _unstableFormatAPIError: React.useCallback(
+      (error) => {
+        const err = {
+          response: {
+            data: {
+              error
+            }
+          }
+        };
+        if (!error.message) {
+          return "Unknown error occured.";
+        }
+        return formatError(err);
+      },
+      [formatError]
+    ),
+    formatAPIError: formatError
+  };
+}
+function formatAxiosError(error, { intlMessagePrefixCallback, formatMessage }) {
+  const { code, message } = error;
+  return formatMessage(
+    {
+      id: getPrefixedId(message, intlMessagePrefixCallback),
+      defaultMessage: message
+    },
+    {
+      code
+    }
+  );
+}
+function formatAPIError(error, { formatMessage, intlMessagePrefixCallback }) {
+  if (!formatMessage) {
+    throw new Error("The formatMessage callback is a mandatory argument.");
+  }
+  const normalizedError = normalizeAPIError(error, intlMessagePrefixCallback);
+  if (!normalizedError) {
+    return null;
+  }
+  if ("message" in normalizedError && normalizedError.message !== null) {
+    return normalizedError.message;
+  }
+  if ("errors" in normalizedError) {
+    return normalizedError.errors.map(({ id, defaultMessage, values }) => formatMessage({ id, defaultMessage }, values)).join("\n");
+  }
+  return formatMessage(normalizedError);
+}
+
+const PageMain = ({ children, ...restProps }) => {
+  return /* @__PURE__ */ jsx(Main, { ...restProps, children });
+};
+const Loading = ({ children = "Loading content." }) => {
+  return /* @__PURE__ */ jsx(PageMain, { height: "100vh", "aria-busy": true, children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(Loader, { children }) }) });
+};
+const Error$1 = (props) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(PageMain, { height: "100%", children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(
+    EmptyStateLayout,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, { as: ExclamationMarkCircle, width: "10rem" }),
+      content: formatMessage({
+        id: "anErrorOccurred",
+        defaultMessage: "Woops! Something went wrong. Please, try again."
+      }),
+      ...props
+    }
+  ) }) });
+};
+const NoPermissions = (props) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(PageMain, { height: "100%", children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { minWidth: "50%", children: /* @__PURE__ */ jsx(
+    EmptyStateLayout,
+    {
+      icon: /* @__PURE__ */ jsx(EmptyPermissions, { width: "10rem" }),
+      content: formatMessage({
+        id: "app.components.EmptyStateLayout.content-permissions",
+        defaultMessage: "You don't have the permissions to access that content"
+      }),
+      ...props
+    }
+  ) }) }) });
+};
+const NoData = (props) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(PageMain, { height: "100%", children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", width: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { minWidth: "50%", children: /* @__PURE__ */ jsx(
+    EmptyStateLayout,
+    {
+      icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" }),
+      content: formatMessage({
+        id: "app.components.EmptyStateLayout.content-document",
+        defaultMessage: "No content found"
+      }),
+      ...props
+    }
+  ) }) }) });
+};
+const Protect = ({ permissions = [], children }) => {
+  const userPermissions = useAuth("Protect", (state) => state.permissions);
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const matchingPermissions = userPermissions.filter(
+    (permission) => permissions.findIndex(
+      (perm) => perm.action === permission.action && perm.subject === permission.subject
+    ) >= 0
+  );
+  const shouldCheckConditions = matchingPermissions.some(
+    (perm) => Array.isArray(perm.conditions) && perm.conditions.length > 0
+  );
+  const { isLoading, error, data } = useCheckPermissionsQuery(
+    {
+      permissions: matchingPermissions.map((perm) => ({
+        action: perm.action,
+        subject: perm.subject
+      }))
+    },
+    {
+      skip: !shouldCheckConditions
+    }
+  );
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatAPIError(error)
+      });
+    }
+  }, [error, formatAPIError, toggleNotification]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Loading, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Error$1, {});
+  }
+  const { data: permissionsData } = data || {};
+  const canAccess = shouldCheckConditions && permissionsData ? !permissionsData.includes(false) : matchingPermissions.length > 0;
+  if (!canAccess) {
+    return /* @__PURE__ */ jsx(NoPermissions, {});
+  }
+  return typeof children === "function" ? children({ permissions: matchingPermissions }) : children;
+};
+const Title = ({ children: title }) => {
+  React.useEffect(() => {
+    document.title = `${title} | Strapi`;
+  }, [title]);
+  return null;
+};
+const Page = {
+  Error: Error$1,
+  Loading,
+  NoPermissions,
+  Protect,
+  NoData,
+  Main: PageMain,
+  Title
+};
+
+const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+const usePrev = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+const useRBAC = (permissionsToCheck = {}, passedPermissions) => {
+  const userPermissions = useAuth("useRBAC", (state) => state.permissions);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
+  const [data, setData] = useState();
+  const defaultAllowedActions = useMemo(
+    () => Object.keys(permissionsToCheck).reduce(
+      (acc, name) => ({
+        ...acc,
+        [name]: false
+      }),
+      {}
+    ),
+    [permissionsToCheck]
+  );
+  const checkUserHasPermissions = useAuth("useRBAC", (state) => state.checkUserHasPermissions);
+  const permssionsChecked = usePrev(permissionsToCheck);
+  useEffect(() => {
+    if (!isEqual(permssionsChecked, permissionsToCheck)) {
+      setIsLoading(true);
+      setData(void 0);
+      setError(void 0);
+      const permissionEntries = Object.entries(permissionsToCheck);
+      for (const [name, permissions] of permissionEntries) {
+        checkUserHasPermissions(permissions, passedPermissions).then((res) => {
+          if (res) {
+            setData((s) => ({
+              ...s,
+              [name]: res
+            }));
+          }
+        }).catch((err) => {
+          setError(err);
+        }).finally(() => {
+          setIsLoading(false);
+        });
+      }
+    }
+  }, [checkUserHasPermissions, passedPermissions, permissionsToCheck, permssionsChecked]);
+  const actions = {
+    ...defaultAllowedActions,
+    ...data
+  };
+  const allowedActions = Object.entries(actions).reduce((acc, [name, allowed]) => {
+    acc[`can${capitalise(name)}`] = allowed;
+    return acc;
+  }, {});
+  return { allowedActions, isLoading: isLoading || userPermissions.length === 0, error };
+};
+
+const [AppInfoProvider, useAppInfo] = createContext("AppInfo", {});
+
+const TrackingContext = React.createContext({
+  uuid: false
+});
+const TrackingProvider = ({ children }) => {
+  const token = useAuth("App", (state) => state.token);
+  const { data: initData } = useInitQuery();
+  const { uuid } = initData ?? {};
+  const { data } = useTelemetryPropertiesQuery(void 0, {
+    skip: !initData?.uuid || !token
+  });
+  React.useEffect(() => {
+    if (uuid && data) {
+      const event = "didInitializeAdministration";
+      try {
+        fetch("https://analytics.strapi.io/api/v2/track", {
+          method: "POST",
+          body: JSON.stringify({
+            // This event is anonymous
+            event,
+            userId: "",
+            eventPropeties: {},
+            groupProperties: { ...data, projectId: uuid }
+          }),
+          headers: {
+            "Content-Type": "application/json",
+            "X-Strapi-Event": event
+          }
+        });
+      } catch {
+      }
+    }
+  }, [data, uuid]);
+  const value = React.useMemo(
+    () => ({
+      uuid,
+      telemetryProperties: data
+    }),
+    [uuid, data]
+  );
+  return /* @__PURE__ */ jsx(TrackingContext.Provider, { value, children });
+};
+const useTracking = () => {
+  const { uuid, telemetryProperties } = React.useContext(TrackingContext);
+  const userId = useAppInfo("useTracking", (state) => state.userId);
+  const trackUsage = React.useCallback(
+    async (event, properties) => {
+      try {
+        if (uuid && !window.strapi.telemetryDisabled) {
+          const res = await axios.post(
+            "https://analytics.strapi.io/api/v2/track",
+            {
+              event,
+              userId,
+              eventProperties: { ...properties },
+              userProperties: {},
+              groupProperties: {
+                ...telemetryProperties,
+                projectId: uuid,
+                projectType: window.strapi.projectType
+              }
+            },
+            {
+              headers: {
+                "Content-Type": "application/json",
+                "X-Strapi-Event": event
+              }
+            }
+          );
+          return res;
+        }
+      } catch (err) {
+      }
+      return null;
+    },
+    [telemetryProperties, userId, uuid]
+  );
+  return { trackUsage };
+};
+
+const [ConfigurationContextProvider, useConfiguration] = createContext$1("ConfigurationContext");
+const ConfigurationProvider = ({
+  children,
+  defaultAuthLogo,
+  defaultMenuLogo,
+  showReleaseNotification = false,
+  showTutorials = false
+}) => {
+  const { trackUsage } = useTracking();
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const permissions = useTypedSelector(
+    (state) => state.admin_app.permissions.settings?.["project-settings"]
+  );
+  const token = useAuth("ConfigurationProvider", (state) => state.token);
+  const {
+    allowedActions: { canRead }
+  } = useRBAC(permissions);
+  const {
+    data: { authLogo: customAuthLogo, menuLogo: customMenuLogo } = {},
+    error,
+    isLoading
+  } = useInitQuery();
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({ id: "app.containers.App.notification.error.init" })
+      });
+    }
+  }, [error, formatMessage, toggleNotification]);
+  const { data, isSuccess } = useProjectSettingsQuery(void 0, {
+    skip: !token || !canRead
+  });
+  const [updateProjectSettingsMutation] = useUpdateProjectSettingsMutation();
+  const updateProjectSettings = React.useCallback(
+    async (body) => {
+      const formData = new FormData();
+      Object.entries(body).forEach(([key, value]) => {
+        if (value?.rawFile) {
+          formData.append(key, value.rawFile);
+        } else if (value === null) {
+          formData.append(key, JSON.stringify(value));
+        }
+      });
+      const res = await updateProjectSettingsMutation(formData);
+      if ("data" in res) {
+        const updatedMenuLogo = !!res.data.menuLogo && !!body.menuLogo?.rawFile;
+        const updatedAuthLogo = !!res.data.authLogo && !!body.authLogo?.rawFile;
+        if (updatedMenuLogo) {
+          trackUsage("didChangeLogo", {
+            logo: "menu"
+          });
+        }
+        if (updatedAuthLogo) {
+          trackUsage("didChangeLogo", {
+            logo: "auth"
+          });
+        }
+        toggleNotification({
+          type: "success",
+          message: formatMessage({ id: "app", defaultMessage: "Saved" })
+        });
+      } else {
+        toggleNotification({
+          type: "danger",
+          message: formatAPIError(res.error)
+        });
+      }
+    },
+    [formatAPIError, formatMessage, toggleNotification, trackUsage, updateProjectSettingsMutation]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsx(
+    ConfigurationContextProvider,
+    {
+      showReleaseNotification,
+      showTutorials,
+      logos: {
+        menu: {
+          custom: isSuccess ? data?.menuLogo : {
+            url: customMenuLogo ?? ""
+          },
+          default: defaultMenuLogo
+        },
+        auth: {
+          custom: isSuccess ? data?.authLogo : {
+            url: customAuthLogo ?? ""
+          },
+          default: defaultAuthLogo
+        }
+      },
+      updateProjectSettings,
+      children
+    }
+  );
+};
+
+const [StrapiAppProvider, useStrapiApp] = createContext("StrapiApp");
+
+const LanguageProvider = ({ children, messages }) => {
+  const locale = useTypedSelector((state) => state.admin_app.language.locale);
+  const appMessages = defaultsDeep(messages[locale], messages.en);
+  return /* @__PURE__ */ jsx(IntlProvider, { locale, defaultLocale: "en", messages: appMessages, textComponent: "span", children });
+};
+
+const Theme = ({ children, themes }) => {
+  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);
+  const [systemTheme, setSystemTheme] = React.useState();
+  const { locale } = useIntl();
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    const themeWatcher = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemTheme(themeWatcher.matches ? "dark" : "light");
+    const listener = (event) => {
+      setSystemTheme(event.matches ? "dark" : "light");
+    };
+    themeWatcher.addEventListener("change", listener);
+    return () => {
+      themeWatcher.removeEventListener("change", listener);
+    };
+  }, []);
+  React.useEffect(() => {
+    dispatch(setAvailableThemes(Object.keys(themes)));
+  }, [dispatch, themes]);
+  const computedThemeName = currentTheme === "system" ? systemTheme : currentTheme;
+  return /* @__PURE__ */ jsxs(
+    DesignSystemProvider,
+    {
+      locale,
+      theme: themes?.[computedThemeName || "light"],
+      children: [
+        children,
+        /* @__PURE__ */ jsx(GlobalStyle, {})
+      ]
+    }
+  );
+};
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+
+export { AuthProvider as A, useGetRegistrationInfoQuery as B, ConfigurationContextProvider as C, useRegisterAdminMutation as D, useRegisterUserMutation as E, useResetPasswordMutation as F, THEME_LOCAL_STORAGE_KEY as G, useTypedStore as H, LanguageProvider as L, NotificationsProvider as N, Page as P, StrapiAppProvider as S, Theme as T, useAuth as a, useTypedSelector as b, createTypedSelector as c, useTracking as d, useTypedDispatch as e, useAPIErrorHandler as f, useUpdateMeMutation as g, useIsSSOLockedQuery as h, useGetProviderOptionsQuery as i, useUpdateProviderOptionsMutation as j, useRBAC as k, useGetProvidersQuery as l, useAppInfo as m, useStrapiApp as n, useConfiguration as o, AppInfoProvider as p, capitalise as q, reducer as r, setAppTheme as s, createContext as t, useNotification as u, TrackingProvider as v, ConfigurationProvider as w, LANGUAGE_LOCAL_STORAGE_KEY as x, setLocale as y, useForgotPasswordMutation as z };
+//# sourceMappingURL=Theme-Gult7t3_.mjs.map