@strapi/admin 5.9.0 → 5.10.0

package/dist/admin/chunks/Theme-CDaBfQ-7.mjs

@@ -0,0 +1,1762 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMemo, useCallback, useRef, useEffect } from 'react';
+import { createContext as createContext$1 } from '@radix-ui/react-context';
+import { useIntl, IntlProvider } from 'react-intl';
+import { Flex, useCallbackRef, Alert, Link, Main, Loader, EmptyStateLayout, Box, DesignSystemProvider } from '@strapi/design-system';
+import { WarningCircle } from '@strapi/icons';
+import { EmptyPermissions, EmptyDocuments } from '@strapi/icons/symbols';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { parse, stringify } from 'qs';
+import { a as adminApi, e as useInitQuery, f as useTelemetryPropertiesQuery, g as useProjectSettingsQuery, h as useUpdateProjectSettingsMutation } from './admin-BBS7sDVu.mjs';
+import clone from 'lodash/clone';
+import toPath from 'lodash/toPath';
+import isEqual from 'lodash/isEqual';
+import axios from 'axios';
+import { produce } from 'immer';
+import get from 'lodash/get';
+import set from 'lodash/set';
+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';
+
+class RBAC {
+    use(middleware) {
+        if (Array.isArray(middleware)) {
+            this.middlewares.push(...middleware);
+        } else {
+            this.middlewares.push(middleware);
+        }
+    }
+    constructor(){
+        this.middlewares = [];
+        this.run = async (ctx, permissions)=>{
+            let index = 0;
+            const middlewaresToRun = this.middlewares.map((middleware)=>middleware(ctx));
+            const next = async (permissions)=>{
+                if (index < this.middlewares.length) {
+                    return middlewaresToRun[index++](next)(permissions);
+                }
+                return permissions;
+            };
+            return next(permissions);
+        };
+    }
+}
+
+/**
+ * @experimental
+ * @description Create a context provider and a hook to consume the context.
+ *
+ * @warning this may be removed to the design-system instead of becoming stable.
+ */ function createContext(rootComponentName, defaultContext) {
+    const Context = ContextSelector.createContext(defaultContext);
+    const Provider = (props)=>{
+        const { children, ...context } = props;
+        // Only re-memoize when prop values change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const value = React.useMemo(()=>context, Object.values(context));
+        return /*#__PURE__*/ jsx(Context.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    function useContext(consumerName, selector) {
+        return ContextSelector.useContextSelector(Context, (ctx)=>{
+            if (ctx) return selector(ctx);
+            // it's a required context.
+            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 [StrapiAppProvider, useStrapiApp] = createContext('StrapiApp');
+
+const useQueryParams = (initialParams)=>{
+    const { search } = useLocation();
+    const navigate = useNavigate();
+    const query = useMemo(()=>{
+        // TODO: investigate why sometimes we're getting the search with a leading `?` and sometimes not.
+        const searchQuery = search.startsWith('?') ? search.slice(1) : search;
+        if (!search && initialParams) {
+            return initialParams;
+        }
+        return {
+            ...initialParams,
+            ...parse(searchQuery)
+        };
+    }, [
+        search,
+        initialParams
+    ]);
+    const setQuery = useCallback((nextParams, method = 'push', replace = false)=>{
+        let nextQuery = {
+            ...query
+        };
+        if (method === 'remove') {
+            Object.keys(nextParams).forEach((key)=>{
+                if (Object.prototype.hasOwnProperty.call(nextQuery, key)) {
+                    // @ts-expect-error – this is fine, if you want to fix it, please do.
+                    delete nextQuery[key];
+                }
+            });
+        } else {
+            nextQuery = {
+                ...query,
+                ...nextParams
+            };
+        }
+        navigate({
+            search: stringify(nextQuery, {
+                encode: false
+            })
+        }, {
+            replace
+        });
+    }, [
+        navigate,
+        query
+    ]);
+    return [
+        {
+            query,
+            rawQuery: search
+        },
+        setQuery
+    ];
+};
+
+const STORAGE_KEYS$1 = {
+    TOKEN: 'jwtToken',
+    USER: 'userInfo'
+};
+const THEME_LOCAL_STORAGE_KEY = 'STRAPI_THEME';
+const LANGUAGE_LOCAL_STORAGE_KEY = 'strapi-admin-language';
+const getStoredToken = ()=>{
+    const token = localStorage.getItem(STORAGE_KEYS$1.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS$1.TOKEN);
+    if (typeof token === 'string') {
+        return JSON.parse(token);
+    }
+    return null;
+};
+const adminSlice = createSlice({
+    name: 'admin',
+    initialState: ()=>{
+        return {
+            language: {
+                locale: 'en',
+                localeNames: {
+                    en: 'English'
+                }
+            },
+            permissions: {},
+            theme: {
+                availableThemes: [],
+                currentTheme: localStorage.getItem(THEME_LOCAL_STORAGE_KEY) || 'system'
+            },
+            token: null
+        };
+    },
+    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);
+        },
+        setToken (state, action) {
+            state.token = action.payload;
+        },
+        login (state, action) {
+            const { token, persist } = action.payload;
+            if (!persist) {
+                window.sessionStorage.setItem(STORAGE_KEYS$1.TOKEN, JSON.stringify(token));
+            } else {
+                window.localStorage.setItem(STORAGE_KEYS$1.TOKEN, JSON.stringify(token));
+            }
+            state.token = token;
+        },
+        logout (state) {
+            state.token = null;
+            window.localStorage.removeItem(STORAGE_KEYS$1.TOKEN);
+            window.localStorage.removeItem(STORAGE_KEYS$1.USER);
+            window.sessionStorage.removeItem(STORAGE_KEYS$1.TOKEN);
+            window.sessionStorage.removeItem(STORAGE_KEYS$1.USER);
+        }
+    }
+});
+const reducer$1 = adminSlice.reducer;
+const { setAppTheme, setAvailableThemes, setLocale, setToken, logout, login } = adminSlice.actions;
+
+const authService = adminApi.enhanceEndpoints({
+    addTagTypes: [
+        'User',
+        'Me',
+        'ProvidersOptions'
+    ]
+}).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 = [], _disableRenewToken = false })=>{
+    const dispatch = useTypedDispatch();
+    const runRbacMiddleware = useStrapiApp('AuthProvider', (state)=>state.rbac.run);
+    const location = useLocation();
+    const [{ rawQuery }] = useQueryParams();
+    const token = useTypedSelector((state)=>state.admin_app.token ?? null);
+    const { data: user, isLoading: isLoadingUser } = useGetMeQuery(undefined, {
+        /**
+     * 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, isLoading: isLoadingPermissions } = useGetMyPermissionsQuery(undefined, {
+        skip: !token
+    });
+    const navigate = useNavigate();
+    const [loginMutation] = useLoginMutation();
+    const [renewTokenMutation] = useRenewTokenMutation();
+    const [logoutMutation] = useLogoutMutation();
+    const clearStateAndLogout = React.useCallback(()=>{
+        dispatch(adminApi.util.resetApiState());
+        dispatch(logout());
+        navigate('/auth/login');
+    }, [
+        dispatch,
+        navigate
+    ]);
+    /**
+   * Fetch data from storages on mount and store it in our state.
+   * It's not normally stored in session storage unless the user
+   * does click "remember me" when they login. We also need to renew the token.
+   */ React.useEffect(()=>{
+        if (token && !_disableRenewToken) {
+            renewTokenMutation({
+                token
+            }).then((res)=>{
+                if ('data' in res) {
+                    dispatch(login({
+                        token: res.data.token
+                    }));
+                } else {
+                    clearStateAndLogout();
+                }
+            });
+        }
+    }, [
+        token,
+        dispatch,
+        renewTokenMutation,
+        clearStateAndLogout,
+        _disableRenewToken
+    ]);
+    React.useEffect(()=>{
+        if (user) {
+            if (user.preferedLanguage) {
+                dispatch(setLocale(user.preferedLanguage));
+            }
+        }
+    }, [
+        dispatch,
+        user
+    ]);
+    React.useEffect(()=>{
+        /**
+     * This will log a user out of all tabs if they log out in one tab.
+     */ const handleUserStorageChange = (event)=>{
+            if (event.key === STORAGE_KEYS.USER && event.newValue === null) {
+                clearStateAndLogout();
+            }
+        };
+        window.addEventListener('storage', handleUserStorageChange);
+        return ()=>{
+            window.removeEventListener('storage', handleUserStorageChange);
+        };
+    });
+    const login$1 = React.useCallback(async ({ rememberMe, ...body })=>{
+        const res = await loginMutation(body);
+        /**
+       * There will always be a `data` key in the response
+       * because if something fails, it will throw an error.
+       */ if ('data' in res) {
+            const { token } = res.data;
+            dispatch(login({
+                token,
+                persist: rememberMe
+            }));
+        }
+        return res;
+    }, [
+        dispatch,
+        loginMutation
+    ]);
+    const logout$1 = React.useCallback(async ()=>{
+        await logoutMutation();
+        clearStateAndLogout();
+    }, [
+        clearStateAndLogout,
+        logoutMutation
+    ]);
+    const refetchPermissions = React.useCallback(async ()=>{
+        if (!isUninitialized) {
+            await refetch();
+        }
+    }, [
+        isUninitialized,
+        refetch
+    ]);
+    const [checkPermissions] = useLazyCheckPermissionsQuery();
+    const checkUserHasPermissions = React.useCallback(async (permissions, passedPermissions, // TODO:
+    // Here we have parameterised checkUserHasPermissions in order to pass
+    // query context from elsewhere in the application.
+    // See packages/core/content-manager/admin/src/features/DocumentRBAC.tsx
+    // This is in order to calculate permissions on accurate query params.
+    // We should be able to rely on the query params in this provider
+    // If we need to pass additional context to the RBAC middleware
+    // we should define a better context type.
+    rawQueryContext)=>{
+        /**
+       * If there's no permissions to check, then we allow it to
+       * pass to preserve existing behaviours.
+       *
+       * TODO: should we review this? it feels more dangerous than useful.
+       */ if (!permissions || permissions.length === 0) {
+            return [
+                {
+                    action: '',
+                    subject: ''
+                }
+            ];
+        }
+        /**
+       * Given the provided permissions, return the permissions from either passedPermissions
+       * or userPermissions as this is expected to be the full permission entity.
+       */ const actualUserPermissions = passedPermissions ?? userPermissions;
+        const matchingPermissions = actualUserPermissions.filter((permission)=>permissions.findIndex((perm)=>perm.action === permission.action && perm.subject === permission.subject) >= 0);
+        const middlewaredPermissions = await runRbacMiddleware({
+            user,
+            permissions: userPermissions,
+            pathname: location.pathname,
+            search: (rawQueryContext || rawQuery).split('?')[1] ?? ''
+        }, matchingPermissions);
+        const shouldCheckConditions = middlewaredPermissions.some((perm)=>Array.isArray(perm.conditions) && perm.conditions.length > 0);
+        if (!shouldCheckConditions) {
+            return middlewaredPermissions;
+        }
+        const { data, error } = await checkPermissions({
+            permissions: middlewaredPermissions.map((perm)=>({
+                    action: perm.action,
+                    subject: perm.subject
+                }))
+        });
+        if (error) {
+            throw error;
+        } else {
+            return middlewaredPermissions.filter((_, index)=>data?.data[index] === true);
+        }
+    }, [
+        checkPermissions,
+        location.pathname,
+        rawQuery,
+        runRbacMiddleware,
+        user,
+        userPermissions
+    ]);
+    const isLoading = isLoadingUser || isLoadingPermissions;
+    return /*#__PURE__*/ jsx(Provider, {
+        token: token,
+        user: user,
+        login: login$1,
+        logout: logout$1,
+        permissions: userPermissions,
+        checkUserHasPermissions: checkUserHasPermissions,
+        refetchPermissions: refetchPermissions,
+        isLoading: isLoading,
+        children: children
+    });
+};
+
+const NotificationsContext = /*#__PURE__*/ React.createContext({
+    toggleNotification: ()=>{}
+});
+/**
+ * @internal
+ * @description DO NOT USE. This will be removed before stable release of v5.
+ */ 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: value,
+        children: [
+            /*#__PURE__*/ jsx(Flex, {
+                left: "50%",
+                marginLeft: "-250px",
+                position: "fixed",
+                direction: "column",
+                alignItems: "stretch",
+                gap: 2,
+                top: `4.6rem`,
+                width: `50rem`,
+                zIndex: "notification",
+                children: notifications.map((notification)=>{
+                    return /*#__PURE__*/ jsx(Notification, {
+                        ...notification,
+                        clearNotification: clearNotification
+                    }, notification.id);
+                })
+            }),
+            children
+        ]
+    });
+};
+const Notification = ({ clearNotification, blockTransition = false, id, link, message, onClose, timeout = 2500, title, type })=>{
+    const { formatMessage } = useIntl();
+    /**
+   * Chances are `onClose` won't be classed as stabilised,
+   * so we use `useCallbackRef` to avoid make it stable.
+   */ const onCloseCallback = useCallbackRef(onClose);
+    const handleClose = React.useCallback(()=>{
+        onCloseCallback();
+        clearNotification(id);
+    }, [
+        clearNotification,
+        id,
+        onCloseCallback
+    ]);
+    // eslint-disable-next-line consistent-return
+    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
+        }) : undefined,
+        onClose: handleClose,
+        closeLabel: formatMessage({
+            id: 'global.close',
+            defaultMessage: 'Close'
+        }),
+        title: alertTitle,
+        variant: variant,
+        children: message
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Hook
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * @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);
+
+/**
+ * Prefix message with 'apiError.'
+ */ function getPrefixedId(message, callback) {
+    const prefixedMessage = `apiError.${message}`;
+    // if a prefix function has been passed in it is used to
+    // prefix the id, e.g. to allow an error message to be
+    // set only for a localization namespace
+    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;
+/**
+ * Normalize the format of `ResponseError`
+ * in places where the hook `useAPIErrorHandler` can not called
+ * (e.g. outside of a React component).
+ */ function normalizeAPIError(apiError, intlMessagePrefixCallback) {
+    const error = apiError.response?.data?.error;
+    if (error) {
+        // some errors carry multiple errors (such as ValidationError)
+        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;
+}
+
+/**
+ * Deeply get a value from an object via its path.
+ */ function getIn(obj, key, def, pathStartIndex = 0) {
+    const path = toPath(key);
+    while(obj && pathStartIndex < path.length){
+        obj = obj[path[pathStartIndex++]];
+    }
+    // check if path is not in the end
+    if (pathStartIndex !== path.length && !obj) {
+        return def;
+    }
+    return obj === undefined ? def : obj;
+}
+/** @internal is the given object an Object? */ const isObject = (obj)=>obj !== null && typeof obj === 'object' && !Array.isArray(obj);
+/** @internal is the given object an integer? */ const isInteger = (obj)=>String(Math.floor(Number(obj))) === obj;
+/**
+ * Deeply set a value from in object via its path. If the value at `path`
+ * has changed, return a shallow copy of obj with `value` set at `path`.
+ * If `value` has not changed, return the original `obj`.
+ *
+ * Existing objects / arrays along `path` are also shallow copied. Sibling
+ * objects along path retain the same internal js reference. Since new
+ * objects / arrays are only created along `path`, we can test if anything
+ * changed in a nested structure by comparing the object's reference in
+ * the old and new object, similar to how russian doll cache invalidation
+ * works.
+ *
+ * In earlier versions of this function, which used cloneDeep, there were
+ * issues whereby settings a nested value would mutate the parent
+ * instead of creating a new object. `clone` avoids that bug making a
+ * shallow copy of the objects along the update path
+ * so no object is mutated in place.
+ *
+ * Before changing this function, please read through the following
+ * discussions.
+ *
+ * @see https://github.com/developit/linkstate
+ * @see https://github.com/jaredpalmer/formik/pull/123
+ */ function setIn(obj, path, value) {
+    const res = clone(obj); // this keeps inheritance when obj is a class
+    let resVal = res;
+    let i = 0;
+    const pathArray = toPath(path);
+    for(; i < pathArray.length - 1; i++){
+        const currentPath = pathArray[i];
+        const currentObj = getIn(obj, pathArray.slice(0, i + 1));
+        if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {
+            resVal = resVal[currentPath] = clone(currentObj);
+        } else {
+            const nextPath = pathArray[i + 1];
+            resVal = resVal[currentPath] = isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
+        }
+    }
+    // Return original object if new value is the same as current
+    if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
+        return obj;
+    }
+    if (value === undefined) {
+        delete resVal[pathArray[i]];
+    } else {
+        resVal[pathArray[i]] = value;
+    }
+    // If the path array has a single element, the loop did not run.
+    // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.
+    if (i === 0 && value === undefined) {
+        delete res[pathArray[i]];
+    }
+    return res;
+}
+
+/**
+ * @public
+ * @description The purpose of this hook is to offer a unified way to handle errors thrown by API endpoints, regardless of the type of error (`ValidationError`, `ApplicationErrror` ...)
+that has been thrown.
+ * @example
+ * ```tsx
+ * import * as React from 'react';
+ * import { useFetchClient, useAPIErrorHandler, useNotification } from '@strapi/admin/admin';
+ *
+ * const MyComponent = () => {
+ *   const { get } = useFetchClient();
+ *   const { formatAPIError } = useAPIErrorHandler(getTrad);
+ *   const { toggleNotification } = useNotification();
+ *
+ *   const handleDeleteItem = async () => {
+ *     try {
+ *       return await get('/admin');
+ *     } catch (error) {
+ *       toggleNotification({
+ *         type: 'danger',
+ *         message: formatAPIError(error),
+ *       });
+ *     }
+ *   };
+ *   return <button onClick={handleDeleteItem}>Delete item</button>;
+ * };
+ * ```
+ */ function useAPIErrorHandler(intlMessagePrefixCallback) {
+    const { formatMessage } = useIntl();
+    /**
+   * @description This method try to normalize the passed error
+   * and then call formatAPIError to stringify the ResponseObject
+   * into a string. If it fails it will call formatFetchError and
+   * return the error message.
+   */ const formatError = React.useCallback((error)=>{
+        // Try to normalize the passed error first. This will fail for e.g. network
+        // errors which are thrown by fetchClient directly.
+        try {
+            const formattedErr = formatAPIError(error, {
+                intlMessagePrefixCallback,
+                formatMessage
+            });
+            if (!formattedErr) {
+                return formatFetchError(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 setIn(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
+                    }
+                }
+            };
+            /**
+         * There's a chance with SerializedErrors that the message is not set.
+         * In that case we return a generic error message.
+         */ if (!error.message) {
+                return 'Unknown error occured.';
+            }
+            return formatError(err);
+        }, [
+            formatError
+        ]),
+        formatAPIError: formatError
+    };
+}
+function formatFetchError(error, { intlMessagePrefixCallback, formatMessage }) {
+    const { code, message } = error;
+    return formatMessage({
+        id: getPrefixedId(message, intlMessagePrefixCallback),
+        defaultMessage: message
+    }, {
+        code
+    });
+}
+/**
+ * @description This method stringifies the `ResponseObject` into
+ * a string. If multiple errors are thrown by the API, which
+ * happens e.g.in the case of a `ValidationError`, all errors
+ * will bo concatenated into a single string.
+ */ 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;
+    }
+    // stringify multiple errors
+    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: children
+    });
+};
+/**
+ * @public
+ * @description A loading component that should be rendered as the page
+ * whilst you load the content for the aforementioned page.
+ */ 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: children
+            })
+        })
+    });
+};
+/**
+ * TODO: should we start passing our errors here so they're persisted on the screen?
+ * This could follow something similar to how the global app error works...?
+ */ /**
+ * @public
+ * @description An error component that should be rendered as the page
+ * when an error occurs.
+ */ 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(WarningCircle, {
+                    width: "16rem"
+                }),
+                content: formatMessage({
+                    id: 'anErrorOccurred',
+                    defaultMessage: 'Whoops! Something went wrong. Please, try again.'
+                }),
+                ...props
+            })
+        })
+    });
+};
+/**
+ * @public
+ * @description A component that should be rendered as the page
+ * when the user does not have the permissions to access the content.
+ * This component does not check any permissions, it's up to you to decide
+ * when it should be rendered.
+ */ 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: "16rem"
+                    }),
+                    content: formatMessage({
+                        id: 'app.components.EmptyStateLayout.content-permissions',
+                        defaultMessage: "You don't have the permissions to access that content"
+                    }),
+                    ...props
+                })
+            })
+        })
+    });
+};
+/**
+ * @public
+ * @description A component that should be rendered as the page
+ * when there is no data available to display.
+ * This component does not check any permissions, it's up to you to decide
+ * when it should be rendered.
+ */ const NoData = (props)=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(PageMain, {
+        height: "100%",
+        background: "neutral100",
+        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: "16rem"
+                    }),
+                    action: props.action,
+                    content: formatMessage({
+                        id: 'app.components.EmptyStateLayout.content-document',
+                        defaultMessage: 'No content found'
+                    }),
+                    ...props
+                })
+            })
+        })
+    });
+};
+/**
+ * @public
+ * @description A wrapper component that should be used to protect a page. It will check the permissions
+ * you pass to it and render the children if the user has the required permissions. If a user does not have ALL
+ * the required permissions, it will redirect the user to the home page. Whilst these checks happen it will render
+ * the loading component and should the check fail it will render the error component with a notification.
+ */ 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 /*#__PURE__*/ jsx(Fragment, {
+        children: typeof children === 'function' ? children({
+            permissions: matchingPermissions
+        }) : children
+    });
+};
+/**
+ * @public
+ * @description This component takes the children (must be a string) and sets
+ * it as the title of the html.
+ */ 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 once = (fn)=>{
+    const func = fn;
+    let called = false;
+    if (typeof func !== 'function') {
+        throw new TypeError(`once requires a function parameter`);
+    }
+    return (...args)=>{
+        if (!called && process.env.NODE_ENV === 'development') {
+            func(...args);
+            called = true;
+        }
+    };
+};
+
+const capitalise = (str)=>str.charAt(0).toUpperCase() + str.slice(1);
+
+const usePrev = (value)=>{
+    const ref = useRef();
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
+
+/**
+ * @public
+ * @description This hooks takes an object or array of permissions (the latter preferred) and
+ * runs through them to match against the current user's permissions as well as the RBAC middleware
+ * system checking any conditions that may be present. It returns the filtered permissions as the complete
+ * object from the API and a set of actions that can be performed. An action is derived from the last part
+ * of the permission action e.g. `admin::roles.create` would be `canCreate`. If there's a hyphen in the action
+ * this is removed and capitalised e.g `admin::roles.create-draft` would be `canCreateDraft`.
+ * @example
+ * ```tsx
+ * import { Page, useRBAC } from '@strapi/strapi/admin'
+ *
+ * const MyProtectedPage = () => {
+ *  const { allowedActions, isLoading, error, permissions } = useRBAC([{ action: 'admin::roles.create' }])
+ *
+ *  if(isLoading) {
+ *    return <Page.Loading />
+ *  }
+ *
+ *  if(error){
+ *    return <Page.Error />
+ *  }
+ *
+ *  if(!allowedActions.canCreate) {
+ *    return null
+ *  }
+ *
+ *  return <MyPage permissions={permissions} />
+ * }
+ * ```
+ */ const useRBAC = (permissionsToCheck = [], passedPermissions, rawQueryContext)=>{
+    const isLoadingAuth = useAuth('useRBAC', (state)=>state.isLoading);
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [error, setError] = React.useState();
+    const [data, setData] = React.useState();
+    const warnOnce = React.useMemo(()=>once(console.warn), []);
+    const actualPermissionsToCheck = React.useMemo(()=>{
+        if (Array.isArray(permissionsToCheck)) {
+            return permissionsToCheck;
+        } else {
+            warnOnce('useRBAC: The first argument should be an array of permissions, not an object. This will be deprecated in the future.');
+            return Object.values(permissionsToCheck).flat();
+        }
+    }, [
+        permissionsToCheck,
+        warnOnce
+    ]);
+    /**
+   * This is the default value we return until the queryResults[i].data
+   * are all resolved with data. This preserves the original behaviour.
+   */ const defaultAllowedActions = React.useMemo(()=>{
+        return actualPermissionsToCheck.reduce((acc, permission)=>{
+            return {
+                ...acc,
+                [getActionName(permission)]: false
+            };
+        }, {});
+    }, [
+        actualPermissionsToCheck
+    ]);
+    const checkUserHasPermissions = useAuth('useRBAC', (state)=>state.checkUserHasPermissions);
+    const permssionsChecked = usePrev(actualPermissionsToCheck);
+    const contextChecked = usePrev(rawQueryContext);
+    React.useEffect(()=>{
+        if (!isEqual(permssionsChecked, actualPermissionsToCheck) || // TODO: also run this when the query context changes
+        contextChecked !== rawQueryContext) {
+            setIsLoading(true);
+            setData(undefined);
+            setError(undefined);
+            checkUserHasPermissions(actualPermissionsToCheck, passedPermissions, rawQueryContext).then((res)=>{
+                if (res) {
+                    setData(res.reduce((acc, permission)=>{
+                        return {
+                            ...acc,
+                            [getActionName(permission)]: true
+                        };
+                    }, {}));
+                }
+            }).catch((err)=>{
+                setError(err);
+            }).finally(()=>{
+                setIsLoading(false);
+            });
+        }
+    }, [
+        actualPermissionsToCheck,
+        checkUserHasPermissions,
+        passedPermissions,
+        permissionsToCheck,
+        permssionsChecked,
+        contextChecked,
+        rawQueryContext
+    ]);
+    /**
+   * This hook originally would not return allowedActions
+   * until all the checks were complete.
+   */ const allowedActions = Object.entries({
+        ...defaultAllowedActions,
+        ...data
+    }).reduce((acc, [name, allowed])=>{
+        acc[`can${capitalise(name)}`] = allowed;
+        return acc;
+    }, {});
+    return {
+        allowedActions,
+        permissions: actualPermissionsToCheck,
+        isLoading: isLoading || isLoadingAuth,
+        error
+    };
+};
+const getActionName = (permission)=>{
+    const [action = ''] = permission.action.split('.').slice(-1);
+    return action.split('-').map(capitalise).join('');
+};
+
+const [AppInfoProvider, useAppInfo] = createContext('AppInfo', {});
+
+/* -------------------------------------------------------------------------------------------------
+ * Context
+ * -----------------------------------------------------------------------------------------------*/ const TrackingContext = /*#__PURE__*/ React.createContext({
+    uuid: false
+});
+const TrackingProvider = ({ children })=>{
+    const token = useAuth('App', (state)=>state.token);
+    const { data: initData } = useInitQuery();
+    const { uuid } = initData ?? {};
+    const { data } = useTelemetryPropertiesQuery(undefined, {
+        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  {
+            // silence is golden
+            }
+        }
+    }, [
+        data,
+        uuid
+    ]);
+    const value = React.useMemo(()=>({
+            uuid,
+            telemetryProperties: data
+        }), [
+        uuid,
+        data
+    ]);
+    return /*#__PURE__*/ jsx(TrackingContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+/**
+ * @description Used to send amplitude events to the Strapi Tracking hub.
+ *
+ * @example
+ * ```tsx
+ * import { useTracking } from '@strapi/strapi/admin';
+ *
+ * const MyComponent = () => {
+ *  const { trackUsage } = useTracking();
+ *
+ *  const handleClick = () => {
+ *   trackUsage('my-event', { myProperty: 'myValue' });
+ *  }
+ *
+ *  return <button onClick={handleClick}>Send Event</button>
+ * }
+ * ```
+ */ 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) {
+        // Silence is golden
+        }
+        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(undefined, {
+        skip: !token || !canRead
+    });
+    const [updateProjectSettingsMutation] = useUpdateProjectSettingsMutation();
+    const updateProjectSettings = React.useCallback(async (body)=>{
+        const formData = new FormData();
+        /**
+       * We either only send files or we send null values.
+       * Null removes the logo. If you don't want to effect
+       * an existing logo, don't send anything.
+       */ 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: showReleaseNotification,
+        showTutorials: showTutorials,
+        logos: {
+            menu: {
+                custom: isSuccess ? data?.menuLogo : {
+                    url: customMenuLogo ?? ''
+                },
+                default: defaultMenuLogo
+            },
+            auth: {
+                custom: isSuccess ? data?.authLogo : {
+                    url: customAuthLogo ?? ''
+                },
+                default: defaultAuthLogo
+            }
+        },
+        updateProjectSettings: updateProjectSettings,
+        children: children
+    });
+};
+
+const GUIDED_TOUR_COMPLETED_STEPS = 'GUIDED_TOUR_COMPLETED_STEPS';
+const GUIDED_TOUR_CURRENT_STEP = 'GUIDED_TOUR_CURRENT_STEP';
+const GUIDED_TOUR_SKIPPED = 'GUIDED_TOUR_SKIPPED';
+const [GuidedTourProviderImpl, useGuidedTour] = createContext('GuidedTour');
+const GuidedTourProvider = ({ children })=>{
+    const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] = React.useReducer(reducer, initialState, initialiseState);
+    const setCurrentStep = (step)=>{
+        // if step is null it is intentional, we need to dispatch it
+        if (step !== null) {
+            const isStepAlreadyDone = get(guidedTourState, step);
+            const [sectionName, stepName] = step.split('.');
+            const sectionArray = Object.entries(guidedTourState[sectionName]);
+            const currentStepIndex = sectionArray.findIndex(([key])=>key === stepName);
+            const previousSteps = sectionArray.slice(0, currentStepIndex);
+            const isStepToShow = previousSteps.every(([, sectionValue])=>sectionValue);
+            if (isStepAlreadyDone || isSkipped || !isStepToShow) {
+                return null;
+            }
+        }
+        window.localStorage.setItem(GUIDED_TOUR_CURRENT_STEP, JSON.stringify(null));
+        return dispatch({
+            type: 'SET_CURRENT_STEP',
+            step
+        });
+    };
+    const setGuidedTourVisibility = (value)=>{
+        dispatch({
+            type: 'SET_GUIDED_TOUR_VISIBILITY',
+            value
+        });
+    };
+    const setStepState = (currentStep, value)=>{
+        addCompletedStep(currentStep);
+        dispatch({
+            type: 'SET_STEP_STATE',
+            currentStep,
+            value
+        });
+    };
+    const startSection = (sectionName)=>{
+        const sectionSteps = guidedTourState[sectionName];
+        if (sectionSteps) {
+            const guidedTourArray = Object.entries(guidedTourState);
+            // Find current section position in the guidedTourArray
+            // Get only previous sections based on current section position
+            const currentSectionIndex = guidedTourArray.findIndex(([key])=>key === sectionName);
+            const previousSections = guidedTourArray.slice(0, currentSectionIndex);
+            // Check if every steps from previous section are done
+            const isSectionToShow = previousSections.every(([, sectionValue])=>Object.values(sectionValue).every(Boolean));
+            const [firstStep] = Object.keys(sectionSteps);
+            const isFirstStepDone = sectionSteps[firstStep];
+            if (isSectionToShow && !currentStep && !isFirstStepDone) {
+                setCurrentStep(`${sectionName}.${firstStep}`);
+            }
+        }
+    };
+    const setSkipped = (value)=>{
+        window.localStorage.setItem(GUIDED_TOUR_SKIPPED, JSON.stringify(value));
+        dispatch({
+            type: 'SET_SKIPPED',
+            value
+        });
+    };
+    return /*#__PURE__*/ jsx(GuidedTourProviderImpl, {
+        guidedTourState: guidedTourState,
+        currentStep: currentStep,
+        setCurrentStep: setCurrentStep,
+        setGuidedTourVisibility: setGuidedTourVisibility,
+        setSkipped: setSkipped,
+        setStepState: setStepState,
+        startSection: startSection,
+        isGuidedTourVisible: isGuidedTourVisible,
+        isSkipped: isSkipped,
+        children: children
+    });
+};
+const initialState = {
+    currentStep: null,
+    guidedTourState: {
+        contentTypeBuilder: {
+            create: false,
+            success: false
+        },
+        contentManager: {
+            create: false,
+            success: false
+        },
+        apiTokens: {
+            create: false,
+            success: false
+        }
+    },
+    isGuidedTourVisible: false,
+    isSkipped: false
+};
+const reducer = (state = initialState, action)=>produce(state, (draftState)=>{
+        switch(action.type){
+            case 'SET_CURRENT_STEP':
+                {
+                    draftState.currentStep = action.step;
+                    break;
+                }
+            case 'SET_STEP_STATE':
+                {
+                    const [section, step] = action.currentStep.split('.');
+                    draftState.guidedTourState[section][step] = action.value;
+                    break;
+                }
+            case 'SET_SKIPPED':
+                {
+                    draftState.isSkipped = action.value;
+                    break;
+                }
+            case 'SET_GUIDED_TOUR_VISIBILITY':
+                {
+                    draftState.isGuidedTourVisible = action.value;
+                    break;
+                }
+            default:
+                {
+                    return draftState;
+                }
+        }
+    });
+const initialiseState = (initialState)=>{
+    const copyInitialState = {
+        ...initialState
+    };
+    const guidedTourLocaleStorage = JSON.parse(window.localStorage.getItem(GUIDED_TOUR_COMPLETED_STEPS) ?? '[]');
+    const currentStepLocaleStorage = JSON.parse(window.localStorage.getItem(GUIDED_TOUR_CURRENT_STEP) ?? 'null');
+    const skippedLocaleStorage = JSON.parse(window.localStorage.getItem(GUIDED_TOUR_SKIPPED) ?? 'null');
+    if (Array.isArray(guidedTourLocaleStorage)) {
+        guidedTourLocaleStorage.forEach((step)=>{
+            const [sectionName, stepName] = step.split('.');
+            set(copyInitialState, [
+                'guidedTourState',
+                sectionName,
+                stepName
+            ], true);
+        });
+    }
+    // if current step when initializing mark it as done
+    if (currentStepLocaleStorage) {
+        const [sectionName, stepName] = currentStepLocaleStorage.split('.');
+        set(copyInitialState, [
+            'guidedTourState',
+            sectionName,
+            stepName
+        ], true);
+        addCompletedStep(currentStepLocaleStorage);
+        window.localStorage.setItem(GUIDED_TOUR_CURRENT_STEP, JSON.stringify(null));
+    }
+    if (skippedLocaleStorage !== null) {
+        set(copyInitialState, 'isSkipped', skippedLocaleStorage);
+    }
+    return copyInitialState;
+};
+/**
+ * @description Add a completed step to the local storage if it does not already exist.
+ */ const addCompletedStep = (completedStep)=>{
+    const currentSteps = JSON.parse(window.localStorage.getItem(GUIDED_TOUR_COMPLETED_STEPS) ?? '[]');
+    if (!Array.isArray(currentSteps)) {
+        return;
+    }
+    const isAlreadyStored = currentSteps.includes(completedStep);
+    if (isAlreadyStored) {
+        return;
+    }
+    window.localStorage.setItem(GUIDED_TOUR_COMPLETED_STEPS, JSON.stringify([
+        ...currentSteps,
+        completedStep
+    ]));
+};
+
+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: locale,
+        defaultLocale: "en",
+        messages: appMessages,
+        textComponent: "span",
+        children: children
+    });
+};
+
+const Theme = ({ children, themes })=>{
+    const { currentTheme } = useTypedSelector((state)=>state.admin_app.theme);
+    const [systemTheme, setSystemTheme] = React.useState();
+    const { locale } = useIntl();
+    const dispatch = useDispatch();
+    // Listen to changes in the system theme
+    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);
+        // Remove listener on cleanup
+        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: locale,
+        /**
+       * TODO: could we make this neater i.e. by setting up the context to throw
+       * if it can't find it, that way the type is always fully defined and we're
+       * not checking it all the time...
+       */ theme: themes?.[computedThemeName || 'light'],
+        children: [
+            children,
+            /*#__PURE__*/ jsx(GlobalStyle, {})
+        ]
+    });
+};
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme })=>theme.colors.neutral100};
+  }
+`;
+
+export { AuthProvider as A, TrackingProvider as B, ConfigurationContextProvider as C, ConfigurationProvider as D, LANGUAGE_LOCAL_STORAGE_KEY as E, getIn as F, GuidedTourProvider as G, setIn as H, setLocale as I, useForgotPasswordMutation as J, useGetRegistrationInfoQuery as K, LanguageProvider as L, useRegisterAdminMutation as M, NotificationsProvider as N, useRegisterUserMutation as O, Page as P, useResetPasswordMutation as Q, RBAC as R, StrapiAppProvider as S, Theme as T, logout as U, THEME_LOCAL_STORAGE_KEY as V, useTypedStore as W, useNotification as a, useTypedSelector as b, useTracking as c, useTypedDispatch as d, useAPIErrorHandler as e, useUpdateMeMutation as f, useIsSSOLockedQuery as g, createTypedSelector as h, useGetProviderOptionsQuery as i, useUpdateProviderOptionsMutation as j, useRBAC as k, useGetProvidersQuery as l, useGuidedTour as m, useQueryParams as n, login as o, useAppInfo as p, useStrapiApp as q, getStoredToken as r, setAppTheme as s, reducer$1 as t, useAuth as u, AppInfoProvider as v, useConfiguration as w, capitalise as x, isObject as y, createContext as z };
+//# sourceMappingURL=Theme-CDaBfQ-7.mjs.map