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

package/dist/admin/{index-FJLgZ-Wg.js → index-UrJZyInv.js}

@@ -10,16 +10,16 @@ const merge = require('lodash/merge');
 const pick = require('lodash/pick');
 const reactRedux = require('react-redux');
 const reactRouterDom = require('react-router-dom');
-const rbac = require('./rbac-xgYdpUSq.js');
+const rbac = require('./rbac-5b9ylhpa.js');
 const reactQuery = require('react-query');
 const icons = require('@strapi/icons');
 const immer = require('immer');
 const reactIntl = require('react-intl');
 const get = require('lodash/get');
 const set = require('lodash/set');
-const styled = require('styled-components');
+const styledComponents = require('styled-components');
 const toolkit = require('@reduxjs/toolkit');
-const admin = require('./admin-vlKSOeHB.js');
+const admin = require('./admin-p0djr5G6.js');
 const useEnterprise = require('./useEnterprise-DUs6BYlP.js');
 const camelCase = require('lodash/camelCase');
 const yup = require('yup');
@@ -60,7 +60,6 @@ const merge__default = /*#__PURE__*/_interopDefault(merge);
 const pick__default = /*#__PURE__*/_interopDefault(pick);
 const get__default = /*#__PURE__*/_interopDefault(get);
 const set__default = /*#__PURE__*/_interopDefault(set);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
 const camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
 const yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 const isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
@@ -104,7 +103,7 @@ const getEERoutes$1 = () => window.strapi.isEE ? [
   {
     path: "auth/login/:authResponse",
     lazy: async () => {
-      const { AuthResponse } = await Promise.resolve().then(() => require('./AuthResponse-J1Y_hbtY.js'));
+      const { AuthResponse } = await Promise.resolve().then(() => require('./AuthResponse-6oCac46I.js'));
       return {
         Component: AuthResponse
       };
@@ -144,7 +143,7 @@ const getEERoutes = () => [
     {
       path: "audit-logs",
       lazy: async () => {
-        const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-URtxfNJ4.js'));
+        const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-qnRnNdZB.js'));
         return {
           Component: ProtectedListPage
         };
@@ -155,7 +154,7 @@ const getEERoutes = () => [
     {
       path: "single-sign-on",
       lazy: async () => {
-        const { ProtectedSSO } = await Promise.resolve().then(() => require('./SingleSignOnPage-nv121JbB.js'));
+        const { ProtectedSSO } = await Promise.resolve().then(() => require('./SingleSignOnPage-NRBGwvMB.js'));
         return {
           Component: ProtectedSSO
         };
@@ -257,8 +256,8 @@ const BackButton = React__namespace.forwardRef(({ disabled }, ref) => {
     designSystem.Link,
     {
       ref,
-      as: reactRouterDom.NavLink,
-      to: history.at(-1),
+      tag: reactRouterDom.NavLink,
+      to: history.at(-1) ?? "",
       onClick: handleClick,
       disabled: disabled || !canGoBack,
       "aria-disabled": disabled || !canGoBack,
@@ -574,7 +573,7 @@ ${error.stack}
   }
   throw error;
 };
-const StyledAlert = styled__default.default(designSystem.Alert)`
+const StyledAlert = styledComponents.styled(designSystem.Alert)`
   & > div:first-child {
     display: none;
   }
@@ -583,7 +582,7 @@ const StyledAlert = styled__default.default(designSystem.Alert)`
     display: none;
   }
 `;
-const ErrorType = styled__default.default(designSystem.Typography)`
+const ErrorType = styledComponents.styled(designSystem.Typography)`
   word-break: break-all;
   color: ${({ theme }) => theme.colors.danger600};
 `;
@@ -1108,17 +1107,7 @@ const Form = React__namespace.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);
             }
@@ -1293,6 +1282,20 @@ const Form = React__namespace.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) => immer.produce(state, (draft) => {
   switch (action.type) {
     case "SET_INITIAL_VALUES":
@@ -1436,7 +1439,7 @@ const Blocker = ({ onProceed = () => {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.DialogBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "p", variant: "omega", textAlign: "center", children: formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.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?"
             }) })
@@ -1477,327 +1480,359 @@ const useFocusInputField = (name) => {
   const [field, setField] = React.useState(null);
   React.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 = React.forwardRef((props, ref) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.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 = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const { formatMessage } = reactIntl.useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, maxWidth: "320px", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.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__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedBooleanInput = React.memo(BooleanInput);
 
-const CheckboxInput = React.forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.Checkbox,
-    {
-      onValueChange: (checked) => field.onChange(props.name, checked),
-      ref: composedRefs,
-      value: field.value,
-      ...props,
-      children: props.label || props["aria-label"]
-    }
-  );
-});
+const CheckboxInput = React.forwardRef(
+  ({ name, required, label, hint, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Checkbox,
+        {
+          onValueChange: (checked) => field.onChange(name, checked),
+          ref: composedRefs,
+          value: field.value,
+          ...props,
+          children: label || props["aria-label"]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedCheckboxInput = React.memo(CheckboxInput);
 
-const DateInput = React.forwardRef(({ type: _type, ...props }, ref) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.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 = React.forwardRef(
+  ({ name, required, label, hint, labelAction, type: _type, ...props }, ref) => {
+    const { formatMessage } = reactIntl.useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    const value = typeof field.value === "string" ? new Date(field.value) : field.value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.DatePicker,
+        {
+          ref: composedRefs,
+          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+          onChange: (date) => {
+            field.onChange(name, date);
+          },
+          onClear: () => field.onChange(name, void 0),
+          value,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedDateInput = React.memo(DateInput);
 
-const DateTimeInput = React.forwardRef((props, ref) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.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 = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const { formatMessage } = reactIntl.useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    const value = typeof field.value === "string" ? new Date(field.value) : field.value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.DateTimePicker,
+        {
+          ref: composedRefs,
+          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+          onChange: (date) => {
+            field.onChange(name, date);
+          },
+          onClear: () => field.onChange(name, void 0),
+          value,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedDateTimeInput = React.memo(DateTimeInput);
 
-const EmailInput = React.forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.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 = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          ref: composedRefs,
+          autoComplete: "email",
+          onChange: field.onChange,
+          defaultValue: field.initialValue,
+          value: field.value,
+          ...props,
+          type: "email"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedEmailInput = React.memo(EmailInput);
 
 const EnumerationInput = React.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 = designSystem.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__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.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__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value, disabled, hidden, children: label ?? value }, value);
+          children: options.map(({ value, label: label2, disabled, hidden }) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value, disabled, hidden, children: label2 ?? value }, value);
           })
         }
-      )
-    );
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
   }
 );
+const MemoizedEnumerationInput = React.memo(EnumerationInput);
 
-const JsonInput = React.forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.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 = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.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__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedJsonInput = React.memo(JsonInput);
 
-const NumberInputImpl = React.forwardRef(({ type, ...props }, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.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 = React.forwardRef(
+  ({ name, required, label, hint, labelAction, type, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.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__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedNumberInput = React.memo(NumberInputImpl);
 
-const PasswordInput = React.forwardRef((props, ref) => {
-  const [showPassword, setShowPassword] = React.useState(false);
-  const { formatMessage } = reactIntl.useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.TextInput,
-      {
-        ref: composedRefs,
-        autoComplete: "password",
-        error: field.error,
-        endAction: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(icons.Eye, { fill: "neutral500" }) : /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, { fill: "neutral500" })
-          }
-        ),
-        id: props.name,
-        onChange: field.onChange,
-        defaultValue: field.initialValue,
-        value: field.value,
-        ...props,
-        type: showPassword ? "text" : "password"
-      }
-    )
-  );
-});
+const PasswordInput = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    const { formatMessage } = reactIntl.useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          ref: composedRefs,
+          autoComplete: "password",
+          endAction: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(icons.Eye, { fill: "neutral500" }) : /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, { fill: "neutral500" })
+            }
+          ),
+          onChange: field.onChange,
+          defaultValue: field.initialValue,
+          value: field.value,
+          ...props,
+          type: showPassword ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedPasswordInput = React.memo(PasswordInput);
 
-const StringInput = React.forwardRef(({ ...props }, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.TextInput,
-      {
-        ref: composedRefs,
-        error: field.error,
-        defaultValue: field.initialValue,
-        onChange: field.onChange,
-        value: field.value ?? "",
-        ...props
-      }
-    )
-  );
-});
+const StringInput = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          ref: composedRefs,
+          defaultValue: field.initialValue,
+          onChange: field.onChange,
+          value: field.value ?? "",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedStringInput = React.memo(StringInput);
 
-const TextareaInput = React.forwardRef((props, ref) => {
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.Textarea,
-      {
-        ref: composedRefs,
-        defaultValue: field.initialValue,
-        error: field.error,
-        id: props.name,
-        onChange: field.onChange,
-        value: field.value ?? "",
-        ...props
-      }
-    )
-  );
-});
+const TextareaInput = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Textarea,
+        {
+          ref: composedRefs,
+          defaultValue: field.initialValue,
+          onChange: field.onChange,
+          value: field.value ?? "",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedTextareaInput = React.memo(TextareaInput);
 
-const TimeInput = React.forwardRef((props, ref) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const field = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.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__ */ jsxRuntime.jsx(
-      designSystem.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 = React.forwardRef(
+  ({ name, required, label, hint, labelAction, ...props }, ref) => {
+    const { formatMessage } = reactIntl.useIntl();
+    const field = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.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__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedTimeInput = React.memo(TimeInput);
 
 const InputRenderer = React.memo(
   React.forwardRef((props, forwardRef2) => {
@@ -1805,59 +1840,62 @@ const InputRenderer = React.memo(
       case "biginteger":
       case "timestamp":
       case "string":
-        return /* @__PURE__ */ jsxRuntime.jsx(StringInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedStringInput, { ref: forwardRef2, ...props });
       case "boolean":
-        return /* @__PURE__ */ jsxRuntime.jsx(BooleanInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBooleanInput, { ref: forwardRef2, ...props });
       case "checkbox":
-        return /* @__PURE__ */ jsxRuntime.jsx(CheckboxInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedCheckboxInput, { ref: forwardRef2, ...props });
       case "datetime":
-        return /* @__PURE__ */ jsxRuntime.jsx(DateTimeInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedDateTimeInput, { ref: forwardRef2, ...props });
       case "date":
-        return /* @__PURE__ */ jsxRuntime.jsx(DateInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedDateInput, { ref: forwardRef2, ...props });
       case "decimal":
       case "float":
       case "integer":
-        return /* @__PURE__ */ jsxRuntime.jsx(NumberInputImpl, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedNumberInput, { ref: forwardRef2, ...props });
       case "json":
-        return /* @__PURE__ */ jsxRuntime.jsx(JsonInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedJsonInput, { ref: forwardRef2, ...props });
       case "email":
-        return /* @__PURE__ */ jsxRuntime.jsx(EmailInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedEmailInput, { ref: forwardRef2, ...props });
       case "enumeration":
-        return /* @__PURE__ */ jsxRuntime.jsx(EnumerationInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedEnumerationInput, { ref: forwardRef2, ...props });
       case "password":
-        return /* @__PURE__ */ jsxRuntime.jsx(PasswordInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedPasswordInput, { ref: forwardRef2, ...props });
       case "text":
-        return /* @__PURE__ */ jsxRuntime.jsx(TextareaInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedTextareaInput, { ref: forwardRef2, ...props });
       case "time":
-        return /* @__PURE__ */ jsxRuntime.jsx(TimeInput, { ref: forwardRef2, ...props });
+        return /* @__PURE__ */ jsxRuntime.jsx(MemoizedTimeInput, { ref: forwardRef2, ...props });
       default:
         return /* @__PURE__ */ jsxRuntime.jsx(NotSupportedField, { ref: forwardRef2, ...props });
     }
   })
 );
-const NotSupportedField = React.forwardRef((props, ref) => {
-  const { error } = useField(props.name);
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.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 = React.forwardRef(
+  ({ label, hint, name, required, type, labelAction }, ref) => {
+    const { error } = useField(name);
+    const fieldRef = useFocusInputField(name);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error, name, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          ref: composedRefs,
+          disabled: true,
+          placeholder: `Unsupported field type: ${type}`,
+          required,
+          type: "text",
+          value: ""
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+const MemoizedInputRenderer = React.memo(InputRenderer);
 
-const Img = styled__default.default.img`
+const Img = styledComponents.styled.img`
   height: 7.2rem;
 `;
 const Logo = () => {
@@ -1867,11 +1905,11 @@ const Logo = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(Img, { src: auth?.custom?.url || auth.default, "aria-hidden": true, alt: "" });
 };
 
-const Wrapper = styled__default.default(designSystem.Box)`
+const Wrapper = styledComponents.styled(designSystem.Box)`
   margin: 0 auto;
   width: 552px;
 `;
-const Column = styled__default.default(designSystem.Flex)`
+const Column = styledComponents.styled(designSystem.Flex)`
   flex-direction: column;
 `;
 const LocaleToggle = () => {
@@ -1908,7 +1946,7 @@ const LayoutContent = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
 );
 const UnauthenticatedLayout = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { as: "header", justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingRight: 8, children: /* @__PURE__ */ jsxRuntime.jsx(LocaleToggle, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "header", justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingRight: 8, children: /* @__PURE__ */ jsxRuntime.jsx(LocaleToggle, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 11, children })
   ] });
 };
@@ -1999,7 +2037,7 @@ const Login = ({ children }) => {
     /* @__PURE__ */ jsxRuntime.jsxs(LayoutContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Column, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Logo, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", as: "h1", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: formatMessage({
           id: "Auth.form.welcome.title",
           defaultMessage: "Welcome!"
         }) }) }),
@@ -2051,14 +2089,14 @@ const Login = ({ children }) => {
                 name: "rememberMe",
                 type: "checkbox"
               }
-            ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field }, field.name)),
+            ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field }, field.name)),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { fullWidth: true, type: "submit", children: formatMessage({ id: "Auth.form.button.login", defaultMessage: "Login" }) })
           ] })
         }
       ),
       children
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { as: reactRouterDom.NavLink, to: "/auth/forgot-password", children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { isExternal: false, tag: reactRouterDom.NavLink, to: "/auth/forgot-password", children: formatMessage({
       id: "Auth.link.forgot-password",
       defaultMessage: "Forgot your password?"
     }) }) }) })
@@ -2074,7 +2112,7 @@ const ForgotPassword = () => {
     /* @__PURE__ */ jsxRuntime.jsxs(LayoutContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Column, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Logo, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h1", variant: "alpha", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", children: formatMessage({
           id: "Auth.form.button.password-recovery",
           defaultMessage: "Password Recovery"
         }) }) }),
@@ -2114,7 +2152,7 @@ const ForgotPassword = () => {
                 required: true,
                 type: "string"
               }
-            ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field }, field.name)),
+            ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field }, field.name)),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", fullWidth: true, children: formatMessage({
               id: "Auth.form.button.forgot-password",
               defaultMessage: "Send Email"
@@ -2123,7 +2161,7 @@ const ForgotPassword = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { as: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { tag: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
   ] }) });
 };
 
@@ -2132,7 +2170,7 @@ const ForgotPasswordSuccess = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(UnauthenticatedLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(LayoutContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(Column, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Logo, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h1", variant: "alpha", children: formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", children: formatMessage({
         id: "app.containers.AuthPage.ForgotPasswordSuccess.title",
         defaultMessage: "Email sent"
       }) }) }),
@@ -2145,7 +2183,7 @@ const ForgotPasswordSuccess = () => {
         defaultMessage: "If you do not receive this link, please contact your administrator."
       }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { as: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { tag: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
   ] }) });
 };
 
@@ -2160,14 +2198,14 @@ const Oops = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(UnauthenticatedLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(LayoutContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(Column, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Logo, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h1", variant: "alpha", children: formatMessage({ id: "Auth.components.Oops.title", defaultMessage: "Oops..." }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", children: formatMessage({ id: "Auth.components.Oops.title", defaultMessage: "Oops..." }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: message }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
         id: "Auth.components.Oops.text.admin",
         defaultMessage: "If this is a mistake, please contact your administrator."
       }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { as: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { tag: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.signin", defaultMessage: "Sign in" }) }) }) })
   ] }) });
 };
 
@@ -2189,7 +2227,7 @@ const usePersistentState = (key, defaultValue) => {
   return [value, setValue];
 };
 
-const FieldWrapper = styled__default.default(designSystem.Field)`
+const FieldWrapper = styledComponents.styled(designSystem.Field.Root)`
   height: 3.2rem;
   width: 3.2rem;
 
@@ -2266,7 +2304,6 @@ const checkIfShouldShowSurvey = (settings) => {
   return true;
 };
 const NpsSurvey = () => {
-  const theme = styled.useTheme();
   const { formatMessage } = reactIntl.useIntl();
   const { npsSurveySettings, setNpsSurveySettings } = useNpsSurveySettings();
   const [isFeedbackResponse, setIsFeedbackResponse] = React__namespace.useState(false);
@@ -2369,14 +2406,14 @@ const NpsSurvey = () => {
           bottom: 0,
           left: "50%",
           transform: "translateX(-50%)",
-          zIndex: theme.zIndices[2],
+          zIndex: "popover",
           width: "50%",
           children: isFeedbackResponse ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: formatMessage({
             id: "app.components.NpsSurvey.feedback-response",
             defaultMessage: "Thank you very much for your feedback!"
-          }) }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { as: "fieldset", width: "100%", children: [
+          }) }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { tag: "fieldset", width: "100%", borderWidth: 0, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", width: "100%", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginLeft: "auto", marginRight: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", as: "legend", children: formatMessage({
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginLeft: "auto", marginRight: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.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?"
               }) }) }),
@@ -2384,11 +2421,12 @@ const NpsSurvey = () => {
                 designSystem.IconButton,
                 {
                   onClick: handleDismiss,
-                  "aria-label": formatMessage({
+                  withTooltip: false,
+                  label: formatMessage({
                     id: "app.components.NpsSurvey.dismiss-survey-label",
                     defaultMessage: "Dismiss survey"
                   }),
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
                 }
               )
             ] }),
@@ -2401,6 +2439,7 @@ const NpsSurvey = () => {
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   FieldWrapper,
                   {
+                    name: "npsSurveyRating",
                     className: values.npsSurveyRating === number ? "selected" : void 0,
                     hasRadius: true,
                     background: "primary100",
@@ -2408,13 +2447,11 @@ const NpsSurvey = () => {
                     color: "primary600",
                     position: "relative",
                     cursor: "pointer",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.FieldLabel, { htmlFor: `nps-survey-rating-${number}-input`, children: [
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                        designSystem.FieldInput,
+                        designSystem.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
@@ -2432,7 +2469,7 @@ const NpsSurvey = () => {
               }) })
             ] }),
             values.npsSurveyRating !== null && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { htmlFor: "npsSurveyFeedback", fontWeight: "semiBold", fontSize: 2, children: formatMessage({
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { fontWeight: "semiBold", fontSize: 2, children: formatMessage({
                 id: "app.components.NpsSurvey.feedback-question",
                 defaultMessage: "Do you have any suggestion for improvements?"
               }) }) }),
@@ -2442,7 +2479,7 @@ const NpsSurvey = () => {
                   id: "npsSurveyFeedback",
                   width: "100%",
                   onChange: handleChange,
-                  children: values.npsSurveyFeedback
+                  value: values.npsSurveyFeedback
                 }
               ) }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { marginBottom: 2, type: "submit", loading: isSubmitting, children: formatMessage({
@@ -2652,7 +2689,7 @@ const Register = ({ hasAdmin }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(UnauthenticatedLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(LayoutContent, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 3, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Logo, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h1", variant: "alpha", textAlign: "center", children: formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", textAlign: "center", children: formatMessage({
         id: "Auth.form.welcome.title",
         defaultMessage: "Welcome to Strapi!"
       }) }),
@@ -2793,7 +2830,7 @@ const Register = ({ hasAdmin }) => {
               size: 12,
               type: "checkbox"
             }
-          ].map(({ size, ...field }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, children: /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field }) }, field.name)) }),
+          ].map(({ size, ...field }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field }) }, field.name)) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { fullWidth: true, size: "L", type: "submit", children: formatMessage({
             id: "Auth.form.button.register",
             defaultMessage: "Let's start"
@@ -2801,7 +2838,7 @@ const Register = ({ hasAdmin }) => {
         ] })
       }
     ),
-    match?.params.authType === "register" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { as: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({
+    match?.params.authType === "register" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { tag: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({
       id: "Auth.link.signin.account",
       defaultMessage: "Already have an account?"
     }) }) }) })
@@ -2823,7 +2860,7 @@ function normalizeData(data) {
     {}
   );
 }
-const A = styled__default.default.a`
+const A = styledComponents.styled.a`
   color: ${({ theme }) => theme.colors.primary600};
 `;
 
@@ -2881,7 +2918,7 @@ const ResetPassword = () => {
     /* @__PURE__ */ jsxRuntime.jsxs(LayoutContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Column, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Logo, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h1", variant: "alpha", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 7, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", children: formatMessage({
           id: "global.reset-password",
           defaultMessage: "Reset password"
         }) }) }),
@@ -2926,7 +2963,7 @@ const ResetPassword = () => {
                 required: true,
                 type: "password"
               }
-            ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field }, field.name)),
+            ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field }, field.name)),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { fullWidth: true, type: "submit", children: formatMessage({
               id: "global.change-password",
               defaultMessage: "Change password"
@@ -2935,7 +2972,7 @@ const ResetPassword = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { as: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { tag: reactRouterDom.NavLink, to: "/auth/login", children: formatMessage({ id: "Auth.link.ready", defaultMessage: "Ready to sign in?" }) }) }) })
   ] }) });
 };
 
@@ -2960,11 +2997,11 @@ const AuthPage = () => {
   const { hasAdmin } = data ?? {};
   const Login$1 = useEnterprise.useEnterprise(
     Login,
-    async () => (await Promise.resolve().then(() => require('./Login-3rLFPliB.js'))).LoginEE
+    async () => (await Promise.resolve().then(() => require('./Login-uUFgaGQO.js'))).LoginEE
   );
   const forms = useEnterprise.useEnterprise(
     FORMS,
-    async () => (await Promise.resolve().then(() => require('./constants-qdY4HMAg.js'))).FORMS,
+    async () => (await Promise.resolve().then(() => require('./constants-MTKkA8PE.js'))).FORMS,
     {
       combine(ceForms, eeForms) {
         return {
@@ -3004,11 +3041,194 @@ const AuthPage = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { hasAdmin });
 };
 
+const ActionLayout = ({ startActions, endActions }) => {
+  if (!startActions && !endActions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Flex,
+    {
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      paddingBottom: 4,
+      paddingLeft: 10,
+      paddingRight: 10,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", children: startActions }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, shrink: 0, wrap: "wrap", children: endActions })
+      ]
+    }
+  );
+};
+
+const ContentLayout = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 10, paddingRight: 10, children });
+};
+
+const GridColSize = {
+  S: 180,
+  M: 250
+};
+const StyledGrid = styledComponents.styled(designSystem.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__ */ jsxRuntime.jsx(StyledGrid, { $size: size, children });
+};
+
+const BaseHeaderLayout = React__namespace.forwardRef(
+  ({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref) => {
+    const isSubtitleString = typeof subtitle === "string";
+    if (sticky) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+              navigationAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 3, children: navigationAction }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h1", ...props, children: title }),
+                isSubtitleString ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: subtitle }) : subtitle
+              ] }),
+              secondaryAction ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 4, children: secondaryAction }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { children: primaryAction ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 2, children: primaryAction }) : void 0 })
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        ref,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 8,
+        paddingTop: navigationAction ? 6 : 8,
+        background: "neutral100",
+        "data-strapi-header": true,
+        children: [
+          navigationAction ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, children: navigationAction }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { minWidth: 0, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", ...props, children: title }),
+              secondaryAction ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 4, children: secondaryAction }) : null
+            ] }),
+            primaryAction
+          ] }),
+          isSubtitleString ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", tag: "p", children: subtitle }) : subtitle
+        ]
+      }
+    );
+  }
+);
+const HeaderLayout = (props) => {
+  const baseHeaderLayoutRef = React__namespace.useRef(null);
+  const [headerSize, setHeaderSize] = React__namespace.useState(null);
+  const [containerRef, isVisible] = useElementOnScreen({
+    root: null,
+    rootMargin: "0px",
+    threshold: 0
+  });
+  useResizeObserver(containerRef, () => {
+    if (containerRef.current) {
+      setHeaderSize(containerRef.current.getBoundingClientRect());
+    }
+  });
+  React__namespace.useEffect(() => {
+    if (baseHeaderLayoutRef.current) {
+      setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+    }
+  }, [baseHeaderLayoutRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: headerSize?.height }, ref: containerRef, children: isVisible && /* @__PURE__ */ jsxRuntime.jsx(BaseHeaderLayout, { ref: baseHeaderLayoutRef, ...props }) }),
+    !isVisible && /* @__PURE__ */ jsxRuntime.jsx(BaseHeaderLayout, { ...props, sticky: true, width: headerSize?.width })
+  ] });
+};
+HeaderLayout.displayName = "HeaderLayout";
+const useElementOnScreen = (options) => {
+  const containerRef = React__namespace.useRef(null);
+  const [isVisible, setIsVisible] = React__namespace.useState(true);
+  const callback = ([entry]) => {
+    setIsVisible(entry.isIntersecting);
+  };
+  React__namespace.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 = designSystem.useCallbackRef(onResize);
+  React__namespace.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 = styledComponents.styled(designSystem.Box)`
+  display: grid;
+  grid-template-columns: ${({ $hasSideNav }) => $hasSideNav ? `auto 1fr` : "1fr"};
+`;
+const OverflowingItem = styledComponents.styled(designSystem.Box)`
+  overflow-x: hidden;
+`;
+const RootLayout = ({ sideNav, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(GridContainer, { $hasSideNav: Boolean(sideNav), children: [
+    sideNav,
+    /* @__PURE__ */ jsxRuntime.jsx(OverflowingItem, { paddingBottom: 10, children })
+  ] });
+};
+const Layouts = {
+  Root: RootLayout,
+  Header: HeaderLayout,
+  BaseHeader: BaseHeaderLayout,
+  Grid: GridLayout,
+  Action: ActionLayout,
+  Content: ContentLayout
+};
+
 const NotFoundPage = () => {
   const { formatMessage } = reactIntl.useIntl();
   return /* @__PURE__ */ jsxRuntime.jsxs(rbac.Page.Main, { labelledBy: "title", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.HeaderLayout,
+      Layouts.Header,
       {
         id: "title",
         title: formatMessage({
@@ -3017,16 +3237,13 @@ const NotFoundPage = () => {
         })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ContentLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
-        action: (
-          // @ts-expect-error We need to accept the props of the component passed in the `as` prop
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { forwardedAs: reactRouterDom.Link, variant: "secondary", endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowRight, {}), to: "/", children: formatMessage({
-            id: "app.components.NotFoundPage.back",
-            defaultMessage: "Back to homepage"
-          }) })
-        ),
+        action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { tag: reactRouterDom.Link, variant: "secondary", endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.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..."
@@ -3042,7 +3259,7 @@ const NotFoundPage = () => {
 const ROUTES_CE = [
   {
     lazy: async () => {
-      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-hln8fKzE.js'));
+      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-qccI1KJZ.js'));
       return {
         Component: ProtectedListPage
       };
@@ -3051,7 +3268,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-03MgCK7Z.js'));
+      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-peOfskFg.js'));
       return {
         Component: ProtectedCreatePage
       };
@@ -3060,7 +3277,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-03MgCK7Z.js'));
+      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-peOfskFg.js'));
       return {
         Component: ProtectedCreatePage
       };
@@ -3069,7 +3286,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-Ly5MBiuB.js'));
+      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-z7pM9PD2.js'));
       return {
         Component: ProtectedEditPage
       };
@@ -3078,7 +3295,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-NTxNcftS.js'));
+      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-Id9VZhfe.js'));
       return {
         Component: ProtectedListPage
       };
@@ -3087,7 +3304,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-UqMDbMvJ.js'));
+      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-SrUqHo-J.js'));
       return {
         Component: ProtectedEditPage
       };
@@ -3096,7 +3313,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-f3faA3vG.js'));
+      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-4TW2khkB.js'));
       return {
         Component: ProtectedCreatePage
       };
@@ -3105,7 +3322,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-YqW1NIMp.js')).then(n => n.EditPage$1);
+      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-cmzfgdc5.js')).then(n => n.EditPage$1);
       return {
         Component: ProtectedEditPage
       };
@@ -3114,7 +3331,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-Pi_dzfDr.js'));
+      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-kdascM3g.js'));
       return {
         Component: ProtectedListPage
       };
@@ -3123,7 +3340,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-f2wVT21J.js'));
+      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-gOdn2Qwi.js'));
       return {
         Component: ProtectedListView
       };
@@ -3132,7 +3349,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-o5-hvd4h.js'));
+      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-uK14O_jU.js'));
       return {
         Component: ProtectedCreateView
       };
@@ -3141,7 +3358,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditViewPage-tAsn6QS9.js'));
+      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditViewPage-KEF7ROrG.js'));
       return {
         Component: ProtectedEditView
       };
@@ -3150,7 +3367,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-UemGfFqI.js'));
+      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-Ni2CgUVr.js'));
       return {
         Component: ProtectedCreateView
       };
@@ -3159,7 +3376,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-pYVBJ4lg.js'));
+      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-Tdz585_r.js'));
       return {
         Component: ProtectedListView
       };
@@ -3168,7 +3385,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditView-bRFkRKAz.js'));
+      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditView-gJfIIjvG.js'));
       return {
         Component: ProtectedEditView
       };
@@ -3177,7 +3394,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseAuditLogs } = await Promise.resolve().then(() => require('./PurchaseAuditLogs-GreHFPSR.js'));
+      const { PurchaseAuditLogs } = await Promise.resolve().then(() => require('./PurchaseAuditLogs-uu0_PoKP.js'));
       return {
         Component: PurchaseAuditLogs
       };
@@ -3186,7 +3403,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseSingleSignOn } = await Promise.resolve().then(() => require('./PurchaseSingleSignOn-6t4xuNBd.js'));
+      const { PurchaseSingleSignOn } = await Promise.resolve().then(() => require('./PurchaseSingleSignOn-I0AAcpBZ.js'));
       return {
         Component: PurchaseSingleSignOn
       };
@@ -3519,7 +3736,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": () => Promise.resolve().then(() => require('./ar-74XpZHjA.js')),"./translations/ca.json": () => Promise.resolve().then(() => require('./ca-tfhzbe_0.js')),"./translations/cs.json": () => Promise.resolve().then(() => require('./cs-sS-228vY.js')),"./translations/de.json": () => Promise.resolve().then(() => require('./de-og0YSnla.js')),"./translations/dk.json": () => Promise.resolve().then(() => require('./dk-GtDhDxRc.js')),"./translations/en.json": () => Promise.resolve().then(() => require('./en-zVbLVH-h.js')),"./translations/es.json": () => Promise.resolve().then(() => require('./es-TQtY4G8X.js')),"./translations/eu.json": () => Promise.resolve().then(() => require('./eu-SRdPRyQu.js')),"./translations/fr.json": () => Promise.resolve().then(() => require('./fr-GW5-kEO9.js')),"./translations/gu.json": () => Promise.resolve().then(() => require('./gu-z6qqOLRh.js')),"./translations/he.json": () => Promise.resolve().then(() => require('./he-CLdZZ_n1.js')),"./translations/hi.json": () => Promise.resolve().then(() => require('./hi-3pMoYe6q.js')),"./translations/hu.json": () => Promise.resolve().then(() => require('./hu-VxIqV1X0.js')),"./translations/id.json": () => Promise.resolve().then(() => require('./id-cUUpuxZO.js')),"./translations/it.json": () => Promise.resolve().then(() => require('./it-m8H0rXTP.js')),"./translations/ja.json": () => Promise.resolve().then(() => require('./ja-jhqUhh7F.js')),"./translations/ko.json": () => Promise.resolve().then(() => require('./ko-Fq49QS3z.js')),"./translations/ml.json": () => Promise.resolve().then(() => require('./ml-mLJM4sQP.js')),"./translations/ms.json": () => Promise.resolve().then(() => require('./ms-NDmpSkMY.js')),"./translations/nl.json": () => Promise.resolve().then(() => require('./nl-RREi1JAg.js')),"./translations/no.json": () => Promise.resolve().then(() => require('./no-2wT9Jd9n.js')),"./translations/pl.json": () => Promise.resolve().then(() => require('./pl-kU2npCRO.js')),"./translations/pt-BR.json": () => Promise.resolve().then(() => require('./pt-BR-R-dMJxPL.js')),"./translations/pt.json": () => Promise.resolve().then(() => require('./pt-IygqsPYv.js')),"./translations/ru.json": () => Promise.resolve().then(() => require('./ru-5TBoMH_2.js')),"./translations/sa.json": () => Promise.resolve().then(() => require('./sa-KmwTiEO5.js')),"./translations/sk.json": () => Promise.resolve().then(() => require('./sk-IV2uPmXo.js')),"./translations/sv.json": () => Promise.resolve().then(() => require('./sv-Uv9nW9cN.js')),"./translations/th.json": () => Promise.resolve().then(() => require('./th-SXQwWjv6.js')),"./translations/tr.json": () => Promise.resolve().then(() => require('./tr-RBQM-Vq5.js')),"./translations/uk.json": () => Promise.resolve().then(() => require('./uk-5T4XFIKm.js')),"./translations/vi.json": () => Promise.resolve().then(() => require('./vi-mj-Smy3d.js')),"./translations/zh-Hans.json": () => Promise.resolve().then(() => require('./zh-Hans-eWSoi9-X.js')),"./translations/zh.json": () => Promise.resolve().then(() => require('./zh-6qF5HCOo.js'))})), `./translations/${locale}.json`);
+          const { default: data } = await __variableDynamicImportRuntimeHelper((/* #__PURE__ */ Object.assign({"./translations/ar.json": () => Promise.resolve().then(() => require('./ar-74XpZHjA.js')),"./translations/ca.json": () => Promise.resolve().then(() => require('./ca-tfhzbe_0.js')),"./translations/cs.json": () => Promise.resolve().then(() => require('./cs-sS-228vY.js')),"./translations/de.json": () => Promise.resolve().then(() => require('./de-og0YSnla.js')),"./translations/dk.json": () => Promise.resolve().then(() => require('./dk-GtDhDxRc.js')),"./translations/en.json": () => Promise.resolve().then(() => require('./en-G-ukrF2h.js')),"./translations/es.json": () => Promise.resolve().then(() => require('./es-TQtY4G8X.js')),"./translations/eu.json": () => Promise.resolve().then(() => require('./eu-SRdPRyQu.js')),"./translations/fr.json": () => Promise.resolve().then(() => require('./fr-GW5-kEO9.js')),"./translations/gu.json": () => Promise.resolve().then(() => require('./gu-z6qqOLRh.js')),"./translations/he.json": () => Promise.resolve().then(() => require('./he-CLdZZ_n1.js')),"./translations/hi.json": () => Promise.resolve().then(() => require('./hi-3pMoYe6q.js')),"./translations/hu.json": () => Promise.resolve().then(() => require('./hu-VxIqV1X0.js')),"./translations/id.json": () => Promise.resolve().then(() => require('./id-cUUpuxZO.js')),"./translations/it.json": () => Promise.resolve().then(() => require('./it-m8H0rXTP.js')),"./translations/ja.json": () => Promise.resolve().then(() => require('./ja-jhqUhh7F.js')),"./translations/ko.json": () => Promise.resolve().then(() => require('./ko-Fq49QS3z.js')),"./translations/ml.json": () => Promise.resolve().then(() => require('./ml-mLJM4sQP.js')),"./translations/ms.json": () => Promise.resolve().then(() => require('./ms-NDmpSkMY.js')),"./translations/nl.json": () => Promise.resolve().then(() => require('./nl-RREi1JAg.js')),"./translations/no.json": () => Promise.resolve().then(() => require('./no-2wT9Jd9n.js')),"./translations/pl.json": () => Promise.resolve().then(() => require('./pl-kU2npCRO.js')),"./translations/pt-BR.json": () => Promise.resolve().then(() => require('./pt-BR-R-dMJxPL.js')),"./translations/pt.json": () => Promise.resolve().then(() => require('./pt-IygqsPYv.js')),"./translations/ru.json": () => Promise.resolve().then(() => require('./ru-5TBoMH_2.js')),"./translations/sa.json": () => Promise.resolve().then(() => require('./sa-KmwTiEO5.js')),"./translations/sk.json": () => Promise.resolve().then(() => require('./sk-IV2uPmXo.js')),"./translations/sv.json": () => Promise.resolve().then(() => require('./sv-Uv9nW9cN.js')),"./translations/th.json": () => Promise.resolve().then(() => require('./th-SXQwWjv6.js')),"./translations/tr.json": () => Promise.resolve().then(() => require('./tr-RBQM-Vq5.js')),"./translations/uk.json": () => Promise.resolve().then(() => require('./uk-5T4XFIKm.js')),"./translations/vi.json": () => Promise.resolve().then(() => require('./vi-mj-Smy3d.js')),"./translations/zh-Hans.json": () => Promise.resolve().then(() => require('./zh-Hans-eWSoi9-X.js')),"./translations/zh.json": () => Promise.resolve().then(() => require('./zh-6qF5HCOo.js'))})), `./translations/${locale}.json`);
           return { data, locale };
         } catch {
           return { data: null, locale };
@@ -3623,7 +3840,7 @@ class StrapiApp {
             {
               path: "usecase",
               lazy: async () => {
-                const { PrivateUseCasePage } = await Promise.resolve().then(() => require('./UseCasePage-6_WRtTwv.js'));
+                const { PrivateUseCasePage } = await Promise.resolve().then(() => require('./UseCasePage-g9nN8RuC.js'));
                 return {
                   Component: PrivateUseCasePage
                 };
@@ -3638,7 +3855,7 @@ class StrapiApp {
             {
               path: "/*",
               lazy: async () => {
-                const { PrivateAdminLayout } = await Promise.resolve().then(() => require('./AuthenticatedLayout-TNbTifIA.js'));
+                const { PrivateAdminLayout } = await Promise.resolve().then(() => require('./AuthenticatedLayout-QwEem8GL.js'));
                 return {
                   Component: PrivateAdminLayout
                 };
@@ -3647,7 +3864,7 @@ class StrapiApp {
                 {
                   index: true,
                   lazy: async () => {
-                    const { HomePage } = await Promise.resolve().then(() => require('./HomePage-UTnZwpp-.js'));
+                    const { HomePage } = await Promise.resolve().then(() => require('./HomePage-eU782NVl.js'));
                     return {
                       Component: HomePage
                     };
@@ -3656,7 +3873,7 @@ class StrapiApp {
                 {
                   path: "me",
                   lazy: async () => {
-                    const { ProfilePage } = await Promise.resolve().then(() => require('./ProfilePage-jU98pa61.js'));
+                    const { ProfilePage } = await Promise.resolve().then(() => require('./ProfilePage-lpqTZIyh.js'));
                     return {
                       Component: ProfilePage
                     };
@@ -3665,7 +3882,7 @@ class StrapiApp {
                 {
                   path: "list-plugins",
                   lazy: async () => {
-                    const { ProtectedInstalledPluginsPage } = await Promise.resolve().then(() => require('./InstalledPluginsPage-o43CGz2w.js'));
+                    const { ProtectedInstalledPluginsPage } = await Promise.resolve().then(() => require('./InstalledPluginsPage-gga_OMMI.js'));
                     return {
                       Component: ProtectedInstalledPluginsPage
                     };
@@ -3674,7 +3891,7 @@ class StrapiApp {
                 {
                   path: "marketplace",
                   lazy: async () => {
-                    const { ProtectedMarketplacePage } = await Promise.resolve().then(() => require('./MarketplacePage-sSTqINSu.js'));
+                    const { ProtectedMarketplacePage } = await Promise.resolve().then(() => require('./MarketplacePage-UfmJkfaS.js'));
                     return {
                       Component: ProtectedMarketplacePage
                     };
@@ -3683,7 +3900,7 @@ class StrapiApp {
                 {
                   path: "settings/*",
                   lazy: async () => {
-                    const { Layout } = await Promise.resolve().then(() => require('./Layout-XxmAreH1.js'));
+                    const { Layout } = await Promise.resolve().then(() => require('./Layout-6QqRGC19.js'));
                     return {
                       Component: Layout
                     };
@@ -3692,7 +3909,7 @@ class StrapiApp {
                     {
                       path: "application-infos",
                       lazy: async () => {
-                        const { ApplicationInfoPage } = await Promise.resolve().then(() => require('./ApplicationInfoPage-dc0ReC0D.js'));
+                        const { ApplicationInfoPage } = await Promise.resolve().then(() => require('./ApplicationInfoPage-FlIVu3WL.js'));
                         return {
                           Component: ApplicationInfoPage
                         };
@@ -4304,7 +4521,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__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, style: { minWidth: 184 }, children: [
               [
                 {
@@ -4339,7 +4556,7 @@ const PopoverImpl = () => {
                   }),
                   type: "enumeration"
                 }
-              ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field }, field.name)),
+              ].map((field) => /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field }, field.name)),
               filter && formValues.filter && formValues.filter !== "$null" && formValues.filter !== "$notNull" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -4591,7 +4808,7 @@ const PageSize = ({ options = ["10", "20", "50", "100"] }) => {
         children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: option, children: option }, option))
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", as: "span", children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", tag: "span", children: formatMessage({
       id: "components.PageFooter.select",
       defaultMessage: "Entries per page"
     }) })
@@ -4646,24 +4863,16 @@ const Links = ({ boundaryCount = 1, siblingCount = 1 }) => {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Pagination, { activePage, pageCount, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.PreviousLink,
-      {
-        as: reactRouterDom.Link,
-        to: { search: qs.stringify({ ...query, page: activePage - 1 }) },
-        children: formatMessage({
-          id: "components.pagination.go-to-previous",
-          defaultMessage: "Go to previous page"
-        })
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.PreviousLink, { tag: reactRouterDom.Link, to: { search: qs.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__ */ jsxRuntime.jsx(
           designSystem.PageLink,
           {
-            as: reactRouterDom.Link,
-            active: item === activePage,
+            tag: reactRouterDom.Link,
             number: item,
             to: { search: qs.stringify({ ...query, page: item }) },
             children: formatMessage(
@@ -4676,17 +4885,10 @@ const Links = ({ boundaryCount = 1, siblingCount = 1 }) => {
       }
       return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dots, {}, item);
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.NextLink,
-      {
-        as: reactRouterDom.Link,
-        to: { search: qs.stringify({ ...query, page: activePage + 1 }) },
-        children: formatMessage({
-          id: "components.pagination.go-to-next",
-          defaultMessage: "Go to next page"
-        })
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.NextLink, { tag: reactRouterDom.Link, to: { search: qs.stringify({ ...query, page: activePage + 1 }) }, children: formatMessage({
+      id: "components.pagination.go-to-next",
+      defaultMessage: "Go to next page"
+    }) })
   ] });
 };
 const Pagination = {
@@ -4741,7 +4943,6 @@ const SearchInput = ({
         value,
         clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
         onClear: handleClear,
-        size: "S",
         placeholder,
         children: label
       }
@@ -4752,9 +4953,9 @@ const SearchInput = ({
     {
       ref: iconButtonRef,
       disabled,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { fill: "neutral800" }),
       label: formatMessage({ id: "global.search", defaultMessage: "Search" }),
-      onClick: handleToggle
+      onClick: handleToggle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { fill: "neutral800" })
     }
   );
 };
@@ -4837,20 +5038,12 @@ const HeaderCell = ({ name, label, sortable }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Th,
     {
-      action: isSorted && sortable && /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.IconButton,
-        {
-          label: sortLabel,
-          onClick: handleClickSort,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { isUp: sortOrder === "ASC" }),
-          borderStyle: "none"
-        }
-      ),
+      action: isSorted && sortable && /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: sortLabel, onClick: handleClickSort, borderStyle: "none", children: /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { $isUp: sortOrder === "ASC" }) }),
       children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: sortable ? sortLabel : label, children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Typography,
         {
           textColor: "neutral600",
-          as: !isSorted && sortable ? "button" : "span",
+          tag: !isSorted && sortable ? "button" : "span",
           onClick: handleClickSort,
           variant: "sigma",
           children: label
@@ -4859,8 +5052,8 @@ const HeaderCell = ({ name, label, sortable }) => {
     }
   );
 };
-const SortIcon = styled__default.default(icons.CaretDown)`
-  transform: ${({ isUp }) => `rotate(${isUp ? "180" : "0"}deg)`};
+const SortIcon = styledComponents.styled(icons.CaretDown)`
+  transform: ${({ $isUp }) => `rotate(${$isUp ? "180" : "0"}deg)`};
 `;
 const ActionBar = ({ children }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -4968,8 +5161,8 @@ const CheckboxCell = ({ id, ...props }) => {
     designSystem.BaseCheckbox,
     {
       "aria-label": formatMessage({
-        id: "global.select-all-entries",
-        defaultMessage: "Select all entries"
+        id: "global.select",
+        defaultMessage: "Select"
       }),
       disabled: rows.length === 0,
       checked: isChecked,
@@ -5017,7 +5210,9 @@ const useFetchClient = () => {
   );
 };
 
-const usersService = admin.adminApi.injectEndpoints({
+const usersService = admin.adminApi.enhanceEndpoints({
+  addTagTypes: ["LicenseLimits", "User", "Role", "RolePermissions"]
+}).injectEndpoints({
   endpoints: (builder) => ({
     /**
      * users
@@ -5194,10 +5389,12 @@ exports.ConfirmDialog = ConfirmDialog;
 exports.DescriptionComponentRenderer = DescriptionComponentRenderer;
 exports.Filters = Filters;
 exports.Form = Form;
-exports.InputRenderer = InputRenderer;
 exports.LayoutContent = LayoutContent;
+exports.Layouts = Layouts;
 exports.Login = Login;
 exports.Logo = Logo;
+exports.MemoizedInputRenderer = MemoizedInputRenderer;
+exports.MemoizedStringInput = MemoizedStringInput;
 exports.NpsSurvey = NpsSurvey;
 exports.Pagination = Pagination;
 exports.SETTINGS_LINKS_CE = SETTINGS_LINKS_CE;
@@ -5208,6 +5405,7 @@ exports.UnauthenticatedLayout = UnauthenticatedLayout;
 exports.constants = constants;
 exports.errorsTrads = errorsTrads;
 exports.getBasename = getBasename;
+exports.getYupValidationErrors = getYupValidationErrors;
 exports.isObject = isObject;
 exports.renderAdmin = renderAdmin;
 exports.useAdminUsers = useAdminUsers;
@@ -5224,10 +5422,9 @@ exports.useGetRolePermissionsQuery = useGetRolePermissionsQuery;
 exports.useGetRolesQuery = useGetRolesQuery;
 exports.useGuidedTour = useGuidedTour;
 exports.useInjectReducer = useInjectReducer;
-exports.usePersistentState = usePersistentState;
 exports.useQueryParams = useQueryParams;
 exports.useTable = useTable;
 exports.useUpdateRoleMutation = useUpdateRoleMutation;
 exports.useUpdateRolePermissionsMutation = useUpdateRolePermissionsMutation;
 exports.useUpdateUserMutation = useUpdateUserMutation;
-//# sourceMappingURL=index-FJLgZ-Wg.js.map
+//# sourceMappingURL=index-UrJZyInv.js.map