@strapi/admin 4.11.3 → 4.11.4

package/admin/src/components/AuthenticatedApp/index.js

@@ -38,7 +38,7 @@ const AuthenticatedApp = () => {
   const [
     { data: appInfos, status },
     { data: tagName, isLoading },
-    { data: permissions, status: fetchPermissionsStatus, refetch, isFetched, isFetching },
+    { data: permissions, status: fetchPermissionsStatus, refetch, isFetching },
     { data: userRoles },
   ] = useQueries([
     { queryKey: 'app-infos', queryFn: fetchAppInfo },
@@ -86,7 +86,7 @@ const AuthenticatedApp = () => {
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions
   const shouldShowNotDependentQueriesLoader =
-    (isFetching && isFetched) || status === 'loading' || fetchPermissionsStatus === 'loading';
+    isFetching || status === 'loading' || fetchPermissionsStatus === 'loading';
 
   const shouldShowLoader = isLoading || shouldShowNotDependentQueriesLoader;
 

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -1,24 +1,17 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useRef, useState, useMemo, useEffect } from 'react';
 
 import {
+  Status,
   Box,
-  Field,
-  FieldError,
-  FieldHint,
-  FieldLabel,
-  Icon,
   Link,
-  Status,
+  Icon,
+  Flex,
   TextButton,
-  Tooltip,
   Typography,
+  Tooltip,
   VisuallyHidden,
+  Combobox,
 } from '@strapi/design-system';
-/**
- * TODO: this will come in another PR.
- */
-// eslint-disable-next-line no-restricted-imports
-import { ReactSelect } from '@strapi/helper-plugin';
 import { Cross, Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { FixedSizeList as List } from 'react-window';
@@ -27,7 +20,6 @@ import styled from 'styled-components';
 import { usePrev } from '../../hooks';
 
 import { Option } from './components/Option';
-import { Relation } from './components/Relation';
 import { RelationItem } from './components/RelationItem';
 import { RelationList } from './components/RelationList';
 import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';
@@ -88,7 +80,7 @@ const RelationInput = ({
   searchResults,
   size,
 }) => {
-  const [value, setValue] = useState(null);
+  const [textValue, setTextValue] = useState('');
   const [overflow, setOverflow] = useState('');
 
   const listRef = useRef();
@@ -158,71 +150,10 @@ const RelationInput = ({
     };
   }, [paginatedRelations, relations, numberOfRelationsToDisplay, totalNumberOfRelations]);
 
-  /**
-   * --- ReactSelect Workaround START ---
-   */
-  /**
-   * This code is being isolated because it's a hack to fix a placement bug in
-   * `react-select` where when the options prop is updated the position of the
-   * menu is not recalculated.
-   */
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const timeoutRef = useRef();
-  const previousOptions = useRef([]);
-
-  useEffect(() => {
-    /**
-     * We only really want this effect to fire once when the options
-     * change from an empty array to an array with values.
-     * Otherwise, it'll fire when the infinite scrolling happens causing
-     * the menu to jump to the top all the time when loading more.
-     */
-    if (options.length > 0 && previousOptions.current.length === 0) {
-      setIsMenuOpen((isCurrentlyOpened) => {
-        /**
-         * If we're currently open and the options changed
-         * we want to close and open to ensure the menu's
-         * position is correctly calculated
-         */
-        if (isCurrentlyOpened) {
-          timeoutRef.current = setTimeout(() => {
-            setIsMenuOpen(true);
-          }, 10);
-
-          return false;
-        }
-
-        return false;
-      });
+  const handleMenuOpen = (isOpen) => {
+    if (isOpen) {
+      onSearch();
     }
-
-    return () => {
-      previousOptions.current = options || [];
-    };
-  }, [options]);
-
-  useEffect(() => {
-    return () => {
-      /**
-       * If the component unmounts and a timer is set we should clear that timer
-       */
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleMenuClose = () => {
-    setIsMenuOpen(false);
-  };
-  /**
-   * --- ReactSelect Workaround END ---
-   */
-
-  const handleMenuOpen = () => {
-    setIsMenuOpen(true);
-    onSearch();
   };
 
   /**
@@ -250,122 +181,112 @@ const RelationInput = ({
   };
 
   useEffect(() => {
+    if (updatedRelationsWith.current === 'onChange') {
+      setTextValue('');
+    }
+
     if (
       updatedRelationsWith.current === 'onChange' &&
       relations.length !== previewRelationsLength
     ) {
       listRef.current.scrollToItem(relations.length, 'end');
+      updatedRelationsWith.current = undefined;
     } else if (
       updatedRelationsWith.current === 'loadMore' &&
       relations.length !== previewRelationsLength
     ) {
       listRef.current.scrollToItem(0, 'start');
+      updatedRelationsWith.current = undefined;
     }
-
-    updatedRelationsWith.current = undefined;
   }, [previewRelationsLength, relations]);
 
   const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Field error={error} name={name} hint={description} id={id} required={required}>
-      <Relation
-        totalNumberOfRelations={totalNumberOfRelations}
-        size={size}
-        search={
-          <>
-            <FieldLabel action={labelAction}>{label}</FieldLabel>
-            <ReactSelect
-              // position fixed doesn't update position on scroll
-              // react select doesn't update menu position on options change
-              menuPosition="absolute"
-              menuPlacement="auto"
-              components={{ Option }}
-              options={options}
-              isDisabled={disabled}
-              isLoading={searchResults.isLoading}
-              error={error}
-              inputId={id}
-              isSearchable
-              isClear
-              loadingMessage={() => loadingMessage}
-              onChange={(relation) => {
-                setValue(null);
-                onRelationConnect(relation);
-                updatedRelationsWith.current = 'onChange';
-              }}
-              onInputChange={(value) => {
-                setValue(value);
-                onSearch(value);
-              }}
-              onMenuClose={handleMenuClose}
-              onMenuOpen={handleMenuOpen}
-              menuIsOpen={isMenuOpen}
-              noOptionsMessage={() => noRelationsMessage}
-              onMenuScrollToBottom={() => {
-                if (searchResults.hasNextPage) {
-                  onSearchNextPage();
-                }
-              }}
-              placeholder={placeholder}
-              name={name}
-              value={value}
-            />
-          </>
-        }
-        loadMore={
-          shouldDisplayLoadMoreButton && (
-            <TextButton
-              disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
-              onClick={handleLoadMore}
-              loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
-              startIcon={<Refresh />}
-            >
-              {labelLoadMore}
-            </TextButton>
-          )
-        }
-      >
-        {relations.length > 0 && (
-          <RelationList overflow={overflow}>
-            <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
-            <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
-            <List
-              height={dynamicListHeight}
-              ref={listRef}
-              outerRef={outerListRef}
-              itemCount={totalNumberOfRelations}
-              itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}
-              itemData={{
-                name,
-                ariaDescribedBy: ariaDescriptionId,
-                canDrag: canReorder,
-                disabled,
-                handleCancel: onCancel,
-                handleDropItem: onDropItem,
-                handleGrabItem: onGrabItem,
-                iconButtonAriaLabel,
-                labelDisconnectRelation,
-                onRelationDisconnect,
-                publicationStateTranslations,
-                relations,
-                updatePositionOfRelation: handleUpdatePositionOfRelation,
-              }}
-              itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
-              innerElementType="ol"
-            >
-              {ListItem}
-            </List>
-          </RelationList>
-        )}
-        {(description || error) && (
-          <Box paddingTop={2}>
-            <FieldHint />
-            <FieldError />
-          </Box>
+    <Flex gap={3} justifyContent="space-between" alignItems="end" wrap="wrap">
+      <Flex direction="column" alignItems="stretch" basis={size <= 6 ? '100%' : '70%'} gap={2}>
+        <Combobox
+          autocomplete="list"
+          error={error}
+          name={name}
+          hint={description}
+          id={id}
+          required={required}
+          label={label}
+          labelAction={labelAction}
+          disabled={disabled}
+          placeholder={placeholder}
+          hasMoreItems={searchResults.hasNextPage}
+          loading={searchResults.isLoading}
+          onOpenChange={handleMenuOpen}
+          noOptionsMessage={() => noRelationsMessage}
+          loadingMessage={loadingMessage}
+          onLoadMore={() => {
+            onSearchNextPage();
+          }}
+          textValue={textValue}
+          onChange={(relationId) => {
+            if (!relationId) {
+              return;
+            }
+            onRelationConnect(options.find((opt) => opt.id === relationId));
+            updatedRelationsWith.current = 'onChange';
+          }}
+          onTextValueChange={(text) => {
+            setTextValue(text);
+          }}
+          onInputChange={(event) => {
+            onSearch(event.currentTarget.value);
+          }}
+        >
+          {options.map((opt) => {
+            return <Option key={opt.id} {...opt} />;
+          })}
+        </Combobox>
+        {shouldDisplayLoadMoreButton && (
+          <TextButton
+            disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+            onClick={handleLoadMore}
+            loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+            startIcon={<Refresh />}
+          >
+            {labelLoadMore}
+          </TextButton>
         )}
-      </Relation>
-    </Field>
+      </Flex>
+      {relations.length > 0 && (
+        <RelationList overflow={overflow}>
+          <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
+          <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
+          <List
+            height={dynamicListHeight}
+            ref={listRef}
+            outerRef={outerListRef}
+            itemCount={totalNumberOfRelations}
+            itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}
+            itemData={{
+              name,
+              ariaDescribedBy: ariaDescriptionId,
+              canDrag: canReorder,
+              disabled,
+              handleCancel: onCancel,
+              handleDropItem: onDropItem,
+              handleGrabItem: onGrabItem,
+              iconButtonAriaLabel,
+              labelDisconnectRelation,
+              onRelationDisconnect,
+              publicationStateTranslations,
+              relations,
+              updatePositionOfRelation: handleUpdatePositionOfRelation,
+            }}
+            itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
+            innerElementType="ol"
+          >
+            {ListItem}
+          </List>
+        </RelationList>
+      )}
+    </Flex>
   );
 };
 

package/admin/src/content-manager/components/RelationInput/components/Option.js

@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { Flex, Typography } from '@strapi/design-system';
+import { Flex, Typography, ComboboxOption } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { components } from 'react-select';
 import styled from 'styled-components';
 
 import { getTrad } from '../../../utils';
@@ -19,10 +18,8 @@ const StyledBullet = styled.div`
   border-radius: 50%;
 `;
 
-export const Option = (props) => {
+export const Option = ({ publicationState, mainField, id }) => {
   const { formatMessage } = useIntl();
-  const Component = components.Option;
-  const { publicationState, mainField, id } = props.data;
 
   if (publicationState) {
     const isDraft = publicationState === 'draft';
@@ -37,24 +34,29 @@ export const Option = (props) => {
     const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
     return (
-      <Component {...props}>
+      <ComboboxOption value={id} textValue={mainField ?? id}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
           <Typography ellipsis>{mainField ?? id}</Typography>
         </Flex>
-      </Component>
+      </ComboboxOption>
     );
   }
 
-  return <Component {...props}>{mainField ?? id}</Component>;
+  return (
+    <ComboboxOption value={id} textValue={mainField ?? id}>
+      {mainField ?? id}
+    </ComboboxOption>
+  );
+};
+
+Option.defaultProps = {
+  mainField: undefined,
+  publicationState: undefined,
 };
 
 Option.propTypes = {
-  isFocused: PropTypes.bool.isRequired,
-  data: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    isDraft: PropTypes.bool,
-    mainField: PropTypes.string,
-    publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  }).isRequired,
+  id: PropTypes.number.isRequired,
+  mainField: PropTypes.string,
+  publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 };

package/admin/src/content-manager/components/RelationInput/components/RelationList.js

@@ -6,8 +6,8 @@ import styled from 'styled-components';
 
 const ShadowBox = styled(Box)`
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
+  flex: 1;
 
   &:before,
   &:after {

package/admin/src/content-manager/pages/ListView/index.js

@@ -33,6 +33,7 @@ import {
 } from '@strapi/helper-plugin';
 import { ArrowLeft, Cog, Plus } from '@strapi/icons';
 import axios from 'axios';
+import getReviewWorkflowsColumn from 'ee_else_ce/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/getTableColumn';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { stringify } from 'qs';
@@ -391,6 +392,17 @@ function ListView({
       return formattedHeaders;
     }
 
+    // this should not exist. Ideally we would use registerHook() similar to what has been done
+    // in the i18n plugin. In order to do that review-workflows should have been a plugin. In
+    // a future iteration we need to find a better pattern.
+
+    // In CE this will return null - in EE a column definition including the custom formatting component.
+    const reviewWorkflowColumn = getReviewWorkflowsColumn(layout);
+
+    if (reviewWorkflowColumn) {
+      formattedHeaders.push(reviewWorkflowColumn);
+    }
+
     return [
       ...formattedHeaders,
       {

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -10,6 +10,7 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import DeleteButton from './DeleteButton';
@@ -28,6 +29,7 @@ const Table = ({
   const { canDelete, canUpdate, canRead } = permissions;
   const withBulkActions = canDelete || canUpdate || canRead;
   const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
   const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
   const {
     push,
@@ -83,7 +85,19 @@ const Table = ({
               <Td>
                 {token.lastUsedAt && (
                   <Typography textColor="neutral800">
-                    <RelativeTime timestamp={new Date(token.lastUsedAt)} />
+                    <RelativeTime
+                      timestamp={new Date(token.lastUsedAt)}
+                      customIntervals={[
+                        {
+                          unit: 'hours',
+                          threshold: 1,
+                          text: formatMessage({
+                            id: 'Settings.apiTokens.lastHour',
+                            defaultMessage: 'last hour',
+                          }),
+                        },
+                      ]}
+                    />
                   </Typography>
                 )}
               </Td>

package/admin/src/pages/SettingsPage/pages/Roles/ProtectedEditPage/index.js

@@ -10,19 +10,13 @@ import EditPage from '../EditPage';
 const ProtectedEditPage = () => {
   const permissions = useSelector(selectAdminPermissions);
 
-  // TODO: this is necessary because otherwise we run into an
-  // infinite rendering loop
-  const permissionsMemoized = React.useMemo(() => {
-    return {
-      read: permissions.settings.roles.read,
-      update: permissions.settings.roles.update,
-    };
-  }, [permissions.settings.roles.read, permissions.settings.roles.update]);
-
   const {
     isLoading,
     allowedActions: { canRead, canUpdate },
-  } = useRBAC(permissionsMemoized);
+  } = useRBAC({
+    read: permissions.settings.roles.read,
+    update: permissions.settings.roles.update,
+  });
 
   if (isLoading) {
     return <LoadingIndicatorPage />;

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -183,13 +183,13 @@ const EditPage = ({ canUpdate }) => {
         validateOnChange={false}
         validationSchema={editValidation}
       >
-        {({ errors, values, handleChange, isSubmitting }) => {
+        {({ errors, values, handleChange, isSubmitting, dirty }) => {
           return (
             <Form>
               <HeaderLayout
                 primaryAction={
                   <Button
-                    disabled={isSubmitting || !canUpdate}
+                    disabled={(isSubmitting || !canUpdate) ? true : !dirty}
                     startIcon={<Check />}
                     loading={isSubmitting}
                     type="submit"

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/utils/makeWebhookValidationSchema.js

@@ -1,4 +1,3 @@
-import { translatedErrors } from '@strapi/helper-plugin';
 import * as yup from 'yup';
 
 const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
@@ -10,11 +9,18 @@ export const makeWebhookValidationSchema = ({ formatMessage }) =>
       .string()
       .required(
         formatMessage({
-          id: 'Settings.webhooks.validation.name',
+          id: 'Settings.webhooks.validation.name.required',
           defaultMessage: 'Name is required',
         })
       )
-      .matches(NAME_REGEX, translatedErrors.regex),
+      .matches(
+        NAME_REGEX,
+        formatMessage({
+          id: 'Settings.webhooks.validation.name.regex',
+          defaultMessage:
+            'The name must start with a letter and only contain letters, numbers, spaces and underscores',
+        })
+      ),
     url: yup
       .string()
       .required(
@@ -26,8 +32,8 @@ export const makeWebhookValidationSchema = ({ formatMessage }) =>
       .matches(
         URL_REGEX,
         formatMessage({
-          id: translatedErrors.regex,
-          defaultMessage: 'The value does not match the regex',
+          id: 'Settings.webhooks.validation.url.regex',
+          defaultMessage: 'The value must be a valid Url',
         })
       ),
     headers: yup.lazy((array) => {

package/admin/src/translations/ca.json

@@ -88,6 +88,7 @@
   "Settings.apiTokens.emptyStateLayout": "Encara no tens cap contingut...",
   "Settings.tokens.notification.copied": "Token copiat al porta-retalls.",
   "Settings.apiTokens.title": "Tokens d'API",
+  "Settings.apiTokens.lastHour": "darrera hora",
   "Settings.tokens.types.full-access": "Accés complet",
   "Settings.tokens.types.read-only": "Només lectura",
   "Settings.application.Strapi-version": "versió de Strapi",

package/admin/src/translations/en.json

@@ -97,6 +97,7 @@
   "Settings.apiTokens.emptyStateLayout": "You don’t have any content yet...",
   "Settings.apiTokens.regenerate": "Regenerate",
   "Settings.apiTokens.title": "API Tokens",
+  "Settings.apiTokens.lastHour": "last hour",
   "Settings.application.customization": "Customization",
   "Settings.application.customization.auth-logo.carousel-hint": "Replace the logo in the authentication pages",
   "Settings.application.customization.carousel-hint": "Change the admin panel logo (Max dimension: {dimension}x{dimension}, Max file size: {size}KB)",
@@ -318,8 +319,10 @@
   "Settings.webhooks.trigger.test": "Test-trigger",
   "Settings.webhooks.trigger.title": "Save before Trigger",
   "Settings.webhooks.value": "Value",
-  "Settings.webhooks.validation.name": "Name is required",
+  "Settings.webhooks.validation.name.required": "Name is required",
+  "Settings.webhooks.validation.name.regex": "The name must start with a letter and only contain letters, numbers, spaces and underscores",
   "Settings.webhooks.validation.url.required": "Url is required",
+  "Settings.webhooks.validation.url.regex": "The value must be a valid Url",
   "Settings.webhooks.validation.key": "Key is required",
   "Settings.webhooks.validation.value": "Value is required",
   "Usecase.back-end": "Back-end developer",

package/admin/src/translations/es.json

@@ -86,6 +86,11 @@
   "Settings.apiTokens.emptyStateLayout": "Aún no tienes ningún contenido ...",
   "Settings.tokens.notification.copied": "Token copiado al portapapeles.",
   "Settings.apiTokens.title": "Tokens de API",
+  "Settings.apiTokens.lastHour": "última hora",
+  "Settings.tokens.ListView.headers.createdAt": "Creado en",
+  "Settings.tokens.ListView.headers.description": "Descripción",
+  "Settings.tokens.ListView.headers.lastUsedAt": "Último uso",
+  "Settings.tokens.ListView.headers.name": "Nombre",
   "Settings.tokens.types.full-access": "Acceso completo",
   "Settings.tokens.types.read-only": "Solo lectura",
   "Settings.application.description": "Información global del panel de administración",

package/admin/src/translations/fr.json

@@ -100,6 +100,7 @@
   "Settings.apiTokens.createPage.BoundRoute.title": "Route rattachée à",
   "Settings.apiTokens.createPage.permissions.header.title": "Paramètres avancés",
   "Settings.apiTokens.createPage.permissions.header.hint": "Sélectionner les actions de l'application ou du plugin et sur l'icône de la roue crantée pour afficher la route rattachée",
+  "Settings.apiTokens.lastHour": "dernière heure",
   "Settings.tokens.duration.30-days": "30 jours",
   "Settings.tokens.duration.7-days": "7 jours",
   "Settings.tokens.duration.90-days": "90 jours",

package/build/{1799.84268ad3.chunk.js → 1799.44d2e264.chunk.js}

@@ -15,7 +15,7 @@ Try polyfilling it using "@formatjs/intl-listformat"
 Try polyfilling it using "@formatjs/intl-displaynames"
 `,Y.jK.MISSING_INTL_API));var L=(0,S.L6)(s,Te);try{return g(d,L).of(l)}catch(W){p(new C.Qe("Error formatting display name.",d,W))}}function ge(u){var g=u?u[Object.keys(u)[0]]:void 0;return typeof g=="string"}function re(u){u.onWarn&&u.defaultRichTextElements&&ge(u.messages||{})&&u.onWarn(`[@formatjs/intl] "defaultRichTextElements" was specified but "message" was not pre-compiled. 
 Please consider using "@formatjs/cli" to pre-compile your messages for performance.
-For more details see https://formatjs.io/docs/getting-started/message-distribution`)}function q(u,g){var l=(0,S.ax)(g),s=(0,v.pi)((0,v.pi)({},S.Z0),u),d=s.locale,p=s.defaultLocale,w=s.onError;return d?!Intl.NumberFormat.supportedLocalesOf(d).length&&w?w(new C.gb('Missing locale data for locale: "'.concat(d,'" in Intl.NumberFormat. Using default locale: "').concat(p,'" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details'))):!Intl.DateTimeFormat.supportedLocalesOf(d).length&&w&&w(new C.gb('Missing locale data for locale: "'.concat(d,'" in Intl.DateTimeFormat. Using default locale: "').concat(p,'" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details'))):(w&&w(new C.OV('"locale" was not configured, using "'.concat(p,'" as fallback. See https://formatjs.io/docs/react-intl/api#intlshape for more details'))),s.locale=s.defaultLocale||"en"),re(s),(0,v.pi)((0,v.pi)({},s),{formatters:l,formatNumber:N.bind(null,s,l.getNumberFormat),formatNumberToParts:_.bind(null,s,l.getNumberFormat),formatRelativeTime:ce.bind(null,s,l.getRelativeTimeFormat),formatDate:Ne.bind(null,s,l.getDateTimeFormat),formatDateToParts:Be.bind(null,s,l.getDateTimeFormat),formatTime:Ye.bind(null,s,l.getDateTimeFormat),formatDateTimeRange:Me.bind(null,s,l.getDateTimeFormat),formatTimeToParts:He.bind(null,s,l.getDateTimeFormat),formatPlural:ze.bind(null,s,l.getPluralRules),formatMessage:J.bind(null,s,l),$t:J.bind(null,s,l),formatList:Ze.bind(null,s,l.getListFormat),formatListToParts:de.bind(null,s,l.getListFormat),formatDisplayName:Re.bind(null,s,l.getDisplayNames)})}var se=y(33961);function H(u){return{locale:u.locale,timeZone:u.timeZone,fallbackOnEmptyString:u.fallbackOnEmptyString,formats:u.formats,textComponent:u.textComponent,messages:u.messages,defaultLocale:u.defaultLocale,defaultFormats:u.defaultFormats,onError:u.onError,onWarn:u.onWarn,wrapRichTextChunksInFragment:u.wrapRichTextChunksInFragment,defaultRichTextElements:u.defaultRichTextElements}}function V(u){return u&&Object.keys(u).reduce(function(g,l){var s=u[l];return g[l]=(0,se.Gt)(s)?(0,E.dt)(s):s,g},{})}var Fe=function(u,g,l,s){for(var d=[],p=4;p<arguments.length;p++)d[p-4]=arguments[p];var w=V(s),L=J.apply(void 0,(0,v.ev)([u,g,l,w],d,!1));return Array.isArray(L)?R.Children.toArray(L):L},je=function(u,g){var l=u.defaultRichTextElements,s=(0,v._T)(u,["defaultRichTextElements"]),d=V(l),p=q((0,v.pi)((0,v.pi)((0,v.pi)({},E.Z0),s),{defaultRichTextElements:d}),g),w={locale:p.locale,timeZone:p.timeZone,fallbackOnEmptyString:p.fallbackOnEmptyString,formats:p.formats,defaultLocale:p.defaultLocale,defaultFormats:p.defaultFormats,messages:p.messages,onError:p.onError,defaultRichTextElements:d};return(0,v.pi)((0,v.pi)({},p),{formatMessage:Fe.bind(null,w,p.formatters),$t:Fe.bind(null,w,p.formatters)})},We=function(u){(0,v.ZT)(g,u);function g(){var l=u!==null&&u.apply(this,arguments)||this;return l.cache=(0,S.Sn)(),l.state={cache:l.cache,intl:je(H(l.props),l.cache),prevConfig:H(l.props)},l}return g.getDerivedStateFromProps=function(l,s){var d=s.prevConfig,p=s.cache,w=H(l);return(0,E.wU)(d,w)?null:{intl:je(w,p),prevConfig:w}},g.prototype.render=function(){return(0,E.lq)(this.state.intl),R.createElement(Z.zt,{value:this.state.intl},this.props.children)},g.displayName="IntlProvider",g.defaultProps=E.Z0,g}(R.PureComponent),Ve=We},17e3:function(B,X,y){"use strict";y.d(X,{D:function(){return Z}});var v=y(74512),R=y(72850);const Z=({children:E})=>(0,v.jsx)(R.x,{paddingLeft:10,paddingRight:10,children:E})},82055:function(B,X,y){"use strict";y.d(X,{T:function(){return he}});var v=y(74512),R=y(32735),Z=y(8471);const E=S=>{const D=(0,R.useRef)(null),[z,N]=(0,R.useState)(!0),_=([Y])=>{N(Y.isIntersecting)};return(0,R.useEffect)(()=>{const Y=D.current,le=new IntersectionObserver(_,S);return Y&&le.observe(D.current),()=>{Y&&le.disconnect()}},[D,S]),[D,z]};var k=y(63060);const G=(S,D)=>{const z=(0,k.W)(D);(0,R.useLayoutEffect)(()=>{const N=new ResizeObserver(z);return Array.isArray(S)?S.forEach(_=>{_.current&&N.observe(_.current)}):S.current&&N.observe(S.current),()=>{N.disconnect()}},[S,z])};var C=y(72850),oe=y(87933),$=y(49372);const he=S=>{const D=(0,R.useRef)(null),[z,N]=(0,R.useState)(null),[_,Y]=E({root:null,rootMargin:"0px",threshold:0});return G(_,()=>{_.current&&N(_.current.getBoundingClientRect())}),(0,R.useEffect)(()=>{D.current&&N(D.current.getBoundingClientRect())},[D]),(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)("div",{style:{height:z?.height},ref:_,children:Y&&(0,v.jsx)(J,{ref:D,...S})}),!Y&&(0,v.jsx)(J,{...S,sticky:!0,width:z?.width})]})};he.displayName="HeaderLayout";const xe=(0,Z.ZP)(C.x)`
+For more details see https://formatjs.io/docs/getting-started/message-distribution`)}function q(u,g){var l=(0,S.ax)(g),s=(0,v.pi)((0,v.pi)({},S.Z0),u),d=s.locale,p=s.defaultLocale,w=s.onError;return d?!Intl.NumberFormat.supportedLocalesOf(d).length&&w?w(new C.gb('Missing locale data for locale: "'.concat(d,'" in Intl.NumberFormat. Using default locale: "').concat(p,'" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details'))):!Intl.DateTimeFormat.supportedLocalesOf(d).length&&w&&w(new C.gb('Missing locale data for locale: "'.concat(d,'" in Intl.DateTimeFormat. Using default locale: "').concat(p,'" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details'))):(w&&w(new C.OV('"locale" was not configured, using "'.concat(p,'" as fallback. See https://formatjs.io/docs/react-intl/api#intlshape for more details'))),s.locale=s.defaultLocale||"en"),re(s),(0,v.pi)((0,v.pi)({},s),{formatters:l,formatNumber:N.bind(null,s,l.getNumberFormat),formatNumberToParts:_.bind(null,s,l.getNumberFormat),formatRelativeTime:ce.bind(null,s,l.getRelativeTimeFormat),formatDate:Ne.bind(null,s,l.getDateTimeFormat),formatDateToParts:Be.bind(null,s,l.getDateTimeFormat),formatTime:Ye.bind(null,s,l.getDateTimeFormat),formatDateTimeRange:Me.bind(null,s,l.getDateTimeFormat),formatTimeToParts:He.bind(null,s,l.getDateTimeFormat),formatPlural:ze.bind(null,s,l.getPluralRules),formatMessage:J.bind(null,s,l),$t:J.bind(null,s,l),formatList:Ze.bind(null,s,l.getListFormat),formatListToParts:de.bind(null,s,l.getListFormat),formatDisplayName:Re.bind(null,s,l.getDisplayNames)})}var se=y(33961);function H(u){return{locale:u.locale,timeZone:u.timeZone,fallbackOnEmptyString:u.fallbackOnEmptyString,formats:u.formats,textComponent:u.textComponent,messages:u.messages,defaultLocale:u.defaultLocale,defaultFormats:u.defaultFormats,onError:u.onError,onWarn:u.onWarn,wrapRichTextChunksInFragment:u.wrapRichTextChunksInFragment,defaultRichTextElements:u.defaultRichTextElements}}function V(u){return u&&Object.keys(u).reduce(function(g,l){var s=u[l];return g[l]=(0,se.Gt)(s)?(0,E.dt)(s):s,g},{})}var Fe=function(u,g,l,s){for(var d=[],p=4;p<arguments.length;p++)d[p-4]=arguments[p];var w=V(s),L=J.apply(void 0,(0,v.ev)([u,g,l,w],d,!1));return Array.isArray(L)?R.Children.toArray(L):L},je=function(u,g){var l=u.defaultRichTextElements,s=(0,v._T)(u,["defaultRichTextElements"]),d=V(l),p=q((0,v.pi)((0,v.pi)((0,v.pi)({},E.Z0),s),{defaultRichTextElements:d}),g),w={locale:p.locale,timeZone:p.timeZone,fallbackOnEmptyString:p.fallbackOnEmptyString,formats:p.formats,defaultLocale:p.defaultLocale,defaultFormats:p.defaultFormats,messages:p.messages,onError:p.onError,defaultRichTextElements:d};return(0,v.pi)((0,v.pi)({},p),{formatMessage:Fe.bind(null,w,p.formatters),$t:Fe.bind(null,w,p.formatters)})},We=function(u){(0,v.ZT)(g,u);function g(){var l=u!==null&&u.apply(this,arguments)||this;return l.cache=(0,S.Sn)(),l.state={cache:l.cache,intl:je(H(l.props),l.cache),prevConfig:H(l.props)},l}return g.getDerivedStateFromProps=function(l,s){var d=s.prevConfig,p=s.cache,w=H(l);return(0,E.wU)(d,w)?null:{intl:je(w,p),prevConfig:w}},g.prototype.render=function(){return(0,E.lq)(this.state.intl),R.createElement(Z.zt,{value:this.state.intl},this.props.children)},g.displayName="IntlProvider",g.defaultProps=E.Z0,g}(R.PureComponent),Ve=We},17e3:function(B,X,y){"use strict";y.d(X,{D:function(){return Z}});var v=y(74512),R=y(72850);const Z=({children:E})=>(0,v.jsx)(R.x,{paddingLeft:10,paddingRight:10,children:E})},82055:function(B,X,y){"use strict";y.d(X,{T:function(){return he}});var v=y(74512),R=y(32735),Z=y(8471);const E=S=>{const D=(0,R.useRef)(null),[z,N]=(0,R.useState)(!0),_=([Y])=>{N(Y.isIntersecting)};return(0,R.useEffect)(()=>{const Y=D.current,le=new IntersectionObserver(_,S);return Y&&le.observe(D.current),()=>{Y&&le.disconnect()}},[D,S]),[D,z]};var k=y(2285);const G=(S,D)=>{const z=(0,k.W)(D);(0,R.useLayoutEffect)(()=>{const N=new ResizeObserver(z);return Array.isArray(S)?S.forEach(_=>{_.current&&N.observe(_.current)}):S.current&&N.observe(S.current),()=>{N.disconnect()}},[S,z])};var C=y(72850),oe=y(87933),$=y(49372);const he=S=>{const D=(0,R.useRef)(null),[z,N]=(0,R.useState)(null),[_,Y]=E({root:null,rootMargin:"0px",threshold:0});return G(_,()=>{_.current&&N(_.current.getBoundingClientRect())}),(0,R.useEffect)(()=>{D.current&&N(D.current.getBoundingClientRect())},[D]),(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)("div",{style:{height:z?.height},ref:_,children:Y&&(0,v.jsx)(J,{ref:D,...S})}),!Y&&(0,v.jsx)(J,{...S,sticky:!0,width:z?.width})]})};he.displayName="HeaderLayout";const xe=(0,Z.ZP)(C.x)`
   width: ${({width:S})=>S?`${S/16}rem`:void 0};
   z-index: ${({theme:S})=>S.zIndices[1]};
 `,J=R.forwardRef(({navigationAction:S,primaryAction:D,secondaryAction:z,subtitle:N,title:_,sticky:Y,width:le,...fe},ce)=>{const pe=typeof N=="string";return Y?(0,v.jsx)(xe,{paddingLeft:6,paddingRight:6,paddingTop:3,paddingBottom:3,position:"fixed",top:0,right:0,background:"neutral0",shadow:"tableShadow",width:le,"data-strapi-header-sticky":!0,children:(0,v.jsxs)(oe.k,{justifyContent:"space-between",children:[(0,v.jsxs)(oe.k,{children:[S&&(0,v.jsx)(C.x,{paddingRight:3,children:S}),(0,v.jsxs)(C.x,{children:[(0,v.jsx)($.Z,{variant:"beta",as:"h1",...fe,children:_}),pe?(0,v.jsx)($.Z,{variant:"pi",textColor:"neutral600",children:N}):N]}),z?(0,v.jsx)(C.x,{paddingLeft:4,children:z}):null]}),(0,v.jsx)(oe.k,{children:D?(0,v.jsx)(C.x,{paddingLeft:2,children:D}):void 0})]})}):(0,v.jsxs)(C.x,{ref:ce,paddingLeft:10,paddingRight:10,paddingBottom:8,paddingTop:S?6:8,background:"neutral100","data-strapi-header":!0,children:[S?(0,v.jsx)(C.x,{paddingBottom:2,children:S}):null,(0,v.jsxs)(oe.k,{justifyContent:"space-between",children:[(0,v.jsxs)(oe.k,{minWidth:0,children:[(0,v.jsx)($.Z,{as:"h1",variant:"alpha",...fe,children:_}),z?(0,v.jsx)(C.x,{paddingLeft:4,children:z}):null]}),D]}),pe?(0,v.jsx)($.Z,{variant:"epsilon",textColor:"neutral600",as:"p",children:N}):N]})})},27649:function(B,X,y){"use strict";y.d(X,{o:function(){return k}});var v=y(74512),R=y(8471),Z=y(72850);const E=(0,R.ZP)(Z.x)`