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

package/dist/admin/{index-Ze-KuF2r.js → index-8r8zglVb.js}

@@ -10,17 +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-WZsv1761.js');
+const rbac = require('./rbac-xo8GO653.js');
 const reactQuery = require('react-query');
-const v2 = require('@strapi/design-system/v2');
 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-sk7xXllW.js');
 const useEnterprise = require('./useEnterprise-DUs6BYlP.js');
 const camelCase = require('lodash/camelCase');
 const yup = require('yup');
@@ -30,6 +29,7 @@ const clone = require('lodash/clone');
 const toPath = require('lodash/toPath');
 const omit = require('lodash/omit');
 const formik = require('formik');
+const symbols = require('@strapi/icons/symbols');
 const throttle = require('lodash/throttle');
 const qs = require('qs');
 
@@ -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-FrsRAqFn.js'));
+      const { AuthResponse } = await Promise.resolve().then(() => require('./AuthResponse-YXlkDXrI.js'));
       return {
         Component: AuthResponse
       };
@@ -144,7 +143,7 @@ const getEERoutes = () => [
     {
       path: "audit-logs",
       lazy: async () => {
-        const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-hhPlIMGc.js'));
+        const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-5OElNgYk.js'));
         return {
           Component: ProtectedListPage
         };
@@ -155,7 +154,7 @@ const getEERoutes = () => [
     {
       path: "single-sign-on",
       lazy: async () => {
-        const { ProtectedSSO } = await Promise.resolve().then(() => require('./SingleSignOnPage-TFMqxPEF.js'));
+        const { ProtectedSSO } = await Promise.resolve().then(() => require('./SingleSignOnPage-bnlsJPDh.js'));
         return {
           Component: ProtectedSSO
         };
@@ -254,11 +253,11 @@ const BackButton = React__namespace.forwardRef(({ disabled }, ref) => {
     goBack();
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    v2.Link,
+    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,
@@ -537,7 +536,7 @@ ${error.stack}
         maxWidth: "512px",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icons.ExclamationMarkCircle, width: "32px", height: "32px", color: "danger600" }),
+            /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, { width: "32px", height: "32px", fill: "danger600" }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontSize: 4, fontWeight: "bold", textAlign: "center", children: formatMessage({
               id: "app.error",
               defaultMessage: "Something went wrong"
@@ -549,7 +548,7 @@ ${error.stack}
               },
               {
                 link: /* @__PURE__ */ jsxRuntime.jsx(
-                  v2.Link,
+                  designSystem.Link,
                   {
                     isExternal: true,
                     endIcon: true,
@@ -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};
 `;
@@ -1435,8 +1434,8 @@ const Blocker = ({ onProceed = () => {
         onClose: handleCancel,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.DialogBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icons.ExclamationMarkCircle, width: "24px", height: "24px", color: "danger600" }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "p", variant: "omega", textAlign: "center", children: formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
+            /* @__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 +1476,347 @@ 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 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 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),
+          selectedDate: value,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
 
-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 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 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 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: `${252 / 16}rem`,
-        maxHeight: `${504 / 16}rem`,
-        ...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 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 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(designSystem.Icon, { as: icons.Eye, color: "neutral500" }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icons.EyeStriked, color: "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 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 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 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 InputRenderer = React.memo(
   React.forwardRef((props, forwardRef2) => {
@@ -1835,30 +1854,32 @@ const InputRenderer = React.memo(
     }
   })
 );
-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 Img = styled__default.default.img`
-  height: ${72 / 16}rem;
+const Img = styledComponents.styled.img`
+  height: 7.2rem;
 `;
 const Logo = () => {
   const {
@@ -1867,11 +1888,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 +1929,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 +2020,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!"
         }) }) }),
@@ -2058,7 +2079,7 @@ const Login = ({ children }) => {
       ),
       children
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(v2.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 +2095,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"
         }) }) }),
@@ -2123,7 +2144,7 @@ const ForgotPassword = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(v2.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 +2153,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 +2166,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(v2.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 +2181,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(v2.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,9 +2210,9 @@ const usePersistentState = (key, defaultValue) => {
   return [value, setValue];
 };
 
-const FieldWrapper = styled__default.default(designSystem.Field)`
-  height: ${32 / 16}rem;
-  width: ${32 / 16}rem;
+const FieldWrapper = styledComponents.styled(designSystem.Field.Root)`
+  height: 3.2rem;
+  width: 3.2rem;
 
   > label,
   ~ input {
@@ -2266,7 +2287,7 @@ const checkIfShouldShowSurvey = (settings) => {
   return true;
 };
 const NpsSurvey = () => {
-  const theme = styled.useTheme();
+  const theme = styledComponents.useTheme();
   const { formatMessage } = reactIntl.useIntl();
   const { npsSurveySettings, setNpsSurveySettings } = useNpsSurveySettings();
   const [isFeedbackResponse, setIsFeedbackResponse] = React__namespace.useState(false);
@@ -2374,9 +2395,9 @@ const NpsSurvey = () => {
           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%", 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?"
               }) }) }),
@@ -2401,6 +2422,7 @@ const NpsSurvey = () => {
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   FieldWrapper,
                   {
+                    name: "npsSurveyRating",
                     className: values.npsSurveyRating === number ? "selected" : void 0,
                     hasRadius: true,
                     background: "primary100",
@@ -2408,13 +2430,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 +2452,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 +2462,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 +2672,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!"
       }) }),
@@ -2801,7 +2821,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(v2.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 +2843,7 @@ function normalizeData(data) {
     {}
   );
 }
-const A = styled__default.default.a`
+const A = styledComponents.styled.a`
   color: ${({ theme }) => theme.colors.primary600};
 `;
 
@@ -2881,7 +2901,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"
         }) }) }),
@@ -2935,7 +2955,7 @@ const ResetPassword = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(v2.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 +2980,11 @@ const AuthPage = () => {
   const { hasAdmin } = data ?? {};
   const Login$1 = useEnterprise.useEnterprise(
     Login,
-    async () => (await Promise.resolve().then(() => require('./Login-Qfx7Y8LA.js'))).LoginEE
+    async () => (await Promise.resolve().then(() => require('./Login-bGhxScoT.js'))).LoginEE
   );
   const forms = useEnterprise.useEnterprise(
     FORMS,
-    async () => (await Promise.resolve().then(() => require('./constants-EH1lNehX.js'))).FORMS,
+    async () => (await Promise.resolve().then(() => require('./constants-ZW8_ZgiN.js'))).FORMS,
     {
       combine(ceForms, eeForms) {
         return {
@@ -3004,11 +3024,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,22 +3220,19 @@ 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(v2.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..."
         }),
         hasRadius: true,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.EmptyPictures, { width: "10rem" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(symbols.EmptyPictures, { width: "16rem" }),
         shadow: "tableShadow"
       }
     ) })
@@ -3042,7 +3242,7 @@ const NotFoundPage = () => {
 const ROUTES_CE = [
   {
     lazy: async () => {
-      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-FJ7Z1gS2.js'));
+      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-0zYjdNsU.js'));
       return {
         Component: ProtectedListPage
       };
@@ -3051,7 +3251,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-aBOoUjUW.js'));
+      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-uHcWJ0EG.js'));
       return {
         Component: ProtectedCreatePage
       };
@@ -3060,7 +3260,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-aBOoUjUW.js'));
+      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-uHcWJ0EG.js'));
       return {
         Component: ProtectedCreatePage
       };
@@ -3069,7 +3269,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-FLtTVd-J.js'));
+      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-LMYuiLOp.js'));
       return {
         Component: ProtectedEditPage
       };
@@ -3078,7 +3278,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-AzfR4Vrk.js'));
+      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-MxOKlYmC.js'));
       return {
         Component: ProtectedListPage
       };
@@ -3087,7 +3287,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-l77sfwOj.js'));
+      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-MGQBBDmf.js'));
       return {
         Component: ProtectedEditPage
       };
@@ -3096,7 +3296,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-FylqLa6E.js'));
+      const { ProtectedCreatePage } = await Promise.resolve().then(() => require('./CreatePage-ZrJXDmLJ.js'));
       return {
         Component: ProtectedCreatePage
       };
@@ -3105,7 +3305,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-QD0hqEQx.js')).then(n => n.EditPage$1);
+      const { ProtectedEditPage } = await Promise.resolve().then(() => require('./EditPage-2l5T1lDC.js')).then(n => n.EditPage$1);
       return {
         Component: ProtectedEditPage
       };
@@ -3114,7 +3314,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-av7186GD.js'));
+      const { ProtectedListPage } = await Promise.resolve().then(() => require('./ListPage-V26wHeo6.js'));
       return {
         Component: ProtectedListPage
       };
@@ -3123,7 +3323,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-MHzoKSAg.js'));
+      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-siyyh4f7.js'));
       return {
         Component: ProtectedListView
       };
@@ -3132,7 +3332,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-s_woT94q.js'));
+      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-1WqjD6uO.js'));
       return {
         Component: ProtectedCreateView
       };
@@ -3141,7 +3341,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditViewPage-mLGPwfRP.js'));
+      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditViewPage-ZTHin7cu.js'));
       return {
         Component: ProtectedEditView
       };
@@ -3150,7 +3350,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-L-2WWDGY.js'));
+      const { ProtectedCreateView } = await Promise.resolve().then(() => require('./CreateView-HhvACL4t.js'));
       return {
         Component: ProtectedCreateView
       };
@@ -3159,7 +3359,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-WmnatWVx.js'));
+      const { ProtectedListView } = await Promise.resolve().then(() => require('./ListView-SmHj4MFz.js'));
       return {
         Component: ProtectedListView
       };
@@ -3168,7 +3368,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditView-0jWi165t.js'));
+      const { ProtectedEditView } = await Promise.resolve().then(() => require('./EditView-9cnQdotQ.js'));
       return {
         Component: ProtectedEditView
       };
@@ -3177,7 +3377,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseAuditLogs } = await Promise.resolve().then(() => require('./PurchaseAuditLogs-tS_tVSGI.js'));
+      const { PurchaseAuditLogs } = await Promise.resolve().then(() => require('./PurchaseAuditLogs-xUopaGaS.js'));
       return {
         Component: PurchaseAuditLogs
       };
@@ -3186,7 +3386,7 @@ const ROUTES_CE = [
   },
   {
     lazy: async () => {
-      const { PurchaseSingleSignOn } = await Promise.resolve().then(() => require('./PurchaseSingleSignOn-9SV6-fYs.js'));
+      const { PurchaseSingleSignOn } = await Promise.resolve().then(() => require('./PurchaseSingleSignOn-XOgkJmcn.js'));
       return {
         Component: PurchaseSingleSignOn
       };
@@ -3329,10 +3529,6 @@ class StrapiApp {
       link.Component && typeof link.Component === "function",
       `[${link.intlLabel.defaultMessage}]: link.Component must be a function returning a Promise that returns a default component. Please use: \`Component: () => import(path)\` instead.`
     );
-    invariant__default.default(
-      link.icon && typeof link.icon === "function",
-      `[${link.intlLabel.defaultMessage}]: link.Icon should be a valid React Component`
-    );
     if (link.Component && typeof link.Component === "function" && // @ts-expect-error – shh
     link.Component[Symbol.toStringTag] === "AsyncFunction") {
       console.warn(
@@ -3523,7 +3719,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-2FB7x9Rq.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-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`);
           return { data, locale };
         } catch {
           return { data: null, locale };
@@ -3627,7 +3823,7 @@ class StrapiApp {
             {
               path: "usecase",
               lazy: async () => {
-                const { PrivateUseCasePage } = await Promise.resolve().then(() => require('./UseCasePage-R3vzwRYQ.js'));
+                const { PrivateUseCasePage } = await Promise.resolve().then(() => require('./UseCasePage-uk5jmSsj.js'));
                 return {
                   Component: PrivateUseCasePage
                 };
@@ -3642,7 +3838,7 @@ class StrapiApp {
             {
               path: "/*",
               lazy: async () => {
-                const { PrivateAdminLayout } = await Promise.resolve().then(() => require('./AuthenticatedLayout-vS7Bwbws.js'));
+                const { PrivateAdminLayout } = await Promise.resolve().then(() => require('./AuthenticatedLayout-xkecaUXJ.js'));
                 return {
                   Component: PrivateAdminLayout
                 };
@@ -3651,7 +3847,7 @@ class StrapiApp {
                 {
                   index: true,
                   lazy: async () => {
-                    const { HomePage } = await Promise.resolve().then(() => require('./HomePage-p-eVAC_O.js'));
+                    const { HomePage } = await Promise.resolve().then(() => require('./HomePage-VKuqPKIc.js'));
                     return {
                       Component: HomePage
                     };
@@ -3660,7 +3856,7 @@ class StrapiApp {
                 {
                   path: "me",
                   lazy: async () => {
-                    const { ProfilePage } = await Promise.resolve().then(() => require('./ProfilePage-1ptv647K.js'));
+                    const { ProfilePage } = await Promise.resolve().then(() => require('./ProfilePage-8ieqgIrW.js'));
                     return {
                       Component: ProfilePage
                     };
@@ -3669,7 +3865,7 @@ class StrapiApp {
                 {
                   path: "list-plugins",
                   lazy: async () => {
-                    const { ProtectedInstalledPluginsPage } = await Promise.resolve().then(() => require('./InstalledPluginsPage-ZIPyDrzh.js'));
+                    const { ProtectedInstalledPluginsPage } = await Promise.resolve().then(() => require('./InstalledPluginsPage-5fDQJ3wY.js'));
                     return {
                       Component: ProtectedInstalledPluginsPage
                     };
@@ -3678,7 +3874,7 @@ class StrapiApp {
                 {
                   path: "marketplace",
                   lazy: async () => {
-                    const { ProtectedMarketplacePage } = await Promise.resolve().then(() => require('./MarketplacePage-bs_XrVBk.js'));
+                    const { ProtectedMarketplacePage } = await Promise.resolve().then(() => require('./MarketplacePage-t6FAhfMK.js'));
                     return {
                       Component: ProtectedMarketplacePage
                     };
@@ -3687,7 +3883,7 @@ class StrapiApp {
                 {
                   path: "settings/*",
                   lazy: async () => {
-                    const { Layout } = await Promise.resolve().then(() => require('./Layout-TtAytojj.js'));
+                    const { Layout } = await Promise.resolve().then(() => require('./Layout-BYaZsvrJ.js'));
                     return {
                       Component: Layout
                     };
@@ -3696,7 +3892,7 @@ class StrapiApp {
                     {
                       path: "application-infos",
                       lazy: async () => {
-                        const { ApplicationInfoPage } = await Promise.resolve().then(() => require('./ApplicationInfoPage-leY1AEgo.js'));
+                        const { ApplicationInfoPage } = await Promise.resolve().then(() => require('./ApplicationInfoPage-75RPd0Ro.js'));
                         return {
                           Component: ApplicationInfoPage
                         };
@@ -3800,7 +3996,7 @@ const renderAdmin = async (mountNode, { plugins, customisations, features }) =>
 
 const ConfirmDialog = ({
   children,
-  icon = /* @__PURE__ */ jsxRuntime.jsx(icons.ExclamationMarkCircle, {}),
+  icon = /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, {}),
   onClose,
   onConfirm,
   variant = "danger",
@@ -4595,7 +4791,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"
     }) })
@@ -4649,25 +4845,17 @@ const Links = ({ boundaryCount = 1, siblingCount = 1 }) => {
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(v2.Pagination, { activePage, pageCount, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      v2.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"
-        })
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Pagination, { activePage, pageCount, children: [
+    /* @__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(
-          v2.PageLink,
+          designSystem.PageLink,
           {
-            as: reactRouterDom.Link,
-            active: item === activePage,
+            tag: reactRouterDom.Link,
             number: item,
             to: { search: qs.stringify({ ...query, page: item }) },
             children: formatMessage(
@@ -4678,19 +4866,12 @@ const Links = ({ boundaryCount = 1, siblingCount = 1 }) => {
           item
         );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(v2.Dots, {}, item);
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dots, {}, item);
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      v2.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 = {
@@ -4756,7 +4937,7 @@ const SearchInput = ({
     {
       ref: iconButtonRef,
       disabled,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Icon, { as: icons.Search, color: "neutral800" }),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { fill: "neutral800" }),
       label: formatMessage({ id: "global.search", defaultMessage: "Search" }),
       onClick: handleToggle
     }
@@ -4846,7 +5027,7 @@ const HeaderCell = ({ name, label, sortable }) => {
         {
           label: sortLabel,
           onClick: handleClickSort,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { isUp: sortOrder === "ASC" }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { $isUp: sortOrder === "ASC" }),
           borderStyle: "none"
         }
       ),
@@ -4854,7 +5035,7 @@ const HeaderCell = ({ name, label, sortable }) => {
         designSystem.Typography,
         {
           textColor: "neutral600",
-          as: !isSorted && sortable ? "button" : "span",
+          tag: !isSorted && sortable ? "button" : "span",
           onClick: handleClickSort,
           variant: "sigma",
           children: label
@@ -4863,8 +5044,8 @@ const HeaderCell = ({ name, label, sortable }) => {
     }
   );
 };
-const SortIcon = styled__default.default(icons.CarretDown)`
-  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();
@@ -4934,7 +5115,7 @@ const Empty = (props) => {
         defaultMessage: "No content found"
       }),
       hasRadius: true,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.EmptyDocuments, { width: "10rem" }),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(symbols.EmptyDocuments, { width: "16rem" }),
       ...props
     }
   ) }) }) });
@@ -5200,6 +5381,7 @@ exports.Filters = Filters;
 exports.Form = Form;
 exports.InputRenderer = InputRenderer;
 exports.LayoutContent = LayoutContent;
+exports.Layouts = Layouts;
 exports.Login = Login;
 exports.Logo = Logo;
 exports.NpsSurvey = NpsSurvey;
@@ -5207,6 +5389,7 @@ exports.Pagination = Pagination;
 exports.SETTINGS_LINKS_CE = SETTINGS_LINKS_CE;
 exports.SearchInput = SearchInput;
 exports.StrapiLogo = StrapiLogo;
+exports.StringInput = StringInput;
 exports.Table = Table;
 exports.UnauthenticatedLayout = UnauthenticatedLayout;
 exports.constants = constants;
@@ -5228,10 +5411,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-Ze-KuF2r.js.map
+//# sourceMappingURL=index-8r8zglVb.js.map