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

package/dist/admin/{index-7fPlAzj6.mjs → index--VHJr8__.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-OjYDiE2n.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, useTheme } 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, f as useInitQuery, k as createAbsoluteUrl, l as getFetchClient } from './admin-dE-jnuNr.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-HbQI8hB8.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-NURPzLD-.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-T90Opl7K.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,
@@ -1400,7 +1400,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 +1441,347 @@ 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 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 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),
+          selectedDate: value,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
 
-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 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 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 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 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 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 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 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 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 InputRenderer = memo(
   forwardRef((props, forwardRef2) => {
@@ -1799,27 +1819,29 @@ const InputRenderer = memo(
     }
   })
 );
-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 Img = styled.img`
   height: 7.2rem;
@@ -1872,7 +1894,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 +1985,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!"
         }) }) }),
@@ -2022,7 +2044,7 @@ const Login = ({ children }) => {
       ),
       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 +2060,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"
         }) }) }),
@@ -2087,7 +2109,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 +2118,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 +2131,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 +2146,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 +2175,7 @@ const usePersistentState = (key, defaultValue) => {
   return [value, setValue];
 };
 
-const FieldWrapper = styled(Field)`
+const FieldWrapper = styled(Field.Root)`
   height: 3.2rem;
   width: 3.2rem;
 
@@ -2338,9 +2360,9 @@ const NpsSurvey = () => {
           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%", 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?"
               }) }) }),
@@ -2365,6 +2387,7 @@ const NpsSurvey = () => {
                 return /* @__PURE__ */ jsx(
                   FieldWrapper,
                   {
+                    name: "npsSurveyRating",
                     className: values.npsSurveyRating === number ? "selected" : void 0,
                     hasRadius: true,
                     background: "primary100",
@@ -2372,13 +2395,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 +2417,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 +2427,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 +2637,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!"
       }) }),
@@ -2765,7 +2786,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 +2866,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"
         }) }) }),
@@ -2899,7 +2920,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 +2945,11 @@ const AuthPage = () => {
   const { hasAdmin } = data ?? {};
   const Login$1 = useEnterprise(
     Login,
-    async () => (await import('./Login-FSNzATl0.mjs')).LoginEE
+    async () => (await import('./Login-9hdTvAlD.mjs')).LoginEE
   );
   const forms = useEnterprise(
     FORMS,
-    async () => (await import('./constants-wnw4TGwG.mjs')).FORMS,
+    async () => (await import('./constants-K5IOuR0b.mjs')).FORMS,
     {
       combine(ceForms, eeForms) {
         return {
@@ -2968,11 +2989,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 +3185,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 +3207,7 @@ const NotFoundPage = () => {
 const ROUTES_CE = [
   {
     lazy: async () => {
-      const { ProtectedListPage } = await import('./ListPage-kdjzZ2al.mjs');
+      const { ProtectedListPage } = await import('./ListPage-wtqw0RXL.mjs');
       return {
         Component: ProtectedListPage
       };
@@ -3015,7 +3216,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await import('./CreatePage-uTwt_c8J.mjs');
+      const { ProtectedCreatePage } = await import('./CreatePage-1iAK5V1h.mjs');
       return {
         Component: ProtectedCreatePage
       };
@@ -3024,7 +3225,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await import('./CreatePage-uTwt_c8J.mjs');
+      const { ProtectedCreatePage } = await import('./CreatePage-1iAK5V1h.mjs');
       return {
         Component: ProtectedCreatePage
       };
@@ -3033,7 +3234,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await import('./EditPage-F3yH0Fy6.mjs');
+      const { ProtectedEditPage } = await import('./EditPage-xQSTfVfO.mjs');
       return {
         Component: ProtectedEditPage
       };
@@ -3042,7 +3243,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await import('./ListPage-eNkUD3v_.mjs');
+      const { ProtectedListPage } = await import('./ListPage-7wUYXUgs.mjs');
       return {
         Component: ProtectedListPage
       };
@@ -3051,7 +3252,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await import('./EditPage-XSz7Wpt8.mjs');
+      const { ProtectedEditPage } = await import('./EditPage-yFuP3hZG.mjs');
       return {
         Component: ProtectedEditPage
       };
@@ -3060,7 +3261,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await import('./CreatePage-07P5-Zjt.mjs');
+      const { ProtectedCreatePage } = await import('./CreatePage-jsVARlnB.mjs');
       return {
         Component: ProtectedCreatePage
       };
@@ -3069,7 +3270,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await import('./EditPage-lyFePXWl.mjs').then(n => n.b);
+      const { ProtectedEditPage } = await import('./EditPage-JmGISZmG.mjs').then(n => n.b);
       return {
         Component: ProtectedEditPage
       };
@@ -3078,7 +3279,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await import('./ListPage-AFDAiR9X.mjs');
+      const { ProtectedListPage } = await import('./ListPage-HCUzAC2B.mjs');
       return {
         Component: ProtectedListPage
       };
@@ -3087,7 +3288,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await import('./ListView-FBh2WTHx.mjs');
+      const { ProtectedListView } = await import('./ListView-VRdl68JN.mjs');
       return {
         Component: ProtectedListView
       };
@@ -3096,7 +3297,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await import('./CreateView-87aPv9QV.mjs');
+      const { ProtectedCreateView } = await import('./CreateView-tSUpjqXs.mjs');
       return {
         Component: ProtectedCreateView
       };
@@ -3105,7 +3306,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await import('./EditViewPage-f5dHmqdT.mjs');
+      const { ProtectedEditView } = await import('./EditViewPage-x06h850j.mjs');
       return {
         Component: ProtectedEditView
       };
@@ -3114,7 +3315,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await import('./CreateView-T8hLqvog.mjs');
+      const { ProtectedCreateView } = await import('./CreateView-Bi2p6uqA.mjs');
       return {
         Component: ProtectedCreateView
       };
@@ -3123,7 +3324,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await import('./ListView-uwPF62w6.mjs');
+      const { ProtectedListView } = await import('./ListView-hi5fg7r8.mjs');
       return {
         Component: ProtectedListView
       };
@@ -3132,7 +3333,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await import('./EditView-r0lx661I.mjs');
+      const { ProtectedEditView } = await import('./EditView-06IK7yeo.mjs');
       return {
         Component: ProtectedEditView
       };
@@ -3141,7 +3342,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseAuditLogs } = await import('./PurchaseAuditLogs-_1tVWtNF.mjs');
+      const { PurchaseAuditLogs } = await import('./PurchaseAuditLogs-RGCYZl25.mjs');
       return {
         Component: PurchaseAuditLogs
       };
@@ -3150,7 +3351,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseSingleSignOn } = await import('./PurchaseSingleSignOn-VUU-U4wi.mjs');
+      const { PurchaseSingleSignOn } = await import('./PurchaseSingleSignOn-uMysWmJV.mjs');
       return {
         Component: PurchaseSingleSignOn
       };
@@ -3587,7 +3788,7 @@ class StrapiApp {
             {
               path: "usecase",
               lazy: async () => {
-                const { PrivateUseCasePage } = await import('./UseCasePage-bfP-fDoW.mjs');
+                const { PrivateUseCasePage } = await import('./UseCasePage-cNK2fN9i.mjs');
                 return {
                   Component: PrivateUseCasePage
                 };
@@ -3602,7 +3803,7 @@ class StrapiApp {
             {
               path: "/*",
               lazy: async () => {
-                const { PrivateAdminLayout } = await import('./AuthenticatedLayout-eMLYKMgW.mjs');
+                const { PrivateAdminLayout } = await import('./AuthenticatedLayout-LYVDZ-jl.mjs');
                 return {
                   Component: PrivateAdminLayout
                 };
@@ -3611,7 +3812,7 @@ class StrapiApp {
                 {
                   index: true,
                   lazy: async () => {
-                    const { HomePage } = await import('./HomePage-ZF3T0k2r.mjs');
+                    const { HomePage } = await import('./HomePage-ytofle46.mjs');
                     return {
                       Component: HomePage
                     };
@@ -3620,7 +3821,7 @@ class StrapiApp {
                 {
                   path: "me",
                   lazy: async () => {
-                    const { ProfilePage } = await import('./ProfilePage-T2kC_KoM.mjs');
+                    const { ProfilePage } = await import('./ProfilePage-imi1Exl5.mjs');
                     return {
                       Component: ProfilePage
                     };
@@ -3629,7 +3830,7 @@ class StrapiApp {
                 {
                   path: "list-plugins",
                   lazy: async () => {
-                    const { ProtectedInstalledPluginsPage } = await import('./InstalledPluginsPage-eOXi3oTN.mjs');
+                    const { ProtectedInstalledPluginsPage } = await import('./InstalledPluginsPage--iVM14K3.mjs');
                     return {
                       Component: ProtectedInstalledPluginsPage
                     };
@@ -3638,7 +3839,7 @@ class StrapiApp {
                 {
                   path: "marketplace",
                   lazy: async () => {
-                    const { ProtectedMarketplacePage } = await import('./MarketplacePage-kNQPkoZK.mjs');
+                    const { ProtectedMarketplacePage } = await import('./MarketplacePage-hCtNAEWd.mjs');
                     return {
                       Component: ProtectedMarketplacePage
                     };
@@ -3647,7 +3848,7 @@ class StrapiApp {
                 {
                   path: "settings/*",
                   lazy: async () => {
-                    const { Layout } = await import('./Layout-mnn4_IJp.mjs');
+                    const { Layout } = await import('./Layout-woodqxaL.mjs');
                     return {
                       Component: Layout
                     };
@@ -3656,7 +3857,7 @@ class StrapiApp {
                     {
                       path: "application-infos",
                       lazy: async () => {
-                        const { ApplicationInfoPage } = await import('./ApplicationInfoPage-TImAEuc3.mjs');
+                        const { ApplicationInfoPage } = await import('./ApplicationInfoPage-aB-vx1uX.mjs');
                         return {
                           Component: ApplicationInfoPage
                         };
@@ -4555,7 +4756,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 +4811,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 +4833,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 = {
@@ -4806,7 +4992,7 @@ const HeaderCell = ({ name, label, sortable }) => {
         {
           label: sortLabel,
           onClick: handleClickSort,
-          icon: /* @__PURE__ */ jsx(SortIcon, { isUp: sortOrder === "ASC" }),
+          icon: /* @__PURE__ */ jsx(SortIcon, { $isUp: sortOrder === "ASC" }),
           borderStyle: "none"
         }
       ),
@@ -4814,7 +5000,7 @@ const HeaderCell = ({ name, label, sortable }) => {
         Typography,
         {
           textColor: "neutral600",
-          as: !isSorted && sortable ? "button" : "span",
+          tag: !isSorted && sortable ? "button" : "span",
           onClick: handleClickSort,
           variant: "sigma",
           children: label
@@ -4824,7 +5010,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();
@@ -5151,5 +5337,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, InputRenderer as I, Blocker as J, useTable as K, LayoutContent as L, constants as M, NpsSurvey as N, 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, StringInput as y, StrapiLogo as z };
+//# sourceMappingURL=index--VHJr8__.mjs.map