@strapi/admin 5.55.1 → 5.57.0

package/dist/admin/admin/src/components/MediaLibraryBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MediaLibraryBanner.mjs","sources":["../../../../../admin/src/components/MediaLibraryBanner.tsx"],"sourcesContent":["import { LinkButton, Typography } from '@strapi/design-system';\nimport { ExternalLink } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useScopedPersistentState } from '../hooks/usePersistentState';\n\nimport { DismissibleBanner } from './DismissibleBanner';\n\nconst Banner = ({\n  isLegacyMediaLibrary,\n  onDismiss,\n}: {\n  isLegacyMediaLibrary: boolean;\n  onDismiss: () => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <DismissibleBanner\n      onDismiss={onDismiss}\n      closeLabel={formatMessage({\n        id: 'app.components.MediaLibraryBanner.close',\n        defaultMessage: 'Close',\n      })}\n      message={\n        <>\n          <Typography\n            variant=\"delta\"\n            fontWeight=\"bold\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            fontSize={2}\n          >\n            {formatMessage({\n              id: 'app.components.MediaLibraryBanner.intro',\n              defaultMessage: 'Introducing the new Media Library ',\n            })}\n          </Typography>\n          <Typography\n            variant=\"delta\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            paddingRight={4}\n            fontSize={2}\n          >\n            {formatMessage(\n              isLegacyMediaLibrary\n                ? {\n                    id: 'app.components.MediaLibraryBanner.text',\n                    defaultMessage:\n                      'Check the documentation to learn how to switch to the new one.',\n                  }\n                : {\n                    id: 'app.components.MediaLibraryBanner.text.enabled',\n                    defaultMessage: \"You're now using the revamped version.\",\n                  }\n            )}\n          </Typography>\n        </>\n      }\n      action={\n        isLegacyMediaLibrary ? (\n          <LinkButton\n            width=\"max-content\"\n            variant=\"tertiary\"\n            startIcon={<ExternalLink />}\n            href=\"https://docs.strapi.io/cms/features/media-library\"\n            target=\"_blank\"\n          >\n            {formatMessage({\n              id: 'app.components.MediaLibraryBanner.button',\n              defaultMessage: 'Docs',\n            })}\n          </LinkButton>\n        ) : (\n          <LinkButton\n            width=\"max-content\"\n            variant=\"tertiary\"\n            href=\"https://strapi.io/blog/strapi-release-roundup-everything-that-changed-between-june-and-august-2026\"\n            target=\"_blank\"\n          >\n            {formatMessage({\n              id: 'app.components.MediaLibraryBanner.button.enabled',\n              defaultMessage: 'Read blog post',\n            })}\n          </LinkButton>\n        )\n      }\n    />\n  );\n};\n\nconst MediaLibraryBanner = () => {\n  const isLegacyMediaLibrary = window.strapi.featureFlags.isEnabled('useLegacyMediaLibrary');\n\n  // The flag state is part of the key (not the stored value) so dismissing one\n  // message never collides with the other, and toggling `useLegacyMediaLibrary`\n  // (enabling it, or rolling it back) brings the banner back with the right message.\n  const [isDismissed, setIsDismissed] = useScopedPersistentState<boolean>(\n    `STRAPI_MEDIA_LIBRARY_BANNER_DISMISSED_FOR_${isLegacyMediaLibrary}`,\n    false\n  );\n\n  if (isDismissed) {\n    return null;\n  }\n\n  return (\n    <Banner isLegacyMediaLibrary={isLegacyMediaLibrary} onDismiss={() => setIsDismissed(true)} />\n  );\n};\n\nexport { MediaLibraryBanner };\n"],"names":["Banner","isLegacyMediaLibrary","onDismiss","formatMessage","useIntl","_jsx","DismissibleBanner","closeLabel","id","defaultMessage","message","_jsxs","_Fragment","Typography","variant","fontWeight","textColor","textAlign","fontSize","paddingRight","action","LinkButton","width","startIcon","ExternalLink","href","target","MediaLibraryBanner","window","strapi","featureFlags","isEnabled","isDismissed","setIsDismissed","useScopedPersistentState"],"mappings":";;;;;;;AAQA,MAAMA,SAAS,CAAC,EACdC,oBAAoB,EACpBC,SAAS,EAIV,GAAA;IACC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,GAAA,CAACC,iBAAAA,EAAAA;QACCJ,SAAAA,EAAWA,SAAAA;AACXK,QAAAA,UAAAA,EAAYJ,aAAAA,CAAc;YACxBK,EAAAA,EAAI,yCAAA;YACJC,cAAAA,EAAgB;AAClB,SAAA,CAAA;QACAC,OAAAA,gBACEC,IAAA,CAAAC,QAAA,EAAA;;8BACEP,GAAA,CAACQ,UAAAA,EAAAA;oBACCC,OAAAA,EAAQ,OAAA;oBACRC,UAAAA,EAAW,MAAA;oBACXC,SAAAA,EAAU,UAAA;oBACVC,SAAAA,EAAU,QAAA;oBACVC,QAAAA,EAAU,CAAA;8BAETf,aAAAA,CAAc;wBACbK,EAAAA,EAAI,yCAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA;;8BAEFJ,GAAA,CAACQ,UAAAA,EAAAA;oBACCC,OAAAA,EAAQ,OAAA;oBACRE,SAAAA,EAAU,UAAA;oBACVC,SAAAA,EAAU,QAAA;oBACVE,YAAAA,EAAc,CAAA;oBACdD,QAAAA,EAAU,CAAA;AAETf,oBAAAA,QAAAA,EAAAA,aAAAA,CACCF,oBAAAA,GACI;wBACEO,EAAAA,EAAI,wCAAA;wBACJC,cAAAA,EACE;qBACJ,GACA;wBACED,EAAAA,EAAI,gDAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA;;;;AAKZW,QAAAA,MAAAA,EACEnB,qCACEI,GAAA,CAACgB,UAAAA,EAAAA;YACCC,KAAAA,EAAM,aAAA;YACNR,OAAAA,EAAQ,UAAA;AACRS,YAAAA,SAAAA,gBAAWlB,GAAA,CAACmB,YAAAA,EAAAA,EAAAA,CAAAA;YACZC,IAAAA,EAAK,mDAAA;YACLC,MAAAA,EAAO,QAAA;sBAENvB,aAAAA,CAAc;gBACbK,EAAAA,EAAI,0CAAA;gBACJC,cAAAA,EAAgB;AAClB,aAAA;2BAGFJ,GAAA,CAACgB,UAAAA,EAAAA;YACCC,KAAAA,EAAM,aAAA;YACNR,OAAAA,EAAQ,UAAA;YACRW,IAAAA,EAAK,oGAAA;YACLC,MAAAA,EAAO,QAAA;sBAENvB,aAAAA,CAAc;gBACbK,EAAAA,EAAI,kDAAA;gBACJC,cAAAA,EAAgB;AAClB,aAAA;;;AAMZ,CAAA;AAEA,MAAMkB,kBAAAA,GAAqB,IAAA;AACzB,IAAA,MAAM1B,uBAAuB2B,MAAAA,CAAOC,MAAM,CAACC,YAAY,CAACC,SAAS,CAAC,uBAAA,CAAA;;;;IAKlE,MAAM,CAACC,aAAaC,cAAAA,CAAe,GAAGC,yBACpC,CAAC,0CAA0C,EAAEjC,oBAAAA,CAAAA,CAAsB,EACnE,KAAA,CAAA;AAGF,IAAA,IAAI+B,WAAAA,EAAa;QACf,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACE3B,GAAA,CAACL,MAAAA,EAAAA;QAAOC,oBAAAA,EAAsBA,oBAAAA;AAAsBC,QAAAA,SAAAA,EAAW,IAAM+B,cAAAA,CAAe,IAAA;;AAExF;;;;"}
+{"version":3,"file":"MediaLibraryBanner.mjs","sources":["../../../../../admin/src/components/MediaLibraryBanner.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { LinkButton, Typography } from '@strapi/design-system';\nimport { ExternalLink } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useMatch } from 'react-router-dom';\n\nimport { useScopedPersistentState } from '../hooks/usePersistentState';\n\nimport { DismissibleBanner } from './DismissibleBanner';\n\nconst Banner = ({\n  isLegacyMediaLibrary,\n  onDismiss,\n}: {\n  isLegacyMediaLibrary: boolean;\n  onDismiss: () => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <DismissibleBanner\n      onDismiss={onDismiss}\n      closeLabel={formatMessage({\n        id: 'app.components.MediaLibraryBanner.close',\n        defaultMessage: 'Close',\n      })}\n      message={\n        <>\n          <Typography\n            variant=\"delta\"\n            fontWeight=\"bold\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            fontSize={2}\n          >\n            {formatMessage({\n              id: 'app.components.MediaLibraryBanner.intro',\n              defaultMessage: 'Introducing the new Media Library ',\n            })}\n          </Typography>\n          <Typography\n            variant=\"delta\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            paddingRight={4}\n            fontSize={2}\n          >\n            {formatMessage(\n              isLegacyMediaLibrary\n                ? {\n                    id: 'app.components.MediaLibraryBanner.text',\n                    defaultMessage:\n                      'Check the documentation to learn how to switch to the new one.',\n                  }\n                : {\n                    id: 'app.components.MediaLibraryBanner.text.enabled',\n                    defaultMessage: \"You're now using the revamped version.\",\n                  }\n            )}\n          </Typography>\n        </>\n      }\n      action={\n        isLegacyMediaLibrary ? (\n          <LinkButton\n            width=\"max-content\"\n            variant=\"tertiary\"\n            startIcon={<ExternalLink />}\n            href=\"https://docs.strapi.io/cms/features/media-library\"\n            target=\"_blank\"\n          >\n            {formatMessage({\n              id: 'app.components.MediaLibraryBanner.button',\n              defaultMessage: 'Docs',\n            })}\n          </LinkButton>\n        ) : (\n          <LinkButton\n            width=\"max-content\"\n            variant=\"tertiary\"\n            href=\"https://strapi.io/blog/strapi-release-roundup-everything-that-changed-between-june-and-august-2026\"\n            target=\"_blank\"\n          >\n            {formatMessage({\n              id: 'app.components.MediaLibraryBanner.button.enabled',\n              defaultMessage: 'Read blog post',\n            })}\n          </LinkButton>\n        )\n      }\n    />\n  );\n};\n\ninterface MediaLibraryBannerProps {\n  /**\n   * Called synchronously (before paint) whenever this banner's own visibility changes, so a\n   * parent rendering it alongside another banner (e.g. `UpsellBanner`) can hide that other one\n   * instead of stacking both. This banner owns its dismissal state, so it's the source of truth\n   * for whether it's showing — the parent shouldn't have to re-derive that itself.\n   */\n  onVisibilityChange?: (isVisible: boolean) => void;\n}\n\nconst MediaLibraryBanner = ({ onVisibilityChange }: MediaLibraryBannerProps = {}) => {\n  const isLegacyMediaLibrary = window.strapi.featureFlags.isEnabled('useLegacyMediaLibrary');\n\n  // The flag state is part of the key (not the stored value) so dismissing one\n  // message never collides with the other, and toggling `useLegacyMediaLibrary`\n  // (enabling it, or rolling it back) brings the banner back with the right message.\n  const [isDismissed, setIsDismissed] = useScopedPersistentState<boolean>(\n    `STRAPI_MEDIA_LIBRARY_BANNER_DISMISSED_FOR_${isLegacyMediaLibrary}`,\n    false\n  );\n\n  // `AuthenticatedLayout` renders this banner on every admin page, but it's only\n  // relevant on the Media Library itself (both the new and legacy `upload` plugin\n  // route share the same `plugins/upload` mount point).\n  const isOnMediaLibraryPage = useMatch('/plugins/upload/*') !== null;\n\n  const isVisible = isOnMediaLibraryPage && !isDismissed;\n\n  // useLayoutEffect (not useEffect) so the parent's re-render from this lands before the\n  // browser paints — otherwise a possibly-visible `UpsellBanner` would flash on screen for a\n  // frame before being hidden.\n  React.useLayoutEffect(() => {\n    onVisibilityChange?.(isVisible);\n  }, [isVisible, onVisibilityChange]);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <Banner isLegacyMediaLibrary={isLegacyMediaLibrary} onDismiss={() => setIsDismissed(true)} />\n  );\n};\n\nexport { MediaLibraryBanner };\n"],"names":["Banner","isLegacyMediaLibrary","onDismiss","formatMessage","useIntl","_jsx","DismissibleBanner","closeLabel","id","defaultMessage","message","_jsxs","_Fragment","Typography","variant","fontWeight","textColor","textAlign","fontSize","paddingRight","action","LinkButton","width","startIcon","ExternalLink","href","target","MediaLibraryBanner","onVisibilityChange","window","strapi","featureFlags","isEnabled","isDismissed","setIsDismissed","useScopedPersistentState","isOnMediaLibraryPage","useMatch","isVisible","React","useLayoutEffect"],"mappings":";;;;;;;;;AAWA,MAAMA,SAAS,CAAC,EACdC,oBAAoB,EACpBC,SAAS,EAIV,GAAA;IACC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,GAAA,CAACC,iBAAAA,EAAAA;QACCJ,SAAAA,EAAWA,SAAAA;AACXK,QAAAA,UAAAA,EAAYJ,aAAAA,CAAc;YACxBK,EAAAA,EAAI,yCAAA;YACJC,cAAAA,EAAgB;AAClB,SAAA,CAAA;QACAC,OAAAA,gBACEC,IAAA,CAAAC,QAAA,EAAA;;8BACEP,GAAA,CAACQ,UAAAA,EAAAA;oBACCC,OAAAA,EAAQ,OAAA;oBACRC,UAAAA,EAAW,MAAA;oBACXC,SAAAA,EAAU,UAAA;oBACVC,SAAAA,EAAU,QAAA;oBACVC,QAAAA,EAAU,CAAA;8BAETf,aAAAA,CAAc;wBACbK,EAAAA,EAAI,yCAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA;;8BAEFJ,GAAA,CAACQ,UAAAA,EAAAA;oBACCC,OAAAA,EAAQ,OAAA;oBACRE,SAAAA,EAAU,UAAA;oBACVC,SAAAA,EAAU,QAAA;oBACVE,YAAAA,EAAc,CAAA;oBACdD,QAAAA,EAAU,CAAA;AAETf,oBAAAA,QAAAA,EAAAA,aAAAA,CACCF,oBAAAA,GACI;wBACEO,EAAAA,EAAI,wCAAA;wBACJC,cAAAA,EACE;qBACJ,GACA;wBACED,EAAAA,EAAI,gDAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA;;;;AAKZW,QAAAA,MAAAA,EACEnB,qCACEI,GAAA,CAACgB,UAAAA,EAAAA;YACCC,KAAAA,EAAM,aAAA;YACNR,OAAAA,EAAQ,UAAA;AACRS,YAAAA,SAAAA,gBAAWlB,GAAA,CAACmB,YAAAA,EAAAA,EAAAA,CAAAA;YACZC,IAAAA,EAAK,mDAAA;YACLC,MAAAA,EAAO,QAAA;sBAENvB,aAAAA,CAAc;gBACbK,EAAAA,EAAI,0CAAA;gBACJC,cAAAA,EAAgB;AAClB,aAAA;2BAGFJ,GAAA,CAACgB,UAAAA,EAAAA;YACCC,KAAAA,EAAM,aAAA;YACNR,OAAAA,EAAQ,UAAA;YACRW,IAAAA,EAAK,oGAAA;YACLC,MAAAA,EAAO,QAAA;sBAENvB,aAAAA,CAAc;gBACbK,EAAAA,EAAI,kDAAA;gBACJC,cAAAA,EAAgB;AAClB,aAAA;;;AAMZ,CAAA;AAYA,MAAMkB,qBAAqB,CAAC,EAAEC,kBAAkB,EAA2B,GAAG,EAAE,GAAA;AAC9E,IAAA,MAAM3B,uBAAuB4B,MAAAA,CAAOC,MAAM,CAACC,YAAY,CAACC,SAAS,CAAC,uBAAA,CAAA;;;;IAKlE,MAAM,CAACC,aAAaC,cAAAA,CAAe,GAAGC,yBACpC,CAAC,0CAA0C,EAAElC,oBAAAA,CAAAA,CAAsB,EACnE,KAAA,CAAA;;;;IAMF,MAAMmC,oBAAAA,GAAuBC,SAAS,mBAAA,CAAA,KAAyB,IAAA;IAE/D,MAAMC,SAAAA,GAAYF,wBAAwB,CAACH,WAAAA;;;;AAK3CM,IAAAA,KAAAA,CAAMC,eAAe,CAAC,IAAA;QACpBZ,kBAAAA,GAAqBU,SAAAA,CAAAA;IACvB,CAAA,EAAG;AAACA,QAAAA,SAAAA;AAAWV,QAAAA;AAAmB,KAAA,CAAA;AAElC,IAAA,IAAI,CAACU,SAAAA,EAAW;QACd,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEjC,GAAA,CAACL,MAAAA,EAAAA;QAAOC,oBAAAA,EAAsBA,oBAAAA;AAAsBC,QAAAA,SAAAA,EAAW,IAAMgC,cAAAA,CAAe,IAAA;;AAExF;;;;"}

package/dist/admin/admin/src/components/RelativeTime.js

@@ -48,6 +48,15 @@ const intervals = [
  * ```
  */ const RelativeTime = /*#__PURE__*/ React__namespace.forwardRef(({ timestamp, customIntervals = [], ...restProps }, forwardedRef)=>{
     const { formatRelativeTime, formatDate, formatTime } = reactIntl.useIntl();
+    // Invalid Date: intervalToDuration throws RangeError (see #27382).
+    if (!dateFns.isValid(timestamp)) {
+        return /*#__PURE__*/ jsxRuntime.jsx("time", {
+            ref: forwardedRef,
+            role: "time",
+            ...restProps,
+            children: "-"
+        });
+    }
     /**
      * TODO: make this auto-update, like a clock.
      */ const interval = dateFns.intervalToDuration({

package/dist/admin/admin/src/components/RelativeTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelativeTime.js","sources":["../../../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit =\n      intervals.find((intervalUnit) => {\n        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n      }) ?? 'seconds';\n\n    const value = interval[unit] ?? 0;\n    const relativeTime = isPast(timestamp) ? -value : value;\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","value","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","_jsx","time","ref","dateTime","toISOString","role","title"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,SAAAA,GAAmC;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACD,MAAMC,YAAAA,iBAAeC,gBAAAA,CAAMC,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAAA,GAAkB,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,iBAAAA,EAAAA;AAEvD;;QAGA,MAAMC,WAAWC,0BAAAA,CAAmB;QAClCC,KAAAA,EAAOV,SAAAA;AACPW,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IAAAA,GACJlB,SAAAA,CAAUmB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QACd,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAAA,CAAAA,CAAUW,QAAQ,CAACH,YAAAA,CAAAA;IACtE,CAAA,CAAA,IAAM,SAAA;AAER,IAAA,MAAMI,KAAAA,GAAQZ,QAAQ,CAACM,IAAAA,CAAK,IAAI,CAAA;AAChC,IAAA,MAAMO,YAAAA,GAAeC,cAAAA,CAAOtB,SAAAA,CAAAA,GAAa,CAACoB,KAAAA,GAAQA,KAAAA;;AAGlD,IAAA,MAAMG,cAAAA,GAAiBtB,eAAAA,CAAgBc,IAAI,CACzC,CAACS,MAAAA,GAAWhB,QAAQ,CAACgB,MAAAA,CAAOV,IAAI,CAAC,GAAGU,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAAAA,GAChBA,cAAAA,CAAeI,IAAI,GACnBvB,kBAAAA,CAAmBiB,cAAcP,IAAAA,EAAM;QAAEc,OAAAA,EAAS;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACEC,cAAA,CAACC,MAAAA,EAAAA;QACCC,GAAAA,EAAK5B,YAAAA;AACL6B,QAAAA,QAAAA,EAAUhC,UAAUiC,WAAW,EAAA;QAC/BC,IAAAA,EAAK,MAAA;AACLC,QAAAA,KAAAA,EAAO,GAAG9B,UAAAA,CAAWL,SAAAA,CAAAA,CAAW,CAAC,EAAEM,WAAWN,SAAAA,CAAAA,CAAAA,CAAY;AACzD,QAAA,GAAGE,SAAS;AAEZwB,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}
+{"version":3,"file":"RelativeTime.js","sources":["../../../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast, isValid } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    // Invalid Date: intervalToDuration throws RangeError (see #27382).\n    if (!isValid(timestamp)) {\n      return (\n        <time ref={forwardedRef} role=\"time\" {...restProps}>\n          -\n        </time>\n      );\n    }\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit =\n      intervals.find((intervalUnit) => {\n        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n      }) ?? 'seconds';\n\n    const value = interval[unit] ?? 0;\n    const relativeTime = isPast(timestamp) ? -value : value;\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","isValid","_jsx","time","ref","role","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","value","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","dateTime","toISOString","title"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,SAAAA,GAAmC;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACD,MAAMC,YAAAA,iBAAeC,gBAAAA,CAAMC,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAAA,GAAkB,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,iBAAAA,EAAAA;;IAGvD,IAAI,CAACC,gBAAQR,SAAAA,CAAAA,EAAY;AACvB,QAAA,qBACES,cAAA,CAACC,MAAAA,EAAAA;YAAKC,GAAAA,EAAKR,YAAAA;YAAcS,IAAAA,EAAK,MAAA;AAAQ,YAAA,GAAGV,SAAS;AAAE,YAAA,QAAA,EAAA;;AAIxD,IAAA;AAEA;;QAGA,MAAMW,WAAWC,0BAAAA,CAAmB;QAClCC,KAAAA,EAAOf,SAAAA;AACPgB,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IAAAA,GACJvB,SAAAA,CAAUwB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QACd,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAAA,CAAAA,CAAUW,QAAQ,CAACH,YAAAA,CAAAA;IACtE,CAAA,CAAA,IAAM,SAAA;AAER,IAAA,MAAMI,KAAAA,GAAQZ,QAAQ,CAACM,IAAAA,CAAK,IAAI,CAAA;AAChC,IAAA,MAAMO,YAAAA,GAAeC,cAAAA,CAAO3B,SAAAA,CAAAA,GAAa,CAACyB,KAAAA,GAAQA,KAAAA;;AAGlD,IAAA,MAAMG,cAAAA,GAAiB3B,eAAAA,CAAgBmB,IAAI,CACzC,CAACS,MAAAA,GAAWhB,QAAQ,CAACgB,MAAAA,CAAOV,IAAI,CAAC,GAAGU,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAAAA,GAChBA,cAAAA,CAAeI,IAAI,GACnB5B,kBAAAA,CAAmBsB,cAAcP,IAAAA,EAAM;QAAEc,OAAAA,EAAS;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACExB,cAAA,CAACC,MAAAA,EAAAA;QACCC,GAAAA,EAAKR,YAAAA;AACL+B,QAAAA,QAAAA,EAAUlC,UAAUmC,WAAW,EAAA;QAC/BvB,IAAAA,EAAK,MAAA;AACLwB,QAAAA,KAAAA,EAAO,GAAG/B,UAAAA,CAAWL,SAAAA,CAAAA,CAAW,CAAC,EAAEM,WAAWN,SAAAA,CAAAA,CAAAA,CAAY;AACzD,QAAA,GAAGE,SAAS;AAEZ6B,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}

package/dist/admin/admin/src/components/RelativeTime.mjs

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { intervalToDuration, isPast } from 'date-fns';
+import { isValid, intervalToDuration, isPast } from 'date-fns';
 import { useIntl } from 'react-intl';
 
 const intervals = [
@@ -26,6 +26,15 @@ const intervals = [
  * ```
  */ const RelativeTime = /*#__PURE__*/ React.forwardRef(({ timestamp, customIntervals = [], ...restProps }, forwardedRef)=>{
     const { formatRelativeTime, formatDate, formatTime } = useIntl();
+    // Invalid Date: intervalToDuration throws RangeError (see #27382).
+    if (!isValid(timestamp)) {
+        return /*#__PURE__*/ jsx("time", {
+            ref: forwardedRef,
+            role: "time",
+            ...restProps,
+            children: "-"
+        });
+    }
     /**
      * TODO: make this auto-update, like a clock.
      */ const interval = intervalToDuration({

package/dist/admin/admin/src/components/RelativeTime.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RelativeTime.mjs","sources":["../../../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit =\n      intervals.find((intervalUnit) => {\n        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n      }) ?? 'seconds';\n\n    const value = interval[unit] ?? 0;\n    const relativeTime = isPast(timestamp) ? -value : value;\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","value","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","_jsx","time","ref","dateTime","toISOString","role","title"],"mappings":";;;;;AAKA,MAAMA,SAAAA,GAAmC;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACD,MAAMC,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAAA,GAAkB,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,OAAAA,EAAAA;AAEvD;;QAGA,MAAMC,WAAWC,kBAAAA,CAAmB;QAClCC,KAAAA,EAAOV,SAAAA;AACPW,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IAAAA,GACJlB,SAAAA,CAAUmB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QACd,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAAA,CAAAA,CAAUW,QAAQ,CAACH,YAAAA,CAAAA;IACtE,CAAA,CAAA,IAAM,SAAA;AAER,IAAA,MAAMI,KAAAA,GAAQZ,QAAQ,CAACM,IAAAA,CAAK,IAAI,CAAA;AAChC,IAAA,MAAMO,YAAAA,GAAeC,MAAAA,CAAOtB,SAAAA,CAAAA,GAAa,CAACoB,KAAAA,GAAQA,KAAAA;;AAGlD,IAAA,MAAMG,cAAAA,GAAiBtB,eAAAA,CAAgBc,IAAI,CACzC,CAACS,MAAAA,GAAWhB,QAAQ,CAACgB,MAAAA,CAAOV,IAAI,CAAC,GAAGU,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAAAA,GAChBA,cAAAA,CAAeI,IAAI,GACnBvB,kBAAAA,CAAmBiB,cAAcP,IAAAA,EAAM;QAAEc,OAAAA,EAAS;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACEC,GAAA,CAACC,MAAAA,EAAAA;QACCC,GAAAA,EAAK5B,YAAAA;AACL6B,QAAAA,QAAAA,EAAUhC,UAAUiC,WAAW,EAAA;QAC/BC,IAAAA,EAAK,MAAA;AACLC,QAAAA,KAAAA,EAAO,GAAG9B,UAAAA,CAAWL,SAAAA,CAAAA,CAAW,CAAC,EAAEM,WAAWN,SAAAA,CAAAA,CAAAA,CAAY;AACzD,QAAA,GAAGE,SAAS;AAEZwB,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}
+{"version":3,"file":"RelativeTime.mjs","sources":["../../../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast, isValid } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    // Invalid Date: intervalToDuration throws RangeError (see #27382).\n    if (!isValid(timestamp)) {\n      return (\n        <time ref={forwardedRef} role=\"time\" {...restProps}>\n          -\n        </time>\n      );\n    }\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit =\n      intervals.find((intervalUnit) => {\n        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n      }) ?? 'seconds';\n\n    const value = interval[unit] ?? 0;\n    const relativeTime = isPast(timestamp) ? -value : value;\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","isValid","_jsx","time","ref","role","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","value","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","dateTime","toISOString","title"],"mappings":";;;;;AAKA,MAAMA,SAAAA,GAAmC;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACD,MAAMC,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAAA,GAAkB,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,OAAAA,EAAAA;;IAGvD,IAAI,CAACC,QAAQR,SAAAA,CAAAA,EAAY;AACvB,QAAA,qBACES,GAAA,CAACC,MAAAA,EAAAA;YAAKC,GAAAA,EAAKR,YAAAA;YAAcS,IAAAA,EAAK,MAAA;AAAQ,YAAA,GAAGV,SAAS;AAAE,YAAA,QAAA,EAAA;;AAIxD,IAAA;AAEA;;QAGA,MAAMW,WAAWC,kBAAAA,CAAmB;QAClCC,KAAAA,EAAOf,SAAAA;AACPgB,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IAAAA,GACJvB,SAAAA,CAAUwB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QACd,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAAA,CAAAA,CAAUW,QAAQ,CAACH,YAAAA,CAAAA;IACtE,CAAA,CAAA,IAAM,SAAA;AAER,IAAA,MAAMI,KAAAA,GAAQZ,QAAQ,CAACM,IAAAA,CAAK,IAAI,CAAA;AAChC,IAAA,MAAMO,YAAAA,GAAeC,MAAAA,CAAO3B,SAAAA,CAAAA,GAAa,CAACyB,KAAAA,GAAQA,KAAAA;;AAGlD,IAAA,MAAMG,cAAAA,GAAiB3B,eAAAA,CAAgBmB,IAAI,CACzC,CAACS,MAAAA,GAAWhB,QAAQ,CAACgB,MAAAA,CAAOV,IAAI,CAAC,GAAGU,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAAAA,GAChBA,cAAAA,CAAeI,IAAI,GACnB5B,kBAAAA,CAAmBsB,cAAcP,IAAAA,EAAM;QAAEc,OAAAA,EAAS;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACExB,GAAA,CAACC,MAAAA,EAAAA;QACCC,GAAAA,EAAKR,YAAAA;AACL+B,QAAAA,QAAAA,EAAUlC,UAAUmC,WAAW,EAAA;QAC/BvB,IAAAA,EAAK,MAAA;AACLwB,QAAAA,KAAAA,EAAO,GAAG/B,UAAAA,CAAWL,SAAAA,CAAAA,CAAW,CAAC,EAAEM,WAAWN,SAAAA,CAAAA,CAAAA,CAAY;AACzD,QAAA,GAAGE,SAAS;AAEZ6B,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}

package/dist/admin/admin/src/components/TopBanners.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactRouterDom = require('react-router-dom');
+var MediaLibraryBanner = require('./MediaLibraryBanner.js');
+var UpsellBanner = require('./UpsellBanner.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * @description Renders the admin's top banners, ensuring only one shows at a time instead of
+ * stacking: the Media Library banner takes priority over the upsell one. Kept as its own
+ * component (rather than inline in `AuthenticatedLayout`) so this wiring can be unit tested
+ * without the rest of the layout's unrelated dependencies (menu, tracking, app info, etc.).
+ */ const TopBanners = ()=>{
+    // Seeded from the current route so `UpsellBanner` (and its trial-license query) doesn't
+    // mount-then-immediately-unmount on first render when landing directly on the Media Library.
+    // `MediaLibraryBanner`'s own `onVisibilityChange` corrects this afterwards if it turns out
+    // dismissed, same as it does for any other visibility change.
+    const isOnMediaLibraryRoute = reactRouterDom.useMatch('/plugins/upload/*') !== null;
+    const [isMediaLibraryBannerVisible, setIsMediaLibraryBannerVisible] = React__namespace.useState(isOnMediaLibraryRoute);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            !isMediaLibraryBannerVisible && /*#__PURE__*/ jsxRuntime.jsx(UpsellBanner.UpsellBanner, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(MediaLibraryBanner.MediaLibraryBanner, {
+                onVisibilityChange: setIsMediaLibraryBannerVisible
+            })
+        ]
+    });
+};
+
+exports.TopBanners = TopBanners;
+//# sourceMappingURL=TopBanners.js.map

package/dist/admin/admin/src/components/TopBanners.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBanners.js","sources":["../../../../../admin/src/components/TopBanners.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useMatch } from 'react-router-dom';\n\nimport { MediaLibraryBanner } from './MediaLibraryBanner';\nimport { UpsellBanner } from './UpsellBanner';\n\n/**\n * @description Renders the admin's top banners, ensuring only one shows at a time instead of\n * stacking: the Media Library banner takes priority over the upsell one. Kept as its own\n * component (rather than inline in `AuthenticatedLayout`) so this wiring can be unit tested\n * without the rest of the layout's unrelated dependencies (menu, tracking, app info, etc.).\n */\nconst TopBanners = () => {\n  // Seeded from the current route so `UpsellBanner` (and its trial-license query) doesn't\n  // mount-then-immediately-unmount on first render when landing directly on the Media Library.\n  // `MediaLibraryBanner`'s own `onVisibilityChange` corrects this afterwards if it turns out\n  // dismissed, same as it does for any other visibility change.\n  const isOnMediaLibraryRoute = useMatch('/plugins/upload/*') !== null;\n  const [isMediaLibraryBannerVisible, setIsMediaLibraryBannerVisible] =\n    React.useState(isOnMediaLibraryRoute);\n\n  return (\n    <>\n      {!isMediaLibraryBannerVisible && <UpsellBanner />}\n      <MediaLibraryBanner onVisibilityChange={setIsMediaLibraryBannerVisible} />\n    </>\n  );\n};\n\nexport { TopBanners };\n"],"names":["TopBanners","isOnMediaLibraryRoute","useMatch","isMediaLibraryBannerVisible","setIsMediaLibraryBannerVisible","React","useState","_jsxs","_Fragment","_jsx","UpsellBanner","MediaLibraryBanner","onVisibilityChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;AAKC,UACKA,UAAAA,GAAa,IAAA;;;;;IAKjB,MAAMC,qBAAAA,GAAwBC,wBAAS,mBAAA,CAAA,KAAyB,IAAA;AAChE,IAAA,MAAM,CAACC,2BAAAA,EAA6BC,8BAAAA,CAA+B,GACjEC,gBAAAA,CAAMC,QAAQ,CAACL,qBAAAA,CAAAA;IAEjB,qBACEM,eAAA,CAAAC,mBAAA,EAAA;;AACG,YAAA,CAACL,6CAA+BM,cAAA,CAACC,yBAAAA,EAAAA,EAAAA,CAAAA;0BAClCD,cAAA,CAACE,qCAAAA,EAAAA;gBAAmBC,kBAAAA,EAAoBR;;;;AAG9C;;;;"}

package/dist/admin/admin/src/components/TopBanners.mjs

@@ -0,0 +1,30 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMatch } from 'react-router-dom';
+import { MediaLibraryBanner } from './MediaLibraryBanner.mjs';
+import { UpsellBanner } from './UpsellBanner.mjs';
+
+/**
+ * @description Renders the admin's top banners, ensuring only one shows at a time instead of
+ * stacking: the Media Library banner takes priority over the upsell one. Kept as its own
+ * component (rather than inline in `AuthenticatedLayout`) so this wiring can be unit tested
+ * without the rest of the layout's unrelated dependencies (menu, tracking, app info, etc.).
+ */ const TopBanners = ()=>{
+    // Seeded from the current route so `UpsellBanner` (and its trial-license query) doesn't
+    // mount-then-immediately-unmount on first render when landing directly on the Media Library.
+    // `MediaLibraryBanner`'s own `onVisibilityChange` corrects this afterwards if it turns out
+    // dismissed, same as it does for any other visibility change.
+    const isOnMediaLibraryRoute = useMatch('/plugins/upload/*') !== null;
+    const [isMediaLibraryBannerVisible, setIsMediaLibraryBannerVisible] = React.useState(isOnMediaLibraryRoute);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            !isMediaLibraryBannerVisible && /*#__PURE__*/ jsx(UpsellBanner, {}),
+            /*#__PURE__*/ jsx(MediaLibraryBanner, {
+                onVisibilityChange: setIsMediaLibraryBannerVisible
+            })
+        ]
+    });
+};
+
+export { TopBanners };
+//# sourceMappingURL=TopBanners.mjs.map

package/dist/admin/admin/src/components/TopBanners.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBanners.mjs","sources":["../../../../../admin/src/components/TopBanners.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useMatch } from 'react-router-dom';\n\nimport { MediaLibraryBanner } from './MediaLibraryBanner';\nimport { UpsellBanner } from './UpsellBanner';\n\n/**\n * @description Renders the admin's top banners, ensuring only one shows at a time instead of\n * stacking: the Media Library banner takes priority over the upsell one. Kept as its own\n * component (rather than inline in `AuthenticatedLayout`) so this wiring can be unit tested\n * without the rest of the layout's unrelated dependencies (menu, tracking, app info, etc.).\n */\nconst TopBanners = () => {\n  // Seeded from the current route so `UpsellBanner` (and its trial-license query) doesn't\n  // mount-then-immediately-unmount on first render when landing directly on the Media Library.\n  // `MediaLibraryBanner`'s own `onVisibilityChange` corrects this afterwards if it turns out\n  // dismissed, same as it does for any other visibility change.\n  const isOnMediaLibraryRoute = useMatch('/plugins/upload/*') !== null;\n  const [isMediaLibraryBannerVisible, setIsMediaLibraryBannerVisible] =\n    React.useState(isOnMediaLibraryRoute);\n\n  return (\n    <>\n      {!isMediaLibraryBannerVisible && <UpsellBanner />}\n      <MediaLibraryBanner onVisibilityChange={setIsMediaLibraryBannerVisible} />\n    </>\n  );\n};\n\nexport { TopBanners };\n"],"names":["TopBanners","isOnMediaLibraryRoute","useMatch","isMediaLibraryBannerVisible","setIsMediaLibraryBannerVisible","React","useState","_jsxs","_Fragment","_jsx","UpsellBanner","MediaLibraryBanner","onVisibilityChange"],"mappings":";;;;;;AAOA;;;;;AAKC,UACKA,UAAAA,GAAa,IAAA;;;;;IAKjB,MAAMC,qBAAAA,GAAwBC,SAAS,mBAAA,CAAA,KAAyB,IAAA;AAChE,IAAA,MAAM,CAACC,2BAAAA,EAA6BC,8BAAAA,CAA+B,GACjEC,KAAAA,CAAMC,QAAQ,CAACL,qBAAAA,CAAAA;IAEjB,qBACEM,IAAA,CAAAC,QAAA,EAAA;;AACG,YAAA,CAACL,6CAA+BM,GAAA,CAACC,YAAAA,EAAAA,EAAAA,CAAAA;0BAClCD,GAAA,CAACE,kBAAAA,EAAAA;gBAAmBC,kBAAAA,EAAoBR;;;;AAG9C;;;;"}

package/dist/admin/admin/src/components/UpsellBanner.js

@@ -7,24 +7,11 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var dateFns = require('date-fns');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
 var admin = require('../services/admin.js');
+var theme = require('../constants/theme.js');
 var usePersistentState = require('../hooks/usePersistentState.js');
 var DismissibleBanner = require('./DismissibleBanner.js');
 
-/**
- * Unlike `DismissibleBanner`'s own close button, this has no banner box left to
- * anchor to once dismissed (the banner unmounts entirely), so it stays pinned
- * to the viewport instead.
- */ const FixedButtonWrapper = styledComponents.styled(designSystem.Box)`
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  z-index: 1;
-  align-items: flex-end;
-  top: 9px;
-  right: 16px;
-`;
 const Banner = ({ isTrialEndedRecently, onDismiss })=>{
     const { formatMessage } = reactIntl.useIntl();
     return /*#__PURE__*/ jsxRuntime.jsx(DismissibleBanner.DismissibleBanner, {
@@ -113,15 +100,21 @@ const UpsellBanner = ()=>{
         return null;
     }
     if (isDismissed) {
-        return /*#__PURE__*/ jsxRuntime.jsx(FixedButtonWrapper, {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            justifyContent: "flex-end",
+            paddingTop: 1,
+            paddingBottom: 1,
+            paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                variant: "ghost",
                 withTooltip: false,
                 label: formatMessage({
                     id: 'app.components.UpsellBanner.reopen',
                     defaultMessage: 'Reopen banner'
                 }),
                 onClick: handleReopen,
-                children: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowsOut, {})
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronUp, {})
             })
         });
     }

package/dist/admin/admin/src/components/UpsellBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpsellBanner.js","sources":["../../../../../admin/src/components/UpsellBanner.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';\nimport { Box, IconButton, LinkButton, Typography } from '@strapi/design-system';\nimport { ArrowsOut } from '@strapi/icons';\nimport { isAfter, isValid, subDays } from 'date-fns';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useGetLicenseTrialTimeLeftQuery } from '../../src/services/admin';\nimport { useScopedPersistentState } from '../hooks/usePersistentState';\n\nimport { DismissibleBanner } from './DismissibleBanner';\n\n/**\n * Unlike `DismissibleBanner`'s own close button, this has no banner box left to\n * anchor to once dismissed (the banner unmounts entirely), so it stays pinned\n * to the viewport instead.\n */\nconst FixedButtonWrapper = styled(Box)`\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n  align-items: flex-end;\n  top: 9px;\n  right: 16px;\n`;\n\nconst Banner = ({\n  isTrialEndedRecently,\n  onDismiss,\n}: {\n  isTrialEndedRecently: boolean;\n  onDismiss: () => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <DismissibleBanner\n      onDismiss={onDismiss}\n      closeLabel={formatMessage({\n        id: 'app.components.UpsellBanner.close',\n        defaultMessage: 'Close',\n      })}\n      message={\n        <>\n          <Typography\n            variant=\"delta\"\n            fontWeight=\"bold\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.intro.ended',\n                    defaultMessage: 'Your trial has ended: ',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.intro',\n                    defaultMessage: 'Access to Growth plan features: ',\n                  }\n            )}\n          </Typography>\n          <Typography\n            variant=\"delta\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            paddingRight={4}\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.text.ended',\n                    defaultMessage: 'Keep access to Growth features by upgrading now.',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.text',\n                    defaultMessage:\n                      'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).',\n                  }\n            )}\n          </Typography>\n        </>\n      }\n      action={\n        <LinkButton\n          width=\"max-content\"\n          variant=\"tertiary\"\n          href=\"https://billing.strapi.io\"\n          target=\"_blank\"\n        >\n          {formatMessage(\n            isTrialEndedRecently\n              ? {\n                  id: 'app.components.UpsellBanner.button.ended',\n                  defaultMessage: 'Keep Growth plan',\n                }\n              : {\n                  id: 'app.components.UpsellBanner.button',\n                  defaultMessage: 'Upgrade now',\n                }\n          )}\n        </LinkButton>\n      }\n    />\n  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n  const { formatMessage } = useIntl();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\n    undefined\n  );\n\n  const [dismissedFor, setDismissedFor] = useScopedPersistentState<string | undefined>(\n    'STRAPI_UPSELL_BANNER_DISMISSED_FOR',\n    undefined\n  );\n\n  const sevenDaysAgo = subDays(new Date(), 7);\n\n  const timeLeftData = useGetLicenseTrialTimeLeftQuery(undefined, {\n    skip: !license?.isTrial,\n  });\n\n  useEffect(() => {\n    if (timeLeftData.data?.trialEndsAt) {\n      setCachedTrialEndsAt(timeLeftData.data.trialEndsAt);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [timeLeftData.data?.trialEndsAt]);\n\n  // When the license is not a trial + not EE, and the cached trial end date is found in the localstorage, that means the trial has ended\n  // We show the banner to encourage the user to upgrade (for 7 days after the trial ends)\n  const isTrialEndedRecently = Boolean(\n    !license?.isTrial &&\n      !window.strapi.isEE &&\n      cachedTrialEndsAt &&\n      isAfter(new Date(cachedTrialEndsAt), sevenDaysAgo)\n  );\n\n  const trialEndsAt = timeLeftData.data?.trialEndsAt ?? cachedTrialEndsAt;\n\n  const toCanonicalISO = (v: string | undefined): string | undefined => {\n    if (!v) return undefined;\n    const date = new Date(v);\n    return isValid(date) ? date.toISOString() : undefined;\n  };\n\n  const isDismissed = Boolean(\n    trialEndsAt && toCanonicalISO(dismissedFor) === toCanonicalISO(trialEndsAt)\n  );\n\n  const handleDismiss = () => setDismissedFor(toCanonicalISO(trialEndsAt));\n  const handleReopen = () => setDismissedFor(undefined);\n\n  if (!(timeLeftData.data?.trialEndsAt || isTrialEndedRecently)) {\n    return null;\n  }\n\n  if (isDismissed) {\n    return (\n      <FixedButtonWrapper>\n        <IconButton\n          withTooltip={false}\n          label={formatMessage({\n            id: 'app.components.UpsellBanner.reopen',\n            defaultMessage: 'Reopen banner',\n          })}\n          onClick={handleReopen}\n        >\n          <ArrowsOut />\n        </IconButton>\n      </FixedButtonWrapper>\n    );\n  }\n\n  return <Banner isTrialEndedRecently={isTrialEndedRecently} onDismiss={handleDismiss} />;\n};\n\nexport { UpsellBanner };\n"],"names":["FixedButtonWrapper","styled","Box","Banner","isTrialEndedRecently","onDismiss","formatMessage","useIntl","_jsx","DismissibleBanner","closeLabel","id","defaultMessage","message","_jsxs","_Fragment","Typography","variant","fontWeight","textColor","textAlign","fontSize","paddingRight","action","LinkButton","width","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","dismissedFor","setDismissedFor","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter","toCanonicalISO","v","date","isValid","toISOString","isDismissed","handleDismiss","handleReopen","IconButton","withTooltip","label","onClick","ArrowsOut"],"mappings":"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"}
+{"version":3,"file":"UpsellBanner.js","sources":["../../../../../admin/src/components/UpsellBanner.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';\nimport { Flex, IconButton, LinkButton, Typography } from '@strapi/design-system';\nimport { ChevronUp } from '@strapi/icons';\nimport { isAfter, isValid, subDays } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nimport { useGetLicenseTrialTimeLeftQuery } from '../../src/services/admin';\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useScopedPersistentState } from '../hooks/usePersistentState';\n\nimport { DismissibleBanner } from './DismissibleBanner';\n\nconst Banner = ({\n  isTrialEndedRecently,\n  onDismiss,\n}: {\n  isTrialEndedRecently: boolean;\n  onDismiss: () => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <DismissibleBanner\n      onDismiss={onDismiss}\n      closeLabel={formatMessage({\n        id: 'app.components.UpsellBanner.close',\n        defaultMessage: 'Close',\n      })}\n      message={\n        <>\n          <Typography\n            variant=\"delta\"\n            fontWeight=\"bold\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.intro.ended',\n                    defaultMessage: 'Your trial has ended: ',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.intro',\n                    defaultMessage: 'Access to Growth plan features: ',\n                  }\n            )}\n          </Typography>\n          <Typography\n            variant=\"delta\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            paddingRight={4}\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.text.ended',\n                    defaultMessage: 'Keep access to Growth features by upgrading now.',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.text',\n                    defaultMessage:\n                      'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).',\n                  }\n            )}\n          </Typography>\n        </>\n      }\n      action={\n        <LinkButton\n          width=\"max-content\"\n          variant=\"tertiary\"\n          href=\"https://billing.strapi.io\"\n          target=\"_blank\"\n        >\n          {formatMessage(\n            isTrialEndedRecently\n              ? {\n                  id: 'app.components.UpsellBanner.button.ended',\n                  defaultMessage: 'Keep Growth plan',\n                }\n              : {\n                  id: 'app.components.UpsellBanner.button',\n                  defaultMessage: 'Upgrade now',\n                }\n          )}\n        </LinkButton>\n      }\n    />\n  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n  const { formatMessage } = useIntl();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\n    undefined\n  );\n\n  const [dismissedFor, setDismissedFor] = useScopedPersistentState<string | undefined>(\n    'STRAPI_UPSELL_BANNER_DISMISSED_FOR',\n    undefined\n  );\n\n  const sevenDaysAgo = subDays(new Date(), 7);\n\n  const timeLeftData = useGetLicenseTrialTimeLeftQuery(undefined, {\n    skip: !license?.isTrial,\n  });\n\n  useEffect(() => {\n    if (timeLeftData.data?.trialEndsAt) {\n      setCachedTrialEndsAt(timeLeftData.data.trialEndsAt);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [timeLeftData.data?.trialEndsAt]);\n\n  // When the license is not a trial + not EE, and the cached trial end date is found in the localstorage, that means the trial has ended\n  // We show the banner to encourage the user to upgrade (for 7 days after the trial ends)\n  const isTrialEndedRecently = Boolean(\n    !license?.isTrial &&\n      !window.strapi.isEE &&\n      cachedTrialEndsAt &&\n      isAfter(new Date(cachedTrialEndsAt), sevenDaysAgo)\n  );\n\n  const trialEndsAt = timeLeftData.data?.trialEndsAt ?? cachedTrialEndsAt;\n\n  const toCanonicalISO = (v: string | undefined): string | undefined => {\n    if (!v) return undefined;\n    const date = new Date(v);\n    return isValid(date) ? date.toISOString() : undefined;\n  };\n\n  const isDismissed = Boolean(\n    trialEndsAt && toCanonicalISO(dismissedFor) === toCanonicalISO(trialEndsAt)\n  );\n\n  const handleDismiss = () => setDismissedFor(toCanonicalISO(trialEndsAt));\n  const handleReopen = () => setDismissedFor(undefined);\n\n  if (!(timeLeftData.data?.trialEndsAt || isTrialEndedRecently)) {\n    return null;\n  }\n\n  if (isDismissed) {\n    return (\n      <Flex\n        justifyContent=\"flex-end\"\n        paddingTop={1}\n        paddingBottom={1}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      >\n        <IconButton\n          variant=\"ghost\"\n          withTooltip={false}\n          label={formatMessage({\n            id: 'app.components.UpsellBanner.reopen',\n            defaultMessage: 'Reopen banner',\n          })}\n          onClick={handleReopen}\n        >\n          <ChevronUp />\n        </IconButton>\n      </Flex>\n    );\n  }\n\n  return <Banner isTrialEndedRecently={isTrialEndedRecently} onDismiss={handleDismiss} />;\n};\n\nexport { UpsellBanner };\n"],"names":["Banner","isTrialEndedRecently","onDismiss","formatMessage","useIntl","_jsx","DismissibleBanner","closeLabel","id","defaultMessage","message","_jsxs","_Fragment","Typography","variant","fontWeight","textColor","textAlign","fontSize","paddingRight","action","LinkButton","width","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","dismissedFor","setDismissedFor","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter","toCanonicalISO","v","date","isValid","toISOString","isDismissed","handleDismiss","handleReopen","Flex","justifyContent","paddingTop","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","IconButton","withTooltip","label","onClick","ChevronUp"],"mappings":"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"}

package/dist/admin/admin/src/components/UpsellBanner.mjs

@@ -1,28 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';
-import { IconButton, Box, LinkButton, Typography } from '@strapi/design-system';
-import { ArrowsOut } from '@strapi/icons';
+import { Flex, IconButton, LinkButton, Typography } from '@strapi/design-system';
+import { ChevronUp } from '@strapi/icons';
 import { subDays, isAfter, isValid } from 'date-fns';
 import { useIntl } from 'react-intl';
-import { styled } from 'styled-components';
 import { useGetLicenseTrialTimeLeftQuery } from '../services/admin.mjs';
+import { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme.mjs';
 import { useScopedPersistentState } from '../hooks/usePersistentState.mjs';
 import { DismissibleBanner } from './DismissibleBanner.mjs';
 
-/**
- * Unlike `DismissibleBanner`'s own close button, this has no banner box left to
- * anchor to once dismissed (the banner unmounts entirely), so it stays pinned
- * to the viewport instead.
- */ const FixedButtonWrapper = styled(Box)`
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  z-index: 1;
-  align-items: flex-end;
-  top: 9px;
-  right: 16px;
-`;
 const Banner = ({ isTrialEndedRecently, onDismiss })=>{
     const { formatMessage } = useIntl();
     return /*#__PURE__*/ jsx(DismissibleBanner, {
@@ -111,15 +98,21 @@ const UpsellBanner = ()=>{
         return null;
     }
     if (isDismissed) {
-        return /*#__PURE__*/ jsx(FixedButtonWrapper, {
+        return /*#__PURE__*/ jsx(Flex, {
+            justifyContent: "flex-end",
+            paddingTop: 1,
+            paddingBottom: 1,
+            paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: RESPONSIVE_DEFAULT_SPACING,
             children: /*#__PURE__*/ jsx(IconButton, {
+                variant: "ghost",
                 withTooltip: false,
                 label: formatMessage({
                     id: 'app.components.UpsellBanner.reopen',
                     defaultMessage: 'Reopen banner'
                 }),
                 onClick: handleReopen,
-                children: /*#__PURE__*/ jsx(ArrowsOut, {})
+                children: /*#__PURE__*/ jsx(ChevronUp, {})
             })
         });
     }

package/dist/admin/admin/src/components/UpsellBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UpsellBanner.mjs","sources":["../../../../../admin/src/components/UpsellBanner.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';\nimport { Box, IconButton, LinkButton, Typography } from '@strapi/design-system';\nimport { ArrowsOut } from '@strapi/icons';\nimport { isAfter, isValid, subDays } from 'date-fns';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useGetLicenseTrialTimeLeftQuery } from '../../src/services/admin';\nimport { useScopedPersistentState } from '../hooks/usePersistentState';\n\nimport { DismissibleBanner } from './DismissibleBanner';\n\n/**\n * Unlike `DismissibleBanner`'s own close button, this has no banner box left to\n * anchor to once dismissed (the banner unmounts entirely), so it stays pinned\n * to the viewport instead.\n */\nconst FixedButtonWrapper = styled(Box)`\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n  align-items: flex-end;\n  top: 9px;\n  right: 16px;\n`;\n\nconst Banner = ({\n  isTrialEndedRecently,\n  onDismiss,\n}: {\n  isTrialEndedRecently: boolean;\n  onDismiss: () => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <DismissibleBanner\n      onDismiss={onDismiss}\n      closeLabel={formatMessage({\n        id: 'app.components.UpsellBanner.close',\n        defaultMessage: 'Close',\n      })}\n      message={\n        <>\n          <Typography\n            variant=\"delta\"\n            fontWeight=\"bold\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.intro.ended',\n                    defaultMessage: 'Your trial has ended: ',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.intro',\n                    defaultMessage: 'Access to Growth plan features: ',\n                  }\n            )}\n          </Typography>\n          <Typography\n            variant=\"delta\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            paddingRight={4}\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.text.ended',\n                    defaultMessage: 'Keep access to Growth features by upgrading now.',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.text',\n                    defaultMessage:\n                      'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).',\n                  }\n            )}\n          </Typography>\n        </>\n      }\n      action={\n        <LinkButton\n          width=\"max-content\"\n          variant=\"tertiary\"\n          href=\"https://billing.strapi.io\"\n          target=\"_blank\"\n        >\n          {formatMessage(\n            isTrialEndedRecently\n              ? {\n                  id: 'app.components.UpsellBanner.button.ended',\n                  defaultMessage: 'Keep Growth plan',\n                }\n              : {\n                  id: 'app.components.UpsellBanner.button',\n                  defaultMessage: 'Upgrade now',\n                }\n          )}\n        </LinkButton>\n      }\n    />\n  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n  const { formatMessage } = useIntl();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\n    undefined\n  );\n\n  const [dismissedFor, setDismissedFor] = useScopedPersistentState<string | undefined>(\n    'STRAPI_UPSELL_BANNER_DISMISSED_FOR',\n    undefined\n  );\n\n  const sevenDaysAgo = subDays(new Date(), 7);\n\n  const timeLeftData = useGetLicenseTrialTimeLeftQuery(undefined, {\n    skip: !license?.isTrial,\n  });\n\n  useEffect(() => {\n    if (timeLeftData.data?.trialEndsAt) {\n      setCachedTrialEndsAt(timeLeftData.data.trialEndsAt);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [timeLeftData.data?.trialEndsAt]);\n\n  // When the license is not a trial + not EE, and the cached trial end date is found in the localstorage, that means the trial has ended\n  // We show the banner to encourage the user to upgrade (for 7 days after the trial ends)\n  const isTrialEndedRecently = Boolean(\n    !license?.isTrial &&\n      !window.strapi.isEE &&\n      cachedTrialEndsAt &&\n      isAfter(new Date(cachedTrialEndsAt), sevenDaysAgo)\n  );\n\n  const trialEndsAt = timeLeftData.data?.trialEndsAt ?? cachedTrialEndsAt;\n\n  const toCanonicalISO = (v: string | undefined): string | undefined => {\n    if (!v) return undefined;\n    const date = new Date(v);\n    return isValid(date) ? date.toISOString() : undefined;\n  };\n\n  const isDismissed = Boolean(\n    trialEndsAt && toCanonicalISO(dismissedFor) === toCanonicalISO(trialEndsAt)\n  );\n\n  const handleDismiss = () => setDismissedFor(toCanonicalISO(trialEndsAt));\n  const handleReopen = () => setDismissedFor(undefined);\n\n  if (!(timeLeftData.data?.trialEndsAt || isTrialEndedRecently)) {\n    return null;\n  }\n\n  if (isDismissed) {\n    return (\n      <FixedButtonWrapper>\n        <IconButton\n          withTooltip={false}\n          label={formatMessage({\n            id: 'app.components.UpsellBanner.reopen',\n            defaultMessage: 'Reopen banner',\n          })}\n          onClick={handleReopen}\n        >\n          <ArrowsOut />\n        </IconButton>\n      </FixedButtonWrapper>\n    );\n  }\n\n  return <Banner isTrialEndedRecently={isTrialEndedRecently} onDismiss={handleDismiss} />;\n};\n\nexport { UpsellBanner };\n"],"names":["FixedButtonWrapper","styled","Box","Banner","isTrialEndedRecently","onDismiss","formatMessage","useIntl","_jsx","DismissibleBanner","closeLabel","id","defaultMessage","message","_jsxs","_Fragment","Typography","variant","fontWeight","textColor","textAlign","fontSize","paddingRight","action","LinkButton","width","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","dismissedFor","setDismissedFor","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter","toCanonicalISO","v","date","isValid","toISOString","isDismissed","handleDismiss","handleReopen","IconButton","withTooltip","label","onClick","ArrowsOut"],"mappings":"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"}
+{"version":3,"file":"UpsellBanner.mjs","sources":["../../../../../admin/src/components/UpsellBanner.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';\nimport { Flex, IconButton, LinkButton, Typography } from '@strapi/design-system';\nimport { ChevronUp } from '@strapi/icons';\nimport { isAfter, isValid, subDays } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nimport { useGetLicenseTrialTimeLeftQuery } from '../../src/services/admin';\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useScopedPersistentState } from '../hooks/usePersistentState';\n\nimport { DismissibleBanner } from './DismissibleBanner';\n\nconst Banner = ({\n  isTrialEndedRecently,\n  onDismiss,\n}: {\n  isTrialEndedRecently: boolean;\n  onDismiss: () => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <DismissibleBanner\n      onDismiss={onDismiss}\n      closeLabel={formatMessage({\n        id: 'app.components.UpsellBanner.close',\n        defaultMessage: 'Close',\n      })}\n      message={\n        <>\n          <Typography\n            variant=\"delta\"\n            fontWeight=\"bold\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.intro.ended',\n                    defaultMessage: 'Your trial has ended: ',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.intro',\n                    defaultMessage: 'Access to Growth plan features: ',\n                  }\n            )}\n          </Typography>\n          <Typography\n            variant=\"delta\"\n            textColor=\"neutral0\"\n            textAlign=\"center\"\n            paddingRight={4}\n            fontSize={2}\n          >\n            {formatMessage(\n              isTrialEndedRecently\n                ? {\n                    id: 'app.components.UpsellBanner.text.ended',\n                    defaultMessage: 'Keep access to Growth features by upgrading now.',\n                  }\n                : {\n                    id: 'app.components.UpsellBanner.text',\n                    defaultMessage:\n                      'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).',\n                  }\n            )}\n          </Typography>\n        </>\n      }\n      action={\n        <LinkButton\n          width=\"max-content\"\n          variant=\"tertiary\"\n          href=\"https://billing.strapi.io\"\n          target=\"_blank\"\n        >\n          {formatMessage(\n            isTrialEndedRecently\n              ? {\n                  id: 'app.components.UpsellBanner.button.ended',\n                  defaultMessage: 'Keep Growth plan',\n                }\n              : {\n                  id: 'app.components.UpsellBanner.button',\n                  defaultMessage: 'Upgrade now',\n                }\n          )}\n        </LinkButton>\n      }\n    />\n  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n  const { formatMessage } = useIntl();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\n    undefined\n  );\n\n  const [dismissedFor, setDismissedFor] = useScopedPersistentState<string | undefined>(\n    'STRAPI_UPSELL_BANNER_DISMISSED_FOR',\n    undefined\n  );\n\n  const sevenDaysAgo = subDays(new Date(), 7);\n\n  const timeLeftData = useGetLicenseTrialTimeLeftQuery(undefined, {\n    skip: !license?.isTrial,\n  });\n\n  useEffect(() => {\n    if (timeLeftData.data?.trialEndsAt) {\n      setCachedTrialEndsAt(timeLeftData.data.trialEndsAt);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [timeLeftData.data?.trialEndsAt]);\n\n  // When the license is not a trial + not EE, and the cached trial end date is found in the localstorage, that means the trial has ended\n  // We show the banner to encourage the user to upgrade (for 7 days after the trial ends)\n  const isTrialEndedRecently = Boolean(\n    !license?.isTrial &&\n      !window.strapi.isEE &&\n      cachedTrialEndsAt &&\n      isAfter(new Date(cachedTrialEndsAt), sevenDaysAgo)\n  );\n\n  const trialEndsAt = timeLeftData.data?.trialEndsAt ?? cachedTrialEndsAt;\n\n  const toCanonicalISO = (v: string | undefined): string | undefined => {\n    if (!v) return undefined;\n    const date = new Date(v);\n    return isValid(date) ? date.toISOString() : undefined;\n  };\n\n  const isDismissed = Boolean(\n    trialEndsAt && toCanonicalISO(dismissedFor) === toCanonicalISO(trialEndsAt)\n  );\n\n  const handleDismiss = () => setDismissedFor(toCanonicalISO(trialEndsAt));\n  const handleReopen = () => setDismissedFor(undefined);\n\n  if (!(timeLeftData.data?.trialEndsAt || isTrialEndedRecently)) {\n    return null;\n  }\n\n  if (isDismissed) {\n    return (\n      <Flex\n        justifyContent=\"flex-end\"\n        paddingTop={1}\n        paddingBottom={1}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      >\n        <IconButton\n          variant=\"ghost\"\n          withTooltip={false}\n          label={formatMessage({\n            id: 'app.components.UpsellBanner.reopen',\n            defaultMessage: 'Reopen banner',\n          })}\n          onClick={handleReopen}\n        >\n          <ChevronUp />\n        </IconButton>\n      </Flex>\n    );\n  }\n\n  return <Banner isTrialEndedRecently={isTrialEndedRecently} onDismiss={handleDismiss} />;\n};\n\nexport { UpsellBanner };\n"],"names":["Banner","isTrialEndedRecently","onDismiss","formatMessage","useIntl","_jsx","DismissibleBanner","closeLabel","id","defaultMessage","message","_jsxs","_Fragment","Typography","variant","fontWeight","textColor","textAlign","fontSize","paddingRight","action","LinkButton","width","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","dismissedFor","setDismissedFor","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter","toCanonicalISO","v","date","isValid","toISOString","isDismissed","handleDismiss","handleReopen","Flex","justifyContent","paddingTop","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","IconButton","withTooltip","label","onClick","ChevronUp"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,SAAS,CAAC,EACdC,oBAAoB,EACpBC,SAAS,EAIV,GAAA;IACC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,GAAA,CAACC,iBAAAA,EAAAA;QACCJ,SAAAA,EAAWA,SAAAA;AACXK,QAAAA,UAAAA,EAAYJ,aAAAA,CAAc;YACxBK,EAAAA,EAAI,mCAAA;YACJC,cAAAA,EAAgB;AAClB,SAAA,CAAA;QACAC,OAAAA,gBACEC,IAAA,CAAAC,QAAA,EAAA;;8BACEP,GAAA,CAACQ,UAAAA,EAAAA;oBACCC,OAAAA,EAAQ,OAAA;oBACRC,UAAAA,EAAW,MAAA;oBACXC,SAAAA,EAAU,UAAA;oBACVC,SAAAA,EAAU,QAAA;oBACVC,QAAAA,EAAU,CAAA;AAETf,oBAAAA,QAAAA,EAAAA,aAAAA,CACCF,oBAAAA,GACI;wBACEO,EAAAA,EAAI,yCAAA;wBACJC,cAAAA,EAAgB;qBAClB,GACA;wBACED,EAAAA,EAAI,mCAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA;;8BAGRJ,GAAA,CAACQ,UAAAA,EAAAA;oBACCC,OAAAA,EAAQ,OAAA;oBACRE,SAAAA,EAAU,UAAA;oBACVC,SAAAA,EAAU,QAAA;oBACVE,YAAAA,EAAc,CAAA;oBACdD,QAAAA,EAAU,CAAA;AAETf,oBAAAA,QAAAA,EAAAA,aAAAA,CACCF,oBAAAA,GACI;wBACEO,EAAAA,EAAI,wCAAA;wBACJC,cAAAA,EAAgB;qBAClB,GACA;wBACED,EAAAA,EAAI,kCAAA;wBACJC,cAAAA,EACE;AACJ,qBAAA;;;;AAKZW,QAAAA,MAAAA,gBACEf,GAAA,CAACgB,UAAAA,EAAAA;YACCC,KAAAA,EAAM,aAAA;YACNR,OAAAA,EAAQ,UAAA;YACRS,IAAAA,EAAK,2BAAA;YACLC,MAAAA,EAAO,QAAA;AAENrB,YAAAA,QAAAA,EAAAA,aAAAA,CACCF,oBAAAA,GACI;gBACEO,EAAAA,EAAI,0CAAA;gBACJC,cAAAA,EAAgB;aAClB,GACA;gBACED,EAAAA,EAAI,oCAAA;gBACJC,cAAAA,EAAgB;AAClB,aAAA;;;AAMhB,CAAA;AAEA,MAAMgB,YAAAA,GAAe,IAAA;IACnB,MAAM,EAAEC,OAAO,EAAE,GAAGC,gBAAAA,EAAAA;IACpB,MAAM,EAAExB,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAM,CAACwB,iBAAAA,EAAmBC,oBAAAA,CAAqB,GAAGC,yBAChD,2BAAA,EACAC,SAAAA,CAAAA;AAGF,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGH,yBACtC,oCAAA,EACAC,SAAAA,CAAAA;IAGF,MAAMG,YAAAA,GAAeC,OAAAA,CAAQ,IAAIC,IAAAA,EAAAA,EAAQ,CAAA,CAAA;IAEzC,MAAMC,YAAAA,GAAeC,gCAAgCP,SAAAA,EAAW;AAC9DQ,QAAAA,IAAAA,EAAM,CAACb,OAAAA,EAASc;AAClB,KAAA,CAAA;IAEAC,SAAAA,CAAU,IAAA;QACR,IAAIJ,YAAAA,CAAaK,IAAI,EAAEC,WAAAA,EAAa;YAClCd,oBAAAA,CAAqBQ,YAAAA,CAAaK,IAAI,CAACC,WAAW,CAAA;AACpD,QAAA;;IAEF,CAAA,EAAG;AAACN,QAAAA,YAAAA,CAAaK,IAAI,EAAEC;AAAY,KAAA,CAAA;;;AAInC,IAAA,MAAM1C,oBAAAA,GAAuB2C,OAAAA,CAC3B,CAAClB,OAAAA,EAASc,WACR,CAACK,MAAAA,CAAOC,MAAM,CAACC,IAAI,IACnBnB,iBAAAA,IACAoB,OAAAA,CAAQ,IAAIZ,KAAKR,iBAAAA,CAAAA,EAAoBM,YAAAA,CAAAA,CAAAA;AAGzC,IAAA,MAAMS,WAAAA,GAAcN,YAAAA,CAAaK,IAAI,EAAEC,WAAAA,IAAef,iBAAAA;AAEtD,IAAA,MAAMqB,iBAAiB,CAACC,CAAAA,GAAAA;QACtB,IAAI,CAACA,GAAG,OAAOnB,SAAAA;QACf,MAAMoB,IAAAA,GAAO,IAAIf,IAAAA,CAAKc,CAAAA,CAAAA;AACtB,QAAA,OAAOE,OAAAA,CAAQD,IAAAA,CAAAA,GAAQA,IAAAA,CAAKE,WAAW,EAAA,GAAKtB,SAAAA;AAC9C,IAAA,CAAA;AAEA,IAAA,MAAMuB,WAAAA,GAAcV,OAAAA,CAClBD,WAAAA,IAAeM,cAAAA,CAAejB,kBAAkBiB,cAAAA,CAAeN,WAAAA,CAAAA,CAAAA;IAGjE,MAAMY,aAAAA,GAAgB,IAAMtB,eAAAA,CAAgBgB,cAAAA,CAAeN,WAAAA,CAAAA,CAAAA;IAC3D,MAAMa,YAAAA,GAAe,IAAMvB,eAAAA,CAAgBF,SAAAA,CAAAA;AAE3C,IAAA,IAAI,EAAEM,YAAAA,CAAaK,IAAI,EAAEC,WAAAA,IAAe1C,oBAAmB,CAAA,EAAI;QAC7D,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,IAAIqD,WAAAA,EAAa;AACf,QAAA,qBACEjD,GAAA,CAACoD,IAAAA,EAAAA;YACCC,cAAAA,EAAe,UAAA;YACfC,UAAAA,EAAY,CAAA;YACZC,aAAAA,EAAe,CAAA;YACfC,WAAAA,EAAaC,0BAAAA;YACb3C,YAAAA,EAAc2C,0BAAAA;AAEd,YAAA,QAAA,gBAAAzD,GAAA,CAAC0D,UAAAA,EAAAA;gBACCjD,OAAAA,EAAQ,OAAA;gBACRkD,WAAAA,EAAa,KAAA;AACbC,gBAAAA,KAAAA,EAAO9D,aAAAA,CAAc;oBACnBK,EAAAA,EAAI,oCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;gBACAyD,OAAAA,EAASV,YAAAA;AAET,gBAAA,QAAA,gBAAAnD,GAAA,CAAC8D,SAAAA,EAAAA,EAAAA;;;AAIT,IAAA;AAEA,IAAA,qBAAO9D,GAAA,CAACL,MAAAA,EAAAA;QAAOC,oBAAAA,EAAsBA,oBAAAA;QAAsBC,SAAAA,EAAWqD;;AACxE;;;;"}

package/dist/admin/admin/src/features/Tracking.js

@@ -35,7 +35,8 @@ var axios__default = /*#__PURE__*/_interopDefault(axios);
 /* -------------------------------------------------------------------------------------------------
  * Context
  * -----------------------------------------------------------------------------------------------*/ const TrackingContext = /*#__PURE__*/ React__namespace.createContext({
-    uuid: false
+    uuid: false,
+    isStrapiVersionReady: false
 });
 const TrackingProvider = ({ children })=>{
     const token = Auth.useAuth('App', (state)=>state.token);
@@ -45,8 +46,14 @@ const TrackingProvider = ({ children })=>{
     const { data } = admin.useTelemetryPropertiesQuery(undefined, {
         skip: !initData?.uuid || !token
     });
+    const versionQueryEnabled = Boolean(initData?.uuid && token);
+    const { data: appInfo, isLoading: isLoadingAppInfo, isError: isInformationError } = admin.useInformationQuery(undefined, {
+        skip: !versionQueryEnabled
+    });
+    const strapiVersion = appInfo?.strapiVersion;
+    const isStrapiVersionReady = Boolean(strapiVersion) || versionQueryEnabled && isInformationError;
     React__namespace.useEffect(()=>{
-        if (uuid && data) {
+        if (uuid && data && !isLoadingAppInfo) {
             const event = 'didInitializeAdministration';
             try {
                 fetch(`${process.env.STRAPI_ANALYTICS_URL || 'https://analytics.strapi.io'}/api/v2/track`, {
@@ -59,7 +66,8 @@ const TrackingProvider = ({ children })=>{
                         groupProperties: {
                             ...data,
                             projectId: uuid,
-                            registeredWidgets: getAllWidgets().map((widget)=>widget.uid)
+                            registeredWidgets: getAllWidgets().map((widget)=>widget.uid),
+                            version: strapiVersion
                         }
                     }),
                     headers: {
@@ -74,14 +82,20 @@ const TrackingProvider = ({ children })=>{
     }, [
         data,
         uuid,
-        getAllWidgets
+        getAllWidgets,
+        isLoadingAppInfo,
+        strapiVersion
     ]);
     const value = React__namespace.useMemo(()=>({
             uuid,
-            telemetryProperties: data
+            telemetryProperties: data,
+            strapiVersion,
+            isStrapiVersionReady
         }), [
         uuid,
-        data
+        data,
+        strapiVersion,
+        isStrapiVersionReady
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(TrackingContext.Provider, {
         value: value,
@@ -109,7 +123,7 @@ const TrackingProvider = ({ children })=>{
     const deviceType = useDeviceType.useDeviceType();
     const deviceTypeRef = React__namespace.useRef(deviceType);
     deviceTypeRef.current = deviceType;
-    const { uuid, telemetryProperties } = React__namespace.useContext(TrackingContext);
+    const { uuid, telemetryProperties, strapiVersion } = React__namespace.useContext(TrackingContext);
     const userId = AppInfo.useAppInfo('useTracking', (state)=>state.userId);
     const trackUsage = React__namespace.useCallback(async (event, properties)=>{
         try {
@@ -126,7 +140,8 @@ const TrackingProvider = ({ children })=>{
                     groupProperties: {
                         ...telemetryProperties,
                         projectId: uuid,
-                        projectType: window.strapi.projectType
+                        projectType: window.strapi.projectType,
+                        version: strapiVersion
                     }
                 }, {
                     headers: {
@@ -141,6 +156,7 @@ const TrackingProvider = ({ children })=>{
         }
         return null;
     }, [
+        strapiVersion,
         telemetryProperties,
         userId,
         uuid
@@ -149,7 +165,11 @@ const TrackingProvider = ({ children })=>{
         trackUsage
     };
 };
+/**
+ * Internal readiness signal for events that must wait for the provider's version.
+ */ const useStrapiVersionReady = ()=>React__namespace.useContext(TrackingContext).isStrapiVersionReady;
 
 exports.TrackingProvider = TrackingProvider;
+exports.useStrapiVersionReady = useStrapiVersionReady;
 exports.useTracking = useTracking;
 //# sourceMappingURL=Tracking.js.map