@strapi/admin 5.0.0-beta.6 → 5.0.0-beta.8

package/dist/admin/{index-7fPlAzj6.mjs → index-69WUS0qJ.mjs}

@@ -2,23 +2,23 @@ import { createRoot } from 'react-dom/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useEffect, Suspense, useCallback, useMemo, useState, forwardRef, memo } from 'react';
-import { Link, Alert, Typography, Main, Flex, Button, useCallbackRef, useComposedRefs, Dialog, DialogBody, DialogFooter, ToggleInput, Checkbox, DatePicker, DateTimePicker, TextInput, SingleSelect, SingleSelectOption, JSONInput, NumberInput, Textarea, TimePicker, Box, Field, Portal, IconButton, FieldLabel, VisuallyHidden, FieldInput, Grid, GridItem, HeaderLayout, ContentLayout, EmptyStateLayout, LinkButton, lightTheme, darkTheme, PopoverPrimitives, Tag, Pagination as Pagination$1, PreviousLink, PageLink, Dots, NextLink, SearchForm, Searchbar, Table as Table$1, Thead, Tr, Th, Tooltip, BaseCheckbox, Tbody, Td, Loader } from '@strapi/design-system';
+import { Link, Alert, Typography, Main, Flex, Button, useCallbackRef, useComposedRefs, Dialog, DialogBody, DialogFooter, Field, Toggle, Checkbox, DatePicker, DateTimePicker, TextInput, SingleSelect, SingleSelectOption, JSONInput, NumberInput, Textarea, TimePicker, Box, Portal, IconButton, VisuallyHidden, Grid, GridItem, EmptyStateLayout, LinkButton, lightTheme, darkTheme, PopoverPrimitives, Tag, Pagination as Pagination$1, PreviousLink, PageLink, Dots, NextLink, SearchForm, Searchbar, Table as Table$1, Thead, Tr, Th, Tooltip, BaseCheckbox, Tbody, Td, Loader } from '@strapi/design-system';
 import invariant from 'invariant';
 import isFunction from 'lodash/isFunction';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import { Provider as Provider$1 } from 'react-redux';
 import { NavLink, useLocation, useNavigate, Outlet, useRouteError, useBlocker, useMatch, Navigate, Link as Link$1, createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { t as createContext, S as StrapiAppProvider, A as AuthProvider, L as LanguageProvider, T as Theme, N as NotificationsProvider, v as TrackingProvider, w as ConfigurationProvider, x as LANGUAGE_LOCAL_STORAGE_KEY, P as Page, r as reducer$3, o as useConfiguration, b as useTypedSelector, e as useTypedDispatch, y as setLocale, a as useAuth, f as useAPIErrorHandler, z as useForgotPasswordMutation, u as useNotification, m as useAppInfo, d as useTracking, B as useGetRegistrationInfoQuery, D as useRegisterAdminMutation, E as useRegisterUserMutation, F as useResetPasswordMutation, R as RBAC, G as THEME_LOCAL_STORAGE_KEY, H as useTypedStore } from './rbac-uVd0RAE5.mjs';
+import { t as createContext, S as StrapiAppProvider, A as AuthProvider, L as LanguageProvider, T as Theme, N as NotificationsProvider, v as TrackingProvider, w as ConfigurationProvider, x as LANGUAGE_LOCAL_STORAGE_KEY, P as Page, r as reducer$3, o as useConfiguration, b as useTypedSelector, e as useTypedDispatch, y as setLocale, a as useAuth, f as useAPIErrorHandler, z as useForgotPasswordMutation, u as useNotification, m as useAppInfo, d as useTracking, B as useGetRegistrationInfoQuery, D as useRegisterAdminMutation, E as useRegisterUserMutation, F as useResetPasswordMutation, R as RBAC, G as THEME_LOCAL_STORAGE_KEY, H as useTypedStore } from './rbac-oJEkQdXG.mjs';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ArrowLeft, WarningCircle, Duplicate, Eye, EyeStriked, Cross, ArrowRight, Filter, Plus, Search, CaretDown } from '@strapi/icons';
 import { produce } from 'immer';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import set from 'lodash/set';
-import styled, { useTheme } from 'styled-components';
+import { styled } from 'styled-components';
 import { configureStore, combineReducers } from '@reduxjs/toolkit';
-import { b as adminApi, i as isBaseQueryError, e as useInitQuery, j as createAbsoluteUrl, k as getFetchClient } from './admin-5SXhE_nJ.mjs';
+import { b as adminApi, i as isBaseQueryError, e as useInitQuery, j as createAbsoluteUrl, k as getFetchClient } from './admin-B6AW0Kov.mjs';
 import { u as useEnterprise } from './useEnterprise-jpsYZWzn.mjs';
 import camelCase from 'lodash/camelCase';
 import * as yup from 'yup';
@@ -68,7 +68,7 @@ const getEERoutes$1 = () => window.strapi.isEE ? [
   {
     path: "auth/login/:authResponse",
     lazy: async () => {
-      const { AuthResponse } = await import('./AuthResponse-wfOnX6GO.mjs');
+      const { AuthResponse } = await import('./AuthResponse-TKtSIvEM.mjs');
       return {
         Component: AuthResponse
       };
@@ -108,7 +108,7 @@ const getEERoutes = () => [
     {
       path: "audit-logs",
       lazy: async () => {
-        const { ProtectedListPage } = await import('./ListPage-5g8MtUEB.mjs');
+        const { ProtectedListPage } = await import('./ListPage-ver_Z86B.mjs');
         return {
           Component: ProtectedListPage
         };
@@ -119,7 +119,7 @@ const getEERoutes = () => [
     {
       path: "single-sign-on",
       lazy: async () => {
-        const { ProtectedSSO } = await import('./SingleSignOnPage-Y-brfYQ1.mjs');
+        const { ProtectedSSO } = await import('./SingleSignOnPage-rOuB5fpN.mjs');
         return {
           Component: ProtectedSSO
         };
@@ -221,8 +221,8 @@ const BackButton = React.forwardRef(({ disabled }, ref) => {
     Link,
     {
       ref,
-      as: NavLink,
-      to: history.at(-1),
+      tag: NavLink,
+      to: history.at(-1) ?? "",
       onClick: handleClick,
       disabled: disabled || !canGoBack,
       "aria-disabled": disabled || !canGoBack,
@@ -1072,17 +1072,7 @@ const Form = React.forwardRef(
           return { data };
         } catch (err) {
           if (isErrorYupValidationError(err)) {
-            let errors = {};
-            if (err.inner) {
-              if (err.inner.length === 0) {
-                return setIn(errors, err.path, err.message);
-              }
-              for (const error of err.inner) {
-                if (!getIn(errors, error.path)) {
-                  errors = setIn(errors, error.path, error.message);
-                }
-              }
-            }
+            const errors = getYupValidationErrors(err);
             if (shouldSetErrors) {
               setErrors(errors);
             }
@@ -1257,6 +1247,20 @@ const Form = React.forwardRef(
   }
 );
 const isErrorYupValidationError = (err) => typeof err === "object" && err !== null && "name" in err && typeof err.name === "string" && err.name === "ValidationError";
+const getYupValidationErrors = (err) => {
+  let errors = {};
+  if (err.inner) {
+    if (err.inner.length === 0) {
+      return setIn(errors, err.path, err.message);
+    }
+    for (const error of err.inner) {
+      if (!getIn(errors, error.path)) {
+        errors = setIn(errors, error.path, error.message);
+      }
+    }
+  }
+  return errors;
+};
 const reducer = (state, action) => produce(state, (draft) => {
   switch (action.type) {
     case "SET_INITIAL_VALUES":
@@ -1400,7 +1404,7 @@ const Blocker = ({ onProceed = () => {
         children: [
           /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
             /* @__PURE__ */ jsx(WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
-            /* @__PURE__ */ jsx(Typography, { as: "p", variant: "omega", textAlign: "center", children: formatMessage({
+            /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textAlign: "center", children: formatMessage({
               id: "global.prompt.unsaved",
               defaultMessage: "You have unsaved changes, are you sure you want to leave?"
             }) })
@@ -1441,327 +1445,359 @@ const useFocusInputField = (name) => {
   const [field, setField] = useState(null);
   useEffect(() => {
     if (search.has("field") && search.get("field") === name && field) {
-      if ("input" in field) {
-        field.input.current.focus();
-        field.input.current.scrollIntoView({
-          block: "center"
-        });
-      } else {
-        field.focus();
-        field.scrollIntoView({
-          block: "center"
-        });
-      }
+      field.focus();
+      field.scrollIntoView({
+        block: "center"
+      });
     }
   }, [search, name, field]);
   return setField;
 };
 
-const BooleanInput = forwardRef((props, ref) => {
-  const { formatMessage } = useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      ToggleInput,
-      {
-        ref: composedRefs,
-        checked: field.value === null ? null : field.value || false,
-        error: field.error,
-        offLabel: formatMessage({
-          id: "app.components.ToggleCheckbox.off-label",
-          defaultMessage: "False"
-        }),
-        onLabel: formatMessage({
-          id: "app.components.ToggleCheckbox.on-label",
-          defaultMessage: "True"
-        }),
-        onChange: field.onChange,
-        onClear: () => {
-          field.onChange(props.name, null);
-        },
-        ...props
-      }
-    )
-  );
-});
+const BooleanInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, maxWidth: "320px", children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          ref: composedRefs,
+          checked: field.value === null ? null : field.value || false,
+          offLabel: formatMessage({
+            id: "app.components.ToggleCheckbox.off-label",
+            defaultMessage: "False"
+          }),
+          onLabel: formatMessage({
+            id: "app.components.ToggleCheckbox.on-label",
+            defaultMessage: "True"
+          }),
+          onChange: field.onChange,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedBooleanInput = memo(BooleanInput);
 
-const CheckboxInput = forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      onValueChange: (checked) => field.onChange(props.name, checked),
-      ref: composedRefs,
-      value: field.value,
-      ...props,
-      children: props.label || props["aria-label"]
-    }
-  );
-});
+const CheckboxInput = forwardRef(
+  ({ name, required, label, hint, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          onValueChange: (checked) => field.onChange(name, checked),
+          ref: composedRefs,
+          value: field.value,
+          ...props,
+          children: label || props["aria-label"]
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedCheckboxInput = memo(CheckboxInput);
 
-const DateInput = forwardRef(({ type: _type, ...props }, ref) => {
-  const { formatMessage } = useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  const value = typeof field.value === "string" ? new Date(field.value) : field.value;
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      DatePicker,
-      {
-        ref: composedRefs,
-        clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
-        error: field.error,
-        id: props.name,
-        onChange: (date) => {
-          field.onChange(props.name, date);
-        },
-        onClear: () => field.onChange(props.name, void 0),
-        selectedDate: value,
-        ...props
-      }
-    )
-  );
-});
+const DateInput = forwardRef(
+  ({ name, required, label, hint, labelAction, type: _type, ...props }, ref) => {
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    const value = typeof field.value === "string" ? new Date(field.value) : field.value;
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          ref: composedRefs,
+          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+          onChange: (date) => {
+            field.onChange(name, date);
+          },
+          onClear: () => field.onChange(name, void 0),
+          value,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedDateInput = memo(DateInput);
 
-const DateTimeInput = forwardRef((props, ref) => {
-  const { formatMessage } = useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  const value = typeof field.value === "string" ? new Date(field.value) : field.value;
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      DateTimePicker,
-      {
-        ref: composedRefs,
-        clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
-        error: field.error,
-        id: props.name,
-        onChange: (date) => {
-          field.onChange(props.name, date);
-        },
-        onClear: () => field.onChange(props.name, void 0),
-        value,
-        ...props
-      }
-    )
-  );
-});
+const DateTimeInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    const value = typeof field.value === "string" ? new Date(field.value) : field.value;
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        DateTimePicker,
+        {
+          ref: composedRefs,
+          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+          onChange: (date) => {
+            field.onChange(name, date);
+          },
+          onClear: () => field.onChange(name, void 0),
+          value,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedDateTimeInput = memo(DateTimeInput);
 
-const EmailInput = forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        ref: composedRefs,
-        autoComplete: "email",
-        error: field.error,
-        id: props.name,
-        onChange: field.onChange,
-        defaultValue: field.initialValue,
-        value: field.value,
-        ...props,
-        type: "email"
-      }
-    )
-  );
-});
+const EmailInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: composedRefs,
+          autoComplete: "email",
+          onChange: field.onChange,
+          defaultValue: field.initialValue,
+          value: field.value,
+          ...props,
+          type: "email"
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedEmailInput = memo(EmailInput);
 
 const EnumerationInput = forwardRef(
-  ({ options = [], ...props }, ref) => {
-    const field = useField(props.name);
-    const fieldRef = useFocusInputField(props.name);
+  ({ name, required, label, hint, labelAction, options = [], ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
     const composedRefs = useComposedRefs(ref, fieldRef);
-    return (
-      // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsx(
         SingleSelect,
         {
           ref: composedRefs,
-          error: field.error,
           onChange: (value) => {
-            field.onChange(props.name, value);
+            field.onChange(name, value);
           },
           value: field.value,
           ...props,
-          children: options.map(({ value, label, disabled, hidden }) => {
-            return /* @__PURE__ */ jsx(SingleSelectOption, { value, disabled, hidden, children: label ?? value }, value);
+          children: options.map(({ value, label: label2, disabled, hidden }) => {
+            return /* @__PURE__ */ jsx(SingleSelectOption, { value, disabled, hidden, children: label2 ?? value }, value);
           })
         }
-      )
-    );
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
   }
 );
+const MemoizedEnumerationInput = memo(EnumerationInput);
 
-const JsonInput = forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      JSONInput,
-      {
-        ref: composedRefs,
-        value: field.value,
-        error: field.error,
-        onChange: (json) => {
-          const value = props.required && !json.length ? null : json;
-          field.onChange(props.name, value);
-        },
-        minHeight: `25.2rem`,
-        maxHeight: `50.4rem`,
-        ...props
-      }
-    )
-  );
-});
+const JsonInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        JSONInput,
+        {
+          ref: composedRefs,
+          value: field.value,
+          onChange: (json) => {
+            const value = required && !json.length ? null : json;
+            field.onChange(name, value);
+          },
+          minHeight: `25.2rem`,
+          maxHeight: `50.4rem`,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedJsonInput = memo(JsonInput);
 
-const NumberInputImpl = forwardRef(({ type, ...props }, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      NumberInput,
-      {
-        ref: composedRefs,
-        defaultValue: field.initialValue,
-        error: field.error,
-        id: props.name,
-        onValueChange: (value) => {
-          field.onChange(props.name, value);
-        },
-        step: type === "float" || type == "decimal" ? 0.01 : 1,
-        value: field.value,
-        ...props
-      }
-    )
-  );
-});
+const NumberInputImpl = forwardRef(
+  ({ name, required, label, hint, labelAction, type, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          ref: composedRefs,
+          defaultValue: field.initialValue,
+          onValueChange: (value) => {
+            field.onChange(name, value);
+          },
+          step: type === "float" || type == "decimal" ? 0.01 : 1,
+          value: field.value,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedNumberInput = memo(NumberInputImpl);
 
-const PasswordInput = forwardRef((props, ref) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const { formatMessage } = useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        ref: composedRefs,
-        autoComplete: "password",
-        error: field.error,
-        endAction: /* @__PURE__ */ jsx(
-          "button",
-          {
-            "aria-label": formatMessage({
-              id: "Auth.form.password.show-password",
-              defaultMessage: "Show password"
-            }),
-            onClick: () => {
-              setShowPassword((prev) => !prev);
-            },
-            style: {
-              border: "none",
-              padding: 0,
-              background: "transparent"
-            },
-            type: "button",
-            children: showPassword ? /* @__PURE__ */ jsx(Eye, { fill: "neutral500" }) : /* @__PURE__ */ jsx(EyeStriked, { fill: "neutral500" })
-          }
-        ),
-        id: props.name,
-        onChange: field.onChange,
-        defaultValue: field.initialValue,
-        value: field.value,
-        ...props,
-        type: showPassword ? "text" : "password"
-      }
-    )
-  );
-});
+const PasswordInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: composedRefs,
+          autoComplete: "password",
+          endAction: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": formatMessage({
+                id: "Auth.form.password.show-password",
+                defaultMessage: "Show password"
+              }),
+              onClick: () => {
+                setShowPassword((prev) => !prev);
+              },
+              style: {
+                border: "none",
+                padding: 0,
+                background: "transparent"
+              },
+              type: "button",
+              children: showPassword ? /* @__PURE__ */ jsx(Eye, { fill: "neutral500" }) : /* @__PURE__ */ jsx(EyeStriked, { fill: "neutral500" })
+            }
+          ),
+          onChange: field.onChange,
+          defaultValue: field.initialValue,
+          value: field.value,
+          ...props,
+          type: showPassword ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedPasswordInput = memo(PasswordInput);
 
-const StringInput = forwardRef(({ ...props }, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        ref: composedRefs,
-        error: field.error,
-        defaultValue: field.initialValue,
-        onChange: field.onChange,
-        value: field.value ?? "",
-        ...props
-      }
-    )
-  );
-});
+const StringInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: composedRefs,
+          defaultValue: field.initialValue,
+          onChange: field.onChange,
+          value: field.value ?? "",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedStringInput = memo(StringInput);
 
-const TextareaInput = forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        ref: composedRefs,
-        defaultValue: field.initialValue,
-        error: field.error,
-        id: props.name,
-        onChange: field.onChange,
-        value: field.value ?? "",
-        ...props
-      }
-    )
-  );
-});
+const TextareaInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ref: composedRefs,
+          defaultValue: field.initialValue,
+          onChange: field.onChange,
+          value: field.value ?? "",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedTextareaInput = memo(TextareaInput);
 
-const TimeInput = forwardRef((props, ref) => {
-  const { formatMessage } = useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      TimePicker,
-      {
-        ref: composedRefs,
-        clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
-        error: field.error,
-        id: props.name,
-        onChange: (time) => {
-          field.onChange(props.name, time);
-        },
-        onClear: () => field.onChange(props.name, void 0),
-        value: field.value ?? "",
-        ...props
-      }
-    )
-  );
-});
+const TimeInput = forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        TimePicker,
+        {
+          ref: composedRefs,
+          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+          onChange: (time) => {
+            field.onChange(name, time);
+          },
+          onClear: () => field.onChange(name, void 0),
+          value: field.value ?? "",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedTimeInput = memo(TimeInput);
 
 const InputRenderer = memo(
   forwardRef((props, forwardRef2) => {
@@ -1769,57 +1805,60 @@ const InputRenderer = memo(
       case "biginteger":
       case "timestamp":
       case "string":
-        return /* @__PURE__ */ jsx(StringInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedStringInput, { ref: forwardRef2, ...props });
       case "boolean":
-        return /* @__PURE__ */ jsx(BooleanInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedBooleanInput, { ref: forwardRef2, ...props });
       case "checkbox":
-        return /* @__PURE__ */ jsx(CheckboxInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedCheckboxInput, { ref: forwardRef2, ...props });
       case "datetime":
-        return /* @__PURE__ */ jsx(DateTimeInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedDateTimeInput, { ref: forwardRef2, ...props });
       case "date":
-        return /* @__PURE__ */ jsx(DateInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedDateInput, { ref: forwardRef2, ...props });
       case "decimal":
       case "float":
       case "integer":
-        return /* @__PURE__ */ jsx(NumberInputImpl, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedNumberInput, { ref: forwardRef2, ...props });
       case "json":
-        return /* @__PURE__ */ jsx(JsonInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedJsonInput, { ref: forwardRef2, ...props });
       case "email":
-        return /* @__PURE__ */ jsx(EmailInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedEmailInput, { ref: forwardRef2, ...props });
       case "enumeration":
-        return /* @__PURE__ */ jsx(EnumerationInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedEnumerationInput, { ref: forwardRef2, ...props });
       case "password":
-        return /* @__PURE__ */ jsx(PasswordInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedPasswordInput, { ref: forwardRef2, ...props });
       case "text":
-        return /* @__PURE__ */ jsx(TextareaInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedTextareaInput, { ref: forwardRef2, ...props });
       case "time":
-        return /* @__PURE__ */ jsx(TimeInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsx(MemoizedTimeInput, { ref: forwardRef2, ...props });
       default:
         return /* @__PURE__ */ jsx(NotSupportedField, { ref: forwardRef2, ...props });
     }
   })
 );
-const NotSupportedField = forwardRef((props, ref) => {
-  const { error } = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      ref: composedRefs,
-      disabled: true,
-      error,
-      label: props.label,
-      id: props.name,
-      hint: props.hint,
-      name: props.name,
-      placeholder: `Unsupported field type: ${props.type}`,
-      required: props.required,
-      type: "text",
-      value: ""
-    }
-  );
-});
+const NotSupportedField = forwardRef(
+  ({ label, hint, name, required, type, labelAction }, ref) => {
+    const { error } = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxs(Field.Root, { error, name, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: composedRefs,
+          disabled: true,
+          placeholder: `Unsupported field type: ${type}`,
+          required,
+          type: "text",
+          value: ""
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+const MemoizedInputRenderer = memo(InputRenderer);
 
 const Img = styled.img`
   height: 7.2rem;
@@ -1872,7 +1911,7 @@ const LayoutContent = ({ children }) => /* @__PURE__ */ jsx(
 );
 const UnauthenticatedLayout = ({ children }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Flex, { as: "header", justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingRight: 8, children: /* @__PURE__ */ jsx(LocaleToggle, {}) }) }),
+    /* @__PURE__ */ jsx(Flex, { tag: "header", justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingRight: 8, children: /* @__PURE__ */ jsx(LocaleToggle, {}) }) }),
     /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingBottom: 11, children })
   ] });
 };
@@ -1963,7 +2002,7 @@ const Login = ({ children }) => {
     /* @__PURE__ */ jsxs(LayoutContent, { children: [
       /* @__PURE__ */ jsxs(Column, { children: [
         /* @__PURE__ */ jsx(Logo, {}),
-        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "alpha", as: "h1", children: formatMessage({
+        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: formatMessage({
           id: "Auth.form.welcome.title",
           defaultMessage: "Welcome!"
         }) }) }),
@@ -2015,14 +2054,14 @@ const Login = ({ children }) => {
                 name: "rememberMe",
                 type: "checkbox"
               }
-            ].map((field) => /* @__PURE__ */ jsx(InputRenderer, { ...field }, field.name)),
+            ].map((field) => /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field }, field.name)),
             /* @__PURE__ */ jsx(Button, { fullWidth: true, type: "submit", children: formatMessage({ id: "Auth.form.button.login", defaultMessage: "Login" }) })
           ] })
         }
       ),
       children
     ] }),
-    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { as: NavLink, to: "/auth/forgot-password", children: formatMessage({
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { isExternal: false, tag: NavLink, to: "/auth/forgot-password", children: formatMessage({
       id: "Auth.link.forgot-password",
       defaultMessage: "Forgot your password?"
     }) }) }) })
@@ -2038,7 +2077,7 @@ const ForgotPassword = () => {
     /* @__PURE__ */ jsxs(LayoutContent, { children: [
       /* @__PURE__ */ jsxs(Column, { children: [
         /* @__PURE__ */ jsx(Logo, {}),
-        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { as: "h1", variant: "alpha", children: formatMessage({
+        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { tag: "h1", variant: "alpha", children: formatMessage({
           id: "Auth.form.button.password-recovery",
           defaultMessage: "Password Recovery"
         }) }) }),
@@ -2078,7 +2117,7 @@ const ForgotPassword = () => {
                 required: true,
                 type: "string"
               }
-            ].map((field) => /* @__PURE__ */ jsx(InputRenderer, { ...field }, field.name)),
+            ].map((field) => /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field }, field.name)),
             /* @__PURE__ */ jsx(Button, { type: "submit", fullWidth: true, children: formatMessage({
               id: "Auth.form.button.forgot-password",
               defaultMessage: "Send Email"
@@ -2087,7 +2126,7 @@ const ForgotPassword = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { as: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { tag: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
   ] }) });
 };
 
@@ -2096,7 +2135,7 @@ const ForgotPasswordSuccess = () => {
   return /* @__PURE__ */ jsx(UnauthenticatedLayout, { children: /* @__PURE__ */ jsxs(Main, { children: [
     /* @__PURE__ */ jsx(LayoutContent, { children: /* @__PURE__ */ jsxs(Column, { children: [
       /* @__PURE__ */ jsx(Logo, {}),
-      /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { as: "h1", variant: "alpha", children: formatMessage({
+      /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { tag: "h1", variant: "alpha", children: formatMessage({
         id: "app.containers.AuthPage.ForgotPasswordSuccess.title",
         defaultMessage: "Email sent"
       }) }) }),
@@ -2109,7 +2148,7 @@ const ForgotPasswordSuccess = () => {
         defaultMessage: "If you do not receive this link, please contact your administrator."
       }) }) })
     ] }) }),
-    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { as: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { tag: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
   ] }) });
 };
 
@@ -2124,14 +2163,14 @@ const Oops = () => {
   return /* @__PURE__ */ jsx(UnauthenticatedLayout, { children: /* @__PURE__ */ jsxs(Main, { children: [
     /* @__PURE__ */ jsx(LayoutContent, { children: /* @__PURE__ */ jsxs(Column, { children: [
       /* @__PURE__ */ jsx(Logo, {}),
-      /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { as: "h1", variant: "alpha", children: formatMessage({ id: "Auth.components.Oops.title", defaultMessage: "Oops..." }) }) }),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { tag: "h1", variant: "alpha", children: formatMessage({ id: "Auth.components.Oops.title", defaultMessage: "Oops..." }) }) }),
       /* @__PURE__ */ jsx(Typography, { children: message }),
       /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({
         id: "Auth.components.Oops.text.admin",
         defaultMessage: "If this is a mistake, please contact your administrator."
       }) }) })
     ] }) }),
-    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { as: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { tag: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
   ] }) });
 };
 
@@ -2153,7 +2192,7 @@ const usePersistentState = (key, defaultValue) => {
   return [value, setValue];
 };
 
-const FieldWrapper = styled(Field)`
+const FieldWrapper = styled(Field.Root)`
   height: 3.2rem;
   width: 3.2rem;
 
@@ -2230,7 +2269,6 @@ const checkIfShouldShowSurvey = (settings) => {
   return true;
 };
 const NpsSurvey = () => {
-  const theme = useTheme();
   const { formatMessage } = useIntl();
   const { npsSurveySettings, setNpsSurveySettings } = useNpsSurveySettings();
   const [isFeedbackResponse, setIsFeedbackResponse] = React.useState(false);
@@ -2333,14 +2371,14 @@ const NpsSurvey = () => {
           bottom: 0,
           left: "50%",
           transform: "translateX(-50%)",
-          zIndex: theme.zIndices[2],
+          zIndex: "popover",
           width: "50%",
           children: isFeedbackResponse ? /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: formatMessage({
             id: "app.components.NpsSurvey.feedback-response",
             defaultMessage: "Thank you very much for your feedback!"
-          }) }) : /* @__PURE__ */ jsxs(Box, { as: "fieldset", width: "100%", children: [
+          }) }) : /* @__PURE__ */ jsxs(Box, { tag: "fieldset", width: "100%", borderWidth: 0, children: [
             /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", width: "100%", children: [
-              /* @__PURE__ */ jsx(Box, { marginLeft: "auto", marginRight: "auto", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", as: "legend", children: formatMessage({
+              /* @__PURE__ */ jsx(Box, { marginLeft: "auto", marginRight: "auto", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", tag: "legend", children: formatMessage({
                 id: "app.components.NpsSurvey.banner-title",
                 defaultMessage: "How likely are you to recommend Strapi to a friend or colleague?"
               }) }) }),
@@ -2348,11 +2386,12 @@ const NpsSurvey = () => {
                 IconButton,
                 {
                   onClick: handleDismiss,
-                  "aria-label": formatMessage({
+                  withTooltip: false,
+                  label: formatMessage({
                     id: "app.components.NpsSurvey.dismiss-survey-label",
                     defaultMessage: "Dismiss survey"
                   }),
-                  icon: /* @__PURE__ */ jsx(Cross, {})
+                  children: /* @__PURE__ */ jsx(Cross, {})
                 }
               )
             ] }),
@@ -2365,6 +2404,7 @@ const NpsSurvey = () => {
                 return /* @__PURE__ */ jsx(
                   FieldWrapper,
                   {
+                    name: "npsSurveyRating",
                     className: values.npsSurveyRating === number ? "selected" : void 0,
                     hasRadius: true,
                     background: "primary100",
@@ -2372,13 +2412,11 @@ const NpsSurvey = () => {
                     color: "primary600",
                     position: "relative",
                     cursor: "pointer",
-                    children: /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: `nps-survey-rating-${number}-input`, children: [
+                    children: /* @__PURE__ */ jsxs(Field.Label, { children: [
                       /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
-                        FieldInput,
+                        Field.Input,
                         {
                           type: "radio",
-                          id: `nps-survey-rating-${number}-input`,
-                          name: "npsSurveyRating",
                           checked: values.npsSurveyRating === number,
                           onChange: (e) => setFieldValue("npsSurveyRating", parseInt(e.target.value, 10)),
                           value: number
@@ -2396,7 +2434,7 @@ const NpsSurvey = () => {
               }) })
             ] }),
             values.npsSurveyRating !== null && /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-              /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "npsSurveyFeedback", fontWeight: "semiBold", fontSize: 2, children: formatMessage({
+              /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(Field.Label, { fontWeight: "semiBold", fontSize: 2, children: formatMessage({
                 id: "app.components.NpsSurvey.feedback-question",
                 defaultMessage: "Do you have any suggestion for improvements?"
               }) }) }),
@@ -2406,7 +2444,7 @@ const NpsSurvey = () => {
                   id: "npsSurveyFeedback",
                   width: "100%",
                   onChange: handleChange,
-                  children: values.npsSurveyFeedback
+                  value: values.npsSurveyFeedback
                 }
               ) }),
               /* @__PURE__ */ jsx(Button, { marginBottom: 2, type: "submit", loading: isSubmitting, children: formatMessage({
@@ -2616,7 +2654,7 @@ const Register = ({ hasAdmin }) => {
   return /* @__PURE__ */ jsx(UnauthenticatedLayout, { children: /* @__PURE__ */ jsxs(LayoutContent, { children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 3, children: [
       /* @__PURE__ */ jsx(Logo, {}),
-      /* @__PURE__ */ jsx(Typography, { as: "h1", variant: "alpha", textAlign: "center", children: formatMessage({
+      /* @__PURE__ */ jsx(Typography, { tag: "h1", variant: "alpha", textAlign: "center", children: formatMessage({
         id: "Auth.form.welcome.title",
         defaultMessage: "Welcome to Strapi!"
       }) }),
@@ -2757,7 +2795,7 @@ const Register = ({ hasAdmin }) => {
               size: 12,
               type: "checkbox"
             }
-          ].map(({ size, ...field }) => /* @__PURE__ */ jsx(GridItem, { col: size, children: /* @__PURE__ */ jsx(InputRenderer, { ...field }) }, field.name)) }),
+          ].map(({ size, ...field }) => /* @__PURE__ */ jsx(GridItem, { col: size, children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field }) }, field.name)) }),
           /* @__PURE__ */ jsx(Button, { fullWidth: true, size: "L", type: "submit", children: formatMessage({
             id: "Auth.form.button.register",
             defaultMessage: "Let's start"
@@ -2765,7 +2803,7 @@ const Register = ({ hasAdmin }) => {
         ] })
       }
     ),
-    match?.params.authType === "register" && /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Link, { as: NavLink, to: "/auth/login", children: formatMessage({
+    match?.params.authType === "register" && /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Link, { tag: NavLink, to: "/auth/login", children: formatMessage({
       id: "Auth.link.signin.account",
       defaultMessage: "Already have an account?"
     }) }) }) })
@@ -2845,7 +2883,7 @@ const ResetPassword = () => {
     /* @__PURE__ */ jsxs(LayoutContent, { children: [
       /* @__PURE__ */ jsxs(Column, { children: [
         /* @__PURE__ */ jsx(Logo, {}),
-        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { as: "h1", variant: "alpha", children: formatMessage({
+        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsx(Typography, { tag: "h1", variant: "alpha", children: formatMessage({
           id: "global.reset-password",
           defaultMessage: "Reset password"
         }) }) }),
@@ -2890,7 +2928,7 @@ const ResetPassword = () => {
                 required: true,
                 type: "password"
               }
-            ].map((field) => /* @__PURE__ */ jsx(InputRenderer, { ...field }, field.name)),
+            ].map((field) => /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field }, field.name)),
             /* @__PURE__ */ jsx(Button, { fullWidth: true, type: "submit", children: formatMessage({
               id: "global.change-password",
               defaultMessage: "Change password"
@@ -2899,7 +2937,7 @@ const ResetPassword = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { as: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Link, { tag: NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
   ] }) });
 };
 
@@ -2924,11 +2962,11 @@ const AuthPage = () => {
   const { hasAdmin } = data ?? {};
   const Login$1 = useEnterprise(
     Login,
-    async () => (await import('./Login-FSNzATl0.mjs')).LoginEE
+    async () => (await import('./Login-227oY0SP.mjs')).LoginEE
   );
   const forms = useEnterprise(
     FORMS,
-    async () => (await import('./constants-wnw4TGwG.mjs')).FORMS,
+    async () => (await import('./constants-N0AWjcMN.mjs')).FORMS,
     {
       combine(ceForms, eeForms) {
         return {
@@ -2968,11 +3006,194 @@ const AuthPage = () => {
   return /* @__PURE__ */ jsx(Component, { hasAdmin });
 };
 
+const ActionLayout = ({ startActions, endActions }) => {
+  if (!startActions && !endActions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      paddingBottom: 4,
+      paddingLeft: 10,
+      paddingRight: 10,
+      children: [
+        /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", children: startActions }),
+        /* @__PURE__ */ jsx(Flex, { gap: 2, shrink: 0, wrap: "wrap", children: endActions })
+      ]
+    }
+  );
+};
+
+const ContentLayout = ({ children }) => {
+  return /* @__PURE__ */ jsx(Box, { paddingLeft: 10, paddingRight: 10, children });
+};
+
+const GridColSize = {
+  S: 180,
+  M: 250
+};
+const StyledGrid = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(${({ $size }) => `${GridColSize[$size]}px`}, 1fr)
+  );
+  grid-gap: ${({ theme }) => theme.spaces[4]};
+`;
+const GridLayout = ({ size, children }) => {
+  return /* @__PURE__ */ jsx(StyledGrid, { $size: size, children });
+};
+
+const BaseHeaderLayout = React.forwardRef(
+  ({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref) => {
+    const isSubtitleString = typeof subtitle === "string";
+    if (sticky) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          paddingLeft: 6,
+          paddingRight: 6,
+          paddingTop: 3,
+          paddingBottom: 3,
+          position: "fixed",
+          top: 0,
+          right: 0,
+          background: "neutral0",
+          shadow: "tableShadow",
+          width: `${width}rem`,
+          zIndex: 1,
+          "data-strapi-header-sticky": true,
+          children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { children: [
+              navigationAction && /* @__PURE__ */ jsx(Box, { paddingRight: 3, children: navigationAction }),
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h1", ...props, children: title }),
+                isSubtitleString ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: subtitle }) : subtitle
+              ] }),
+              secondaryAction ? /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: secondaryAction }) : null
+            ] }),
+            /* @__PURE__ */ jsx(Flex, { children: primaryAction ? /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: primaryAction }) : void 0 })
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 8,
+        paddingTop: navigationAction ? 6 : 8,
+        background: "neutral100",
+        "data-strapi-header": true,
+        children: [
+          navigationAction ? /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: navigationAction }) : null,
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { minWidth: 0, children: [
+              /* @__PURE__ */ jsx(Typography, { tag: "h1", variant: "alpha", ...props, children: title }),
+              secondaryAction ? /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: secondaryAction }) : null
+            ] }),
+            primaryAction
+          ] }),
+          isSubtitleString ? /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", tag: "p", children: subtitle }) : subtitle
+        ]
+      }
+    );
+  }
+);
+const HeaderLayout = (props) => {
+  const baseHeaderLayoutRef = React.useRef(null);
+  const [headerSize, setHeaderSize] = React.useState(null);
+  const [containerRef, isVisible] = useElementOnScreen({
+    root: null,
+    rootMargin: "0px",
+    threshold: 0
+  });
+  useResizeObserver(containerRef, () => {
+    if (containerRef.current) {
+      setHeaderSize(containerRef.current.getBoundingClientRect());
+    }
+  });
+  React.useEffect(() => {
+    if (baseHeaderLayoutRef.current) {
+      setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+    }
+  }, [baseHeaderLayoutRef]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { height: headerSize?.height }, ref: containerRef, children: isVisible && /* @__PURE__ */ jsx(BaseHeaderLayout, { ref: baseHeaderLayoutRef, ...props }) }),
+    !isVisible && /* @__PURE__ */ jsx(BaseHeaderLayout, { ...props, sticky: true, width: headerSize?.width })
+  ] });
+};
+HeaderLayout.displayName = "HeaderLayout";
+const useElementOnScreen = (options) => {
+  const containerRef = React.useRef(null);
+  const [isVisible, setIsVisible] = React.useState(true);
+  const callback = ([entry]) => {
+    setIsVisible(entry.isIntersecting);
+  };
+  React.useEffect(() => {
+    const containerEl = containerRef.current;
+    const observer = new IntersectionObserver(callback, options);
+    if (containerEl) {
+      observer.observe(containerRef.current);
+    }
+    return () => {
+      if (containerEl) {
+        observer.disconnect();
+      }
+    };
+  }, [containerRef, options]);
+  return [containerRef, isVisible];
+};
+const useResizeObserver = (sources, onResize) => {
+  const handleResize = useCallbackRef(onResize);
+  React.useLayoutEffect(() => {
+    const resizeObs = new ResizeObserver(handleResize);
+    if (Array.isArray(sources)) {
+      sources.forEach((source) => {
+        if (source.current) {
+          resizeObs.observe(source.current);
+        }
+      });
+    } else if (sources.current) {
+      resizeObs.observe(sources.current);
+    }
+    return () => {
+      resizeObs.disconnect();
+    };
+  }, [sources, handleResize]);
+};
+
+const GridContainer = styled(Box)`
+  display: grid;
+  grid-template-columns: ${({ $hasSideNav }) => $hasSideNav ? `auto 1fr` : "1fr"};
+`;
+const OverflowingItem = styled(Box)`
+  overflow-x: hidden;
+`;
+const RootLayout = ({ sideNav, children }) => {
+  return /* @__PURE__ */ jsxs(GridContainer, { $hasSideNav: Boolean(sideNav), children: [
+    sideNav,
+    /* @__PURE__ */ jsx(OverflowingItem, { paddingBottom: 10, children })
+  ] });
+};
+const Layouts = {
+  Root: RootLayout,
+  Header: HeaderLayout,
+  BaseHeader: BaseHeaderLayout,
+  Grid: GridLayout,
+  Action: ActionLayout,
+  Content: ContentLayout
+};
+
 const NotFoundPage = () => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Page.Main, { labelledBy: "title", children: [
     /* @__PURE__ */ jsx(
-      HeaderLayout,
+      Layouts.Header,
       {
         id: "title",
         title: formatMessage({
@@ -2981,16 +3202,13 @@ const NotFoundPage = () => {
         })
       }
     ),
-    /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
-        action: (
-          // @ts-expect-error We need to accept the props of the component passed in the `as` prop
-          /* @__PURE__ */ jsx(LinkButton, { forwardedAs: Link$1, variant: "secondary", endIcon: /* @__PURE__ */ jsx(ArrowRight, {}), to: "/", children: formatMessage({
-            id: "app.components.NotFoundPage.back",
-            defaultMessage: "Back to homepage"
-          }) })
-        ),
+        action: /* @__PURE__ */ jsx(LinkButton, { tag: Link$1, variant: "secondary", endIcon: /* @__PURE__ */ jsx(ArrowRight, {}), to: "/", children: formatMessage({
+          id: "app.components.NotFoundPage.back",
+          defaultMessage: "Back to homepage"
+        }) }),
         content: formatMessage({
           id: "app.page.not.found",
           defaultMessage: "Oops! We can't seem to find the page you're looging for..."
@@ -3006,7 +3224,7 @@ const NotFoundPage = () => {
 const ROUTES_CE = [
   {
     lazy: async () => {
-      const { ProtectedListPage } = await import('./ListPage-kdjzZ2al.mjs');
+      const { ProtectedListPage } = await import('./ListPage--SLZfVEu.mjs');
       return {
         Component: ProtectedListPage
       };
@@ -3015,7 +3233,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await import('./CreatePage-uTwt_c8J.mjs');
+      const { ProtectedCreatePage } = await import('./CreatePage-537fJDEU.mjs');
       return {
         Component: ProtectedCreatePage
       };
@@ -3024,7 +3242,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await import('./CreatePage-uTwt_c8J.mjs');
+      const { ProtectedCreatePage } = await import('./CreatePage-537fJDEU.mjs');
       return {
         Component: ProtectedCreatePage
       };
@@ -3033,7 +3251,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await import('./EditPage-F3yH0Fy6.mjs');
+      const { ProtectedEditPage } = await import('./EditPage-g0VOXyKS.mjs');
       return {
         Component: ProtectedEditPage
       };
@@ -3042,7 +3260,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await import('./ListPage-eNkUD3v_.mjs');
+      const { ProtectedListPage } = await import('./ListPage-hJ6Ynuzs.mjs');
       return {
         Component: ProtectedListPage
       };
@@ -3051,7 +3269,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await import('./EditPage-XSz7Wpt8.mjs');
+      const { ProtectedEditPage } = await import('./EditPage-Il4eROQZ.mjs');
       return {
         Component: ProtectedEditPage
       };
@@ -3060,7 +3278,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await import('./CreatePage-07P5-Zjt.mjs');
+      const { ProtectedCreatePage } = await import('./CreatePage-4tMY0ik1.mjs');
       return {
         Component: ProtectedCreatePage
       };
@@ -3069,7 +3287,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await import('./EditPage-lyFePXWl.mjs').then(n => n.b);
+      const { ProtectedEditPage } = await import('./EditPage-15aToLph.mjs').then(n => n.b);
       return {
         Component: ProtectedEditPage
       };
@@ -3078,7 +3296,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await import('./ListPage-AFDAiR9X.mjs');
+      const { ProtectedListPage } = await import('./ListPage-91B_ZBgU.mjs');
       return {
         Component: ProtectedListPage
       };
@@ -3087,7 +3305,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await import('./ListView-FBh2WTHx.mjs');
+      const { ProtectedListView } = await import('./ListView-HFV67l_w.mjs');
       return {
         Component: ProtectedListView
       };
@@ -3096,7 +3314,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await import('./CreateView-87aPv9QV.mjs');
+      const { ProtectedCreateView } = await import('./CreateView-AaD01TxO.mjs');
       return {
         Component: ProtectedCreateView
       };
@@ -3105,7 +3323,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await import('./EditViewPage-f5dHmqdT.mjs');
+      const { ProtectedEditView } = await import('./EditViewPage-c3QrE1Hr.mjs');
       return {
         Component: ProtectedEditView
       };
@@ -3114,7 +3332,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await import('./CreateView-T8hLqvog.mjs');
+      const { ProtectedCreateView } = await import('./CreateView-EfGicMHg.mjs');
       return {
         Component: ProtectedCreateView
       };
@@ -3123,7 +3341,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await import('./ListView-uwPF62w6.mjs');
+      const { ProtectedListView } = await import('./ListView-PXoWtVRs.mjs');
       return {
         Component: ProtectedListView
       };
@@ -3132,7 +3350,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await import('./EditView-r0lx661I.mjs');
+      const { ProtectedEditView } = await import('./EditView-NOjzvG4n.mjs');
       return {
         Component: ProtectedEditView
       };
@@ -3141,7 +3359,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseAuditLogs } = await import('./PurchaseAuditLogs-_1tVWtNF.mjs');
+      const { PurchaseAuditLogs } = await import('./PurchaseAuditLogs-iXSAELjJ.mjs');
       return {
         Component: PurchaseAuditLogs
       };
@@ -3150,7 +3368,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseSingleSignOn } = await import('./PurchaseSingleSignOn-VUU-U4wi.mjs');
+      const { PurchaseSingleSignOn } = await import('./PurchaseSingleSignOn-A_9ts2Q3.mjs');
       return {
         Component: PurchaseSingleSignOn
       };
@@ -3483,7 +3701,7 @@ class StrapiApp {
     const adminLocales = await Promise.all(
       this.configurations.locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper((/* #__PURE__ */ Object.assign({"./translations/ar.json": () => import('./ar-gTQs8p7A.mjs'),"./translations/ca.json": () => import('./ca-A-U5stlG.mjs'),"./translations/cs.json": () => import('./cs-iYqoHUVt.mjs'),"./translations/de.json": () => import('./de-uZBjRd6a.mjs'),"./translations/dk.json": () => import('./dk-nXAO32DE.mjs'),"./translations/en.json": () => import('./en-D7rooMTs.mjs'),"./translations/es.json": () => import('./es-i0dEHPPQ.mjs'),"./translations/eu.json": () => import('./eu-wFmYHERY.mjs'),"./translations/fr.json": () => import('./fr-OI7VyC_k.mjs'),"./translations/gu.json": () => import('./gu-zSaMc-a6.mjs'),"./translations/he.json": () => import('./he-YzAGShlQ.mjs'),"./translations/hi.json": () => import('./hi-ZQ4t6UdY.mjs'),"./translations/hu.json": () => import('./hu-O1FJoY8c.mjs'),"./translations/id.json": () => import('./id-Lb_0kPQU.mjs'),"./translations/it.json": () => import('./it-136monzD.mjs'),"./translations/ja.json": () => import('./ja-0-FUC0T4.mjs'),"./translations/ko.json": () => import('./ko-H3Y8GpnD.mjs'),"./translations/ml.json": () => import('./ml-NPdcpJoN.mjs'),"./translations/ms.json": () => import('./ms-v9c434YI.mjs'),"./translations/nl.json": () => import('./nl-qHmOt3d1.mjs'),"./translations/no.json": () => import('./no-XGZQN-Ji.mjs'),"./translations/pl.json": () => import('./pl-Id5YX-Pw.mjs'),"./translations/pt-BR.json": () => import('./pt-BR-0o0Gf-P8.mjs'),"./translations/pt.json": () => import('./pt-f52AXrxz.mjs'),"./translations/ru.json": () => import('./ru-FpmG9SEf.mjs'),"./translations/sa.json": () => import('./sa-KUwV8aRB.mjs'),"./translations/sk.json": () => import('./sk-g_1C955P.mjs'),"./translations/sv.json": () => import('./sv-lzyY1dsz.mjs'),"./translations/th.json": () => import('./th-7LJ9Y8EL.mjs'),"./translations/tr.json": () => import('./tr-09v-DLMg.mjs'),"./translations/uk.json": () => import('./uk-38IblmOr.mjs'),"./translations/vi.json": () => import('./vi-ryNZtXtk.mjs'),"./translations/zh-Hans.json": () => import('./zh-Hans-HlxDUeVA.mjs'),"./translations/zh.json": () => import('./zh-WEteLuNm.mjs')})), `./translations/${locale}.json`);
+          const { default: data } = await __variableDynamicImportRuntimeHelper((/* #__PURE__ */ Object.assign({"./translations/ar.json": () => import('./ar-gTQs8p7A.mjs'),"./translations/ca.json": () => import('./ca-A-U5stlG.mjs'),"./translations/cs.json": () => import('./cs-iYqoHUVt.mjs'),"./translations/de.json": () => import('./de-uZBjRd6a.mjs'),"./translations/dk.json": () => import('./dk-nXAO32DE.mjs'),"./translations/en.json": () => import('./en-K35WIWVM.mjs'),"./translations/es.json": () => import('./es-i0dEHPPQ.mjs'),"./translations/eu.json": () => import('./eu-wFmYHERY.mjs'),"./translations/fr.json": () => import('./fr-OI7VyC_k.mjs'),"./translations/gu.json": () => import('./gu-zSaMc-a6.mjs'),"./translations/he.json": () => import('./he-YzAGShlQ.mjs'),"./translations/hi.json": () => import('./hi-ZQ4t6UdY.mjs'),"./translations/hu.json": () => import('./hu-O1FJoY8c.mjs'),"./translations/id.json": () => import('./id-Lb_0kPQU.mjs'),"./translations/it.json": () => import('./it-136monzD.mjs'),"./translations/ja.json": () => import('./ja-0-FUC0T4.mjs'),"./translations/ko.json": () => import('./ko-H3Y8GpnD.mjs'),"./translations/ml.json": () => import('./ml-NPdcpJoN.mjs'),"./translations/ms.json": () => import('./ms-v9c434YI.mjs'),"./translations/nl.json": () => import('./nl-qHmOt3d1.mjs'),"./translations/no.json": () => import('./no-XGZQN-Ji.mjs'),"./translations/pl.json": () => import('./pl-Id5YX-Pw.mjs'),"./translations/pt-BR.json": () => import('./pt-BR-0o0Gf-P8.mjs'),"./translations/pt.json": () => import('./pt-f52AXrxz.mjs'),"./translations/ru.json": () => import('./ru-FpmG9SEf.mjs'),"./translations/sa.json": () => import('./sa-KUwV8aRB.mjs'),"./translations/sk.json": () => import('./sk-g_1C955P.mjs'),"./translations/sv.json": () => import('./sv-lzyY1dsz.mjs'),"./translations/th.json": () => import('./th-7LJ9Y8EL.mjs'),"./translations/tr.json": () => import('./tr-09v-DLMg.mjs'),"./translations/uk.json": () => import('./uk-38IblmOr.mjs'),"./translations/vi.json": () => import('./vi-ryNZtXtk.mjs'),"./translations/zh-Hans.json": () => import('./zh-Hans-HlxDUeVA.mjs'),"./translations/zh.json": () => import('./zh-WEteLuNm.mjs')})), `./translations/${locale}.json`);
           return { data, locale };
         } catch {
           return { data: null, locale };
@@ -3587,7 +3805,7 @@ class StrapiApp {
             {
               path: "usecase",
               lazy: async () => {
-                const { PrivateUseCasePage } = await import('./UseCasePage-bfP-fDoW.mjs');
+                const { PrivateUseCasePage } = await import('./UseCasePage-yZtkKM9d.mjs');
                 return {
                   Component: PrivateUseCasePage
                 };
@@ -3602,7 +3820,7 @@ class StrapiApp {
             {
               path: "/*",
               lazy: async () => {
-                const { PrivateAdminLayout } = await import('./AuthenticatedLayout-eMLYKMgW.mjs');
+                const { PrivateAdminLayout } = await import('./AuthenticatedLayout-qx1Lyy4q.mjs');
                 return {
                   Component: PrivateAdminLayout
                 };
@@ -3611,7 +3829,7 @@ class StrapiApp {
                 {
                   index: true,
                   lazy: async () => {
-                    const { HomePage } = await import('./HomePage-ZF3T0k2r.mjs');
+                    const { HomePage } = await import('./HomePage-uzU2Sfu_.mjs');
                     return {
                       Component: HomePage
                     };
@@ -3620,7 +3838,7 @@ class StrapiApp {
                 {
                   path: "me",
                   lazy: async () => {
-                    const { ProfilePage } = await import('./ProfilePage-T2kC_KoM.mjs');
+                    const { ProfilePage } = await import('./ProfilePage-s8Kfhq6I.mjs');
                     return {
                       Component: ProfilePage
                     };
@@ -3629,7 +3847,7 @@ class StrapiApp {
                 {
                   path: "list-plugins",
                   lazy: async () => {
-                    const { ProtectedInstalledPluginsPage } = await import('./InstalledPluginsPage-eOXi3oTN.mjs');
+                    const { ProtectedInstalledPluginsPage } = await import('./InstalledPluginsPage-j8w6fibY.mjs');
                     return {
                       Component: ProtectedInstalledPluginsPage
                     };
@@ -3638,7 +3856,7 @@ class StrapiApp {
                 {
                   path: "marketplace",
                   lazy: async () => {
-                    const { ProtectedMarketplacePage } = await import('./MarketplacePage-kNQPkoZK.mjs');
+                    const { ProtectedMarketplacePage } = await import('./MarketplacePage-HcA4KrZ1.mjs');
                     return {
                       Component: ProtectedMarketplacePage
                     };
@@ -3647,7 +3865,7 @@ class StrapiApp {
                 {
                   path: "settings/*",
                   lazy: async () => {
-                    const { Layout } = await import('./Layout-mnn4_IJp.mjs');
+                    const { Layout } = await import('./Layout-mm5FttWk.mjs');
                     return {
                       Component: Layout
                     };
@@ -3656,7 +3874,7 @@ class StrapiApp {
                     {
                       path: "application-infos",
                       lazy: async () => {
-                        const { ApplicationInfoPage } = await import('./ApplicationInfoPage-TImAEuc3.mjs');
+                        const { ApplicationInfoPage } = await import('./ApplicationInfoPage-y-FX7oPO.mjs');
                         return {
                           Component: ApplicationInfoPage
                         };
@@ -4268,7 +4486,7 @@ const PopoverImpl = () => {
           onSubmit: handleSubmit,
           children: ({ values: formValues, modified, isSubmitting }) => {
             const filter = options.find((filter2) => filter2.name === formValues.name);
-            const Input = filter?.input || InputRenderer;
+            const Input = filter?.input || MemoizedInputRenderer;
             return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, style: { minWidth: 184 }, children: [
               [
                 {
@@ -4303,7 +4521,7 @@ const PopoverImpl = () => {
                   }),
                   type: "enumeration"
                 }
-              ].map((field) => /* @__PURE__ */ jsx(InputRenderer, { ...field }, field.name)),
+              ].map((field) => /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field }, field.name)),
               filter && formValues.filter && formValues.filter !== "$null" && formValues.filter !== "$notNull" ? /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -4555,7 +4773,7 @@ const PageSize = ({ options = ["10", "20", "50", "100"] }) => {
         children: options.map((option) => /* @__PURE__ */ jsx(SingleSelectOption, { value: option, children: option }, option))
       }
     ),
-    /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", as: "span", children: formatMessage({
+    /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", tag: "span", children: formatMessage({
       id: "components.PageFooter.select",
       defaultMessage: "Entries per page"
     }) })
@@ -4610,24 +4828,16 @@ const Links = ({ boundaryCount = 1, siblingCount = 1 }) => {
     return null;
   }
   return /* @__PURE__ */ jsxs(Pagination$1, { activePage, pageCount, children: [
-    /* @__PURE__ */ jsx(
-      PreviousLink,
-      {
-        as: Link$1,
-        to: { search: stringify({ ...query, page: activePage - 1 }) },
-        children: formatMessage({
-          id: "components.pagination.go-to-previous",
-          defaultMessage: "Go to previous page"
-        })
-      }
-    ),
+    /* @__PURE__ */ jsx(PreviousLink, { tag: Link$1, to: { search: stringify({ ...query, page: activePage - 1 }) }, children: formatMessage({
+      id: "components.pagination.go-to-previous",
+      defaultMessage: "Go to previous page"
+    }) }),
     items.map((item) => {
       if (typeof item === "number") {
         return /* @__PURE__ */ jsx(
           PageLink,
           {
-            as: Link$1,
-            active: item === activePage,
+            tag: Link$1,
             number: item,
             to: { search: stringify({ ...query, page: item }) },
             children: formatMessage(
@@ -4640,17 +4850,10 @@ const Links = ({ boundaryCount = 1, siblingCount = 1 }) => {
       }
       return /* @__PURE__ */ jsx(Dots, {}, item);
     }),
-    /* @__PURE__ */ jsx(
-      NextLink,
-      {
-        as: Link$1,
-        to: { search: stringify({ ...query, page: activePage + 1 }) },
-        children: formatMessage({
-          id: "components.pagination.go-to-next",
-          defaultMessage: "Go to next page"
-        })
-      }
-    )
+    /* @__PURE__ */ jsx(NextLink, { tag: Link$1, to: { search: stringify({ ...query, page: activePage + 1 }) }, children: formatMessage({
+      id: "components.pagination.go-to-next",
+      defaultMessage: "Go to next page"
+    }) })
   ] });
 };
 const Pagination = {
@@ -4705,7 +4908,6 @@ const SearchInput = ({
         value,
         clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
         onClear: handleClear,
-        size: "S",
         placeholder,
         children: label
       }
@@ -4716,9 +4918,9 @@ const SearchInput = ({
     {
       ref: iconButtonRef,
       disabled,
-      icon: /* @__PURE__ */ jsx(Search, { fill: "neutral800" }),
       label: formatMessage({ id: "global.search", defaultMessage: "Search" }),
-      onClick: handleToggle
+      onClick: handleToggle,
+      children: /* @__PURE__ */ jsx(Search, { fill: "neutral800" })
     }
   );
 };
@@ -4801,20 +5003,12 @@ const HeaderCell = ({ name, label, sortable }) => {
   return /* @__PURE__ */ jsx(
     Th,
     {
-      action: isSorted && sortable && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          label: sortLabel,
-          onClick: handleClickSort,
-          icon: /* @__PURE__ */ jsx(SortIcon, { isUp: sortOrder === "ASC" }),
-          borderStyle: "none"
-        }
-      ),
+      action: isSorted && sortable && /* @__PURE__ */ jsx(IconButton, { label: sortLabel, onClick: handleClickSort, borderStyle: "none", children: /* @__PURE__ */ jsx(SortIcon, { $isUp: sortOrder === "ASC" }) }),
       children: /* @__PURE__ */ jsx(Tooltip, { label: sortable ? sortLabel : label, children: /* @__PURE__ */ jsx(
         Typography,
         {
           textColor: "neutral600",
-          as: !isSorted && sortable ? "button" : "span",
+          tag: !isSorted && sortable ? "button" : "span",
           onClick: handleClickSort,
           variant: "sigma",
           children: label
@@ -4824,7 +5018,7 @@ const HeaderCell = ({ name, label, sortable }) => {
   );
 };
 const SortIcon = styled(CaretDown)`
-  transform: ${({ isUp }) => `rotate(${isUp ? "180" : "0"}deg)`};
+  transform: ${({ $isUp }) => `rotate(${$isUp ? "180" : "0"}deg)`};
 `;
 const ActionBar = ({ children }) => {
   const { formatMessage } = useIntl();
@@ -4932,8 +5126,8 @@ const CheckboxCell = ({ id, ...props }) => {
     BaseCheckbox,
     {
       "aria-label": formatMessage({
-        id: "global.select-all-entries",
-        defaultMessage: "Select all entries"
+        id: "global.select",
+        defaultMessage: "Select"
       }),
       disabled: rows.length === 0,
       checked: isChecked,
@@ -4981,7 +5175,9 @@ const useFetchClient = () => {
   );
 };
 
-const usersService = adminApi.injectEndpoints({
+const usersService = adminApi.enhanceEndpoints({
+  addTagTypes: ["LicenseLimits", "User", "Role", "RolePermissions"]
+}).injectEndpoints({
   endpoints: (builder) => ({
     /**
      * users
@@ -5151,5 +5347,5 @@ const {
 } = usersService;
 const useAdminUsers = useGetUsersQuery;
 
-export { useFocusInputField as A, BackButton as B, ConfirmDialog as C, renderAdmin as D, DescriptionComponentRenderer as E, Form as F, Blocker as G, useForm as H, InputRenderer as I, useTable as J, constants as K, LayoutContent as L, NpsSurvey as N, Pagination as P, SearchInput as S, Table as T, UnauthenticatedLayout as U, Logo as a, Login as b, useGetRolePermissionLayoutQuery as c, useGetRolePermissionsQuery as d, errorsTrads as e, useCreateRoleMutation as f, useUpdateRolePermissionsMutation as g, useUpdateUserMutation as h, useAdminUsers as i, useGuidedTour as j, getBasename as k, Column as l, useQueryParams as m, useFetchClient as n, useUpdateRoleMutation as o, SETTINGS_LINKS_CE as p, useCreateUserMutation as q, useDeleteManyUsersMutation as r, Filters as s, useClipboard as t, useGetRolesQuery as u, useField as v, usePersistentState as w, StrapiLogo as x, isObject as y, useInjectReducer as z };
-//# sourceMappingURL=index-7fPlAzj6.mjs.map
+export { isObject as A, BackButton as B, ConfirmDialog as C, useInjectReducer as D, useFocusInputField as E, Form as F, renderAdmin as G, DescriptionComponentRenderer as H, Blocker as I, getYupValidationErrors as J, useTable as K, LayoutContent as L, MemoizedInputRenderer as M, NpsSurvey as N, constants as O, Pagination as P, SearchInput as S, Table as T, UnauthenticatedLayout as U, Logo as a, Layouts as b, useGetRolesQuery as c, Login as d, errorsTrads as e, useGetRolePermissionLayoutQuery as f, useGetRolePermissionsQuery as g, useCreateRoleMutation as h, useUpdateRolePermissionsMutation as i, useUpdateUserMutation as j, useAdminUsers as k, useGuidedTour as l, getBasename as m, Column as n, useQueryParams as o, useFetchClient as p, useUpdateRoleMutation as q, SETTINGS_LINKS_CE as r, useCreateUserMutation as s, useDeleteManyUsersMutation as t, useField as u, Filters as v, useClipboard as w, useForm as x, MemoizedStringInput as y, StrapiLogo as z };
+//# sourceMappingURL=index-69WUS0qJ.mjs.map