@strapi/admin 5.53.0 → 5.55.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubNavFolder.js","sources":["../../../../../admin/src/components/SubNavFolder.tsx"],"sourcesContent":["import { useCallback, useId, useRef, useState } from 'react';\n\nimport { Box, Flex, Tooltip, Typography } from '@strapi/design-system';\nimport { ChevronDown } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst ANIMATION_DURATION = '0.5s';\nconst COLLAPSE_EASING = 'cubic-bezier(0, 1, 0, 1)';\n\ninterface SubNavFolderProps {\n  label: string;\n  depth?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onToggle?: (open: boolean) => void;\n  endAction?: React.ReactNode;\n  /** Ref attached to the row element used as a drag-and-drop drop target. */\n  rowRef?: React.Ref<HTMLDivElement>;\n  isDropTarget?: boolean;\n  children?: React.ReactNode;\n}\n\nconst FolderRow = styled(Flex)<{ $depth: number; $isDropTarget?: boolean }>`\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-right: ${({ theme }) => theme.spaces[3]};\n\n  padding-left: ${({ theme, $depth }) =>\n    `calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};\n\n  background-color: ${({ $isDropTarget, theme }) =>\n    $isDropTarget ? theme.colors.primary100 : 'transparent'};\n  outline: ${({ $isDropTarget, theme }) =>\n    $isDropTarget ? `1px solid ${theme.colors.primary600}` : 'none'};\n  outline-offset: -1px;\n\n  &:hover {\n    background-color: ${({ $isDropTarget, theme }) =>\n      $isDropTarget ? theme.colors.primary100 : theme.colors.neutral100};\n  }\n`;\n\nconst ToggleButton = styled.button`\n  gap: ${({ theme }) => theme.spaces[2]};\n  align-items: center;\n  display: flex;\n  flex: 1;\n\n  padding-block: ${({ theme }) => theme.spaces[2]};\n  padding-inline: 0;\n\n  min-width: 0;\n\n  background: transparent;\n  border: none;\n\n  text-align: left;\n  cursor: pointer;\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst EndActionWrapper = styled(Flex)`\n  flex-shrink: 0;\n  opacity: 0;\n  transition: opacity 0.1s ease-out;\n\n  ${FolderRow}:hover &,\n  ${FolderRow}:focus-within & {\n    opacity: 1;\n  }\n`;\n\nconst Collapsible = styled.div<{ $open: boolean }>`\n  grid-template-rows: ${({ $open }) => ($open ? '1fr' : '0fr')};\n  display: grid;\n\n  transition: grid-template-rows ${ANIMATION_DURATION} ${COLLAPSE_EASING};\n`;\n\nconst CollapsibleInner = styled.div`\n  overflow: hidden;\n  min-height: 0;\n`;\n\ninterface FolderViewProps {\n  rowRef?: React.Ref<HTMLDivElement>;\n  endAction?: React.ReactNode;\n  children?: React.ReactNode;\n  onToggleClick: () => void;\n  isDropTarget?: boolean;\n  label: string;\n  depth: number;\n  open: boolean;\n}\n\nconst FolderView = ({\n  onToggleClick,\n  isDropTarget,\n  endAction,\n  children,\n  rowRef,\n  label,\n  depth,\n  open,\n}: FolderViewProps) => {\n  const listId = useId();\n\n  const [isLabelTruncated, setIsLabelTruncated] = useState(false);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  // A callback ref (rather than useRef + useEffect) so measurement survives the label\n  // element remounting when it moves in and out of the Tooltip wrapper below.\n  const measureLabelRef = useCallback((node: HTMLElement | null) => {\n    if (resizeObserverRef.current) {\n      resizeObserverRef.current.disconnect();\n      resizeObserverRef.current = null;\n    }\n\n    if (!node) {\n      return;\n    }\n\n    const measure = () => {\n      setIsLabelTruncated(node.scrollWidth > node.clientWidth);\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    resizeObserverRef.current = new ResizeObserver(measure);\n    resizeObserverRef.current.observe(node);\n  }, []);\n\n  const applyInertWhenClosed = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (!node) {\n        return;\n      }\n\n      if (open) {\n        node.removeAttribute('inert');\n      } else {\n        node.setAttribute('inert', '');\n      }\n    },\n    [open]\n  );\n\n  const labelTypography = (\n    <Typography\n      textColor=\"neutral800\"\n      fontWeight=\"semiBold\"\n      ref={measureLabelRef}\n      overflow=\"hidden\"\n      tag=\"span\"\n      style={{ flex: 1, minWidth: 0, textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n    >\n      {label}\n    </Typography>\n  );\n\n  return (\n    <Box>\n      <FolderRow ref={rowRef} $depth={depth} $isDropTarget={isDropTarget} alignItems=\"center\">\n        <ToggleButton\n          onClick={onToggleClick}\n          aria-controls={listId}\n          aria-expanded={open}\n          type=\"button\"\n        >\n          <ChevronDown\n            fill=\"neutral500\"\n            aria-hidden\n            style={{\n              transform: `rotate(${open ? '0deg' : '-90deg'})`,\n              transition: `transform ${ANIMATION_DURATION}`,\n              flexShrink: 0,\n            }}\n          />\n          {isLabelTruncated ? <Tooltip label={label}>{labelTypography}</Tooltip> : labelTypography}\n        </ToggleButton>\n        {endAction != null && (\n          <EndActionWrapper gap={2} alignItems=\"center\">\n            {endAction}\n          </EndActionWrapper>\n        )}\n      </FolderRow>\n      <Collapsible $open={open} id={listId}>\n        <CollapsibleInner ref={applyInertWhenClosed}>{children}</CollapsibleInner>\n      </Collapsible>\n    </Box>\n  );\n};\n\nconst SubNavFolder = ({\n  defaultOpen = false,\n  open: openProp,\n  isDropTarget,\n  endAction,\n  children,\n  onToggle,\n  rowRef,\n  label,\n  depth = 0,\n}: SubNavFolderProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n  const isControlled = openProp !== undefined;\n  const open = isControlled ? openProp : uncontrolledOpen;\n\n  const handleToggleClick = () => {\n    const next = !open;\n\n    if (!isControlled) {\n      setUncontrolledOpen(next);\n    }\n\n    onToggle?.(next);\n  };\n\n  return (\n    <FolderView\n      onToggleClick={handleToggleClick}\n      isDropTarget={isDropTarget}\n      endAction={endAction}\n      rowRef={rowRef}\n      label={label}\n      depth={depth}\n      open={open}\n    >\n      {children}\n    </FolderView>\n  );\n};\n\nexport { SubNavFolder };\nexport type { SubNavFolderProps };\n"],"names":["ANIMATION_DURATION","COLLAPSE_EASING","FolderRow","styled","Flex","theme","borderRadius","spaces","$depth","$isDropTarget","colors","primary100","primary600","neutral100","ToggleButton","button","EndActionWrapper","Collapsible","div","$open","CollapsibleInner","FolderView","onToggleClick","isDropTarget","endAction","children","rowRef","label","depth","open","listId","useId","isLabelTruncated","setIsLabelTruncated","useState","resizeObserverRef","useRef","measureLabelRef","useCallback","node","current","disconnect","measure","scrollWidth","clientWidth","ResizeObserver","observe","applyInertWhenClosed","removeAttribute","setAttribute","labelTypography","_jsx","Typography","textColor","fontWeight","ref","overflow","tag","style","flex","minWidth","textOverflow","whiteSpace","_jsxs","Box","alignItems","onClick","aria-controls","aria-expanded","type","ChevronDown","fill","aria-hidden","transform","transition","flexShrink","Tooltip","gap","id","SubNavFolder","defaultOpen","openProp","onToggle","uncontrolledOpen","setUncontrolledOpen","isControlled","undefined","handleToggleClick","next"],"mappings":"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"}

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

@@ -0,0 +1,186 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useId, useRef, useCallback } from 'react';
+import { Flex, Box, Tooltip, Typography } from '@strapi/design-system';
+import { ChevronDown } from '@strapi/icons';
+import { styled } from 'styled-components';
+
+const ANIMATION_DURATION = '0.5s';
+const COLLAPSE_EASING = 'cubic-bezier(0, 1, 0, 1)';
+const FolderRow = styled(Flex)`
+  border-radius: ${({ theme })=>theme.borderRadius};
+
+  padding-right: ${({ theme })=>theme.spaces[3]};
+
+  padding-left: ${({ theme, $depth })=>`calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};
+
+  background-color: ${({ $isDropTarget, theme })=>$isDropTarget ? theme.colors.primary100 : 'transparent'};
+  outline: ${({ $isDropTarget, theme })=>$isDropTarget ? `1px solid ${theme.colors.primary600}` : 'none'};
+  outline-offset: -1px;
+
+  &:hover {
+    background-color: ${({ $isDropTarget, theme })=>$isDropTarget ? theme.colors.primary100 : theme.colors.neutral100};
+  }
+`;
+const ToggleButton = styled.button`
+  gap: ${({ theme })=>theme.spaces[2]};
+  align-items: center;
+  display: flex;
+  flex: 1;
+
+  padding-block: ${({ theme })=>theme.spaces[2]};
+  padding-inline: 0;
+
+  min-width: 0;
+
+  background: transparent;
+  border: none;
+
+  text-align: left;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const EndActionWrapper = styled(Flex)`
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.1s ease-out;
+
+  ${FolderRow}:hover &,
+  ${FolderRow}:focus-within & {
+    opacity: 1;
+  }
+`;
+const Collapsible = styled.div`
+  grid-template-rows: ${({ $open })=>$open ? '1fr' : '0fr'};
+  display: grid;
+
+  transition: grid-template-rows ${ANIMATION_DURATION} ${COLLAPSE_EASING};
+`;
+const CollapsibleInner = styled.div`
+  overflow: hidden;
+  min-height: 0;
+`;
+const FolderView = ({ onToggleClick, isDropTarget, endAction, children, rowRef, label, depth, open })=>{
+    const listId = useId();
+    const [isLabelTruncated, setIsLabelTruncated] = useState(false);
+    const resizeObserverRef = useRef(null);
+    // A callback ref (rather than useRef + useEffect) so measurement survives the label
+    // element remounting when it moves in and out of the Tooltip wrapper below.
+    const measureLabelRef = useCallback((node)=>{
+        if (resizeObserverRef.current) {
+            resizeObserverRef.current.disconnect();
+            resizeObserverRef.current = null;
+        }
+        if (!node) {
+            return;
+        }
+        const measure = ()=>{
+            setIsLabelTruncated(node.scrollWidth > node.clientWidth);
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        resizeObserverRef.current = new ResizeObserver(measure);
+        resizeObserverRef.current.observe(node);
+    }, []);
+    const applyInertWhenClosed = useCallback((node)=>{
+        if (!node) {
+            return;
+        }
+        if (open) {
+            node.removeAttribute('inert');
+        } else {
+            node.setAttribute('inert', '');
+        }
+    }, [
+        open
+    ]);
+    const labelTypography = /*#__PURE__*/ jsx(Typography, {
+        textColor: "neutral800",
+        fontWeight: "semiBold",
+        ref: measureLabelRef,
+        overflow: "hidden",
+        tag: "span",
+        style: {
+            flex: 1,
+            minWidth: 0,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+        children: label
+    });
+    return /*#__PURE__*/ jsxs(Box, {
+        children: [
+            /*#__PURE__*/ jsxs(FolderRow, {
+                ref: rowRef,
+                $depth: depth,
+                $isDropTarget: isDropTarget,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsxs(ToggleButton, {
+                        onClick: onToggleClick,
+                        "aria-controls": listId,
+                        "aria-expanded": open,
+                        type: "button",
+                        children: [
+                            /*#__PURE__*/ jsx(ChevronDown, {
+                                fill: "neutral500",
+                                "aria-hidden": true,
+                                style: {
+                                    transform: `rotate(${open ? '0deg' : '-90deg'})`,
+                                    transition: `transform ${ANIMATION_DURATION}`,
+                                    flexShrink: 0
+                                }
+                            }),
+                            isLabelTruncated ? /*#__PURE__*/ jsx(Tooltip, {
+                                label: label,
+                                children: labelTypography
+                            }) : labelTypography
+                        ]
+                    }),
+                    endAction != null && /*#__PURE__*/ jsx(EndActionWrapper, {
+                        gap: 2,
+                        alignItems: "center",
+                        children: endAction
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Collapsible, {
+                $open: open,
+                id: listId,
+                children: /*#__PURE__*/ jsx(CollapsibleInner, {
+                    ref: applyInertWhenClosed,
+                    children: children
+                })
+            })
+        ]
+    });
+};
+const SubNavFolder = ({ defaultOpen = false, open: openProp, isDropTarget, endAction, children, onToggle, rowRef, label, depth = 0 })=>{
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const handleToggleClick = ()=>{
+        const next = !open;
+        if (!isControlled) {
+            setUncontrolledOpen(next);
+        }
+        onToggle?.(next);
+    };
+    return /*#__PURE__*/ jsx(FolderView, {
+        onToggleClick: handleToggleClick,
+        isDropTarget: isDropTarget,
+        endAction: endAction,
+        rowRef: rowRef,
+        label: label,
+        depth: depth,
+        open: open,
+        children: children
+    });
+};
+
+export { SubNavFolder };
+//# sourceMappingURL=SubNavFolder.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubNavFolder.mjs","sources":["../../../../../admin/src/components/SubNavFolder.tsx"],"sourcesContent":["import { useCallback, useId, useRef, useState } from 'react';\n\nimport { Box, Flex, Tooltip, Typography } from '@strapi/design-system';\nimport { ChevronDown } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst ANIMATION_DURATION = '0.5s';\nconst COLLAPSE_EASING = 'cubic-bezier(0, 1, 0, 1)';\n\ninterface SubNavFolderProps {\n  label: string;\n  depth?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onToggle?: (open: boolean) => void;\n  endAction?: React.ReactNode;\n  /** Ref attached to the row element used as a drag-and-drop drop target. */\n  rowRef?: React.Ref<HTMLDivElement>;\n  isDropTarget?: boolean;\n  children?: React.ReactNode;\n}\n\nconst FolderRow = styled(Flex)<{ $depth: number; $isDropTarget?: boolean }>`\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-right: ${({ theme }) => theme.spaces[3]};\n\n  padding-left: ${({ theme, $depth }) =>\n    `calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};\n\n  background-color: ${({ $isDropTarget, theme }) =>\n    $isDropTarget ? theme.colors.primary100 : 'transparent'};\n  outline: ${({ $isDropTarget, theme }) =>\n    $isDropTarget ? `1px solid ${theme.colors.primary600}` : 'none'};\n  outline-offset: -1px;\n\n  &:hover {\n    background-color: ${({ $isDropTarget, theme }) =>\n      $isDropTarget ? theme.colors.primary100 : theme.colors.neutral100};\n  }\n`;\n\nconst ToggleButton = styled.button`\n  gap: ${({ theme }) => theme.spaces[2]};\n  align-items: center;\n  display: flex;\n  flex: 1;\n\n  padding-block: ${({ theme }) => theme.spaces[2]};\n  padding-inline: 0;\n\n  min-width: 0;\n\n  background: transparent;\n  border: none;\n\n  text-align: left;\n  cursor: pointer;\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst EndActionWrapper = styled(Flex)`\n  flex-shrink: 0;\n  opacity: 0;\n  transition: opacity 0.1s ease-out;\n\n  ${FolderRow}:hover &,\n  ${FolderRow}:focus-within & {\n    opacity: 1;\n  }\n`;\n\nconst Collapsible = styled.div<{ $open: boolean }>`\n  grid-template-rows: ${({ $open }) => ($open ? '1fr' : '0fr')};\n  display: grid;\n\n  transition: grid-template-rows ${ANIMATION_DURATION} ${COLLAPSE_EASING};\n`;\n\nconst CollapsibleInner = styled.div`\n  overflow: hidden;\n  min-height: 0;\n`;\n\ninterface FolderViewProps {\n  rowRef?: React.Ref<HTMLDivElement>;\n  endAction?: React.ReactNode;\n  children?: React.ReactNode;\n  onToggleClick: () => void;\n  isDropTarget?: boolean;\n  label: string;\n  depth: number;\n  open: boolean;\n}\n\nconst FolderView = ({\n  onToggleClick,\n  isDropTarget,\n  endAction,\n  children,\n  rowRef,\n  label,\n  depth,\n  open,\n}: FolderViewProps) => {\n  const listId = useId();\n\n  const [isLabelTruncated, setIsLabelTruncated] = useState(false);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  // A callback ref (rather than useRef + useEffect) so measurement survives the label\n  // element remounting when it moves in and out of the Tooltip wrapper below.\n  const measureLabelRef = useCallback((node: HTMLElement | null) => {\n    if (resizeObserverRef.current) {\n      resizeObserverRef.current.disconnect();\n      resizeObserverRef.current = null;\n    }\n\n    if (!node) {\n      return;\n    }\n\n    const measure = () => {\n      setIsLabelTruncated(node.scrollWidth > node.clientWidth);\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    resizeObserverRef.current = new ResizeObserver(measure);\n    resizeObserverRef.current.observe(node);\n  }, []);\n\n  const applyInertWhenClosed = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (!node) {\n        return;\n      }\n\n      if (open) {\n        node.removeAttribute('inert');\n      } else {\n        node.setAttribute('inert', '');\n      }\n    },\n    [open]\n  );\n\n  const labelTypography = (\n    <Typography\n      textColor=\"neutral800\"\n      fontWeight=\"semiBold\"\n      ref={measureLabelRef}\n      overflow=\"hidden\"\n      tag=\"span\"\n      style={{ flex: 1, minWidth: 0, textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n    >\n      {label}\n    </Typography>\n  );\n\n  return (\n    <Box>\n      <FolderRow ref={rowRef} $depth={depth} $isDropTarget={isDropTarget} alignItems=\"center\">\n        <ToggleButton\n          onClick={onToggleClick}\n          aria-controls={listId}\n          aria-expanded={open}\n          type=\"button\"\n        >\n          <ChevronDown\n            fill=\"neutral500\"\n            aria-hidden\n            style={{\n              transform: `rotate(${open ? '0deg' : '-90deg'})`,\n              transition: `transform ${ANIMATION_DURATION}`,\n              flexShrink: 0,\n            }}\n          />\n          {isLabelTruncated ? <Tooltip label={label}>{labelTypography}</Tooltip> : labelTypography}\n        </ToggleButton>\n        {endAction != null && (\n          <EndActionWrapper gap={2} alignItems=\"center\">\n            {endAction}\n          </EndActionWrapper>\n        )}\n      </FolderRow>\n      <Collapsible $open={open} id={listId}>\n        <CollapsibleInner ref={applyInertWhenClosed}>{children}</CollapsibleInner>\n      </Collapsible>\n    </Box>\n  );\n};\n\nconst SubNavFolder = ({\n  defaultOpen = false,\n  open: openProp,\n  isDropTarget,\n  endAction,\n  children,\n  onToggle,\n  rowRef,\n  label,\n  depth = 0,\n}: SubNavFolderProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n  const isControlled = openProp !== undefined;\n  const open = isControlled ? openProp : uncontrolledOpen;\n\n  const handleToggleClick = () => {\n    const next = !open;\n\n    if (!isControlled) {\n      setUncontrolledOpen(next);\n    }\n\n    onToggle?.(next);\n  };\n\n  return (\n    <FolderView\n      onToggleClick={handleToggleClick}\n      isDropTarget={isDropTarget}\n      endAction={endAction}\n      rowRef={rowRef}\n      label={label}\n      depth={depth}\n      open={open}\n    >\n      {children}\n    </FolderView>\n  );\n};\n\nexport { SubNavFolder };\nexport type { SubNavFolderProps };\n"],"names":["ANIMATION_DURATION","COLLAPSE_EASING","FolderRow","styled","Flex","theme","borderRadius","spaces","$depth","$isDropTarget","colors","primary100","primary600","neutral100","ToggleButton","button","EndActionWrapper","Collapsible","div","$open","CollapsibleInner","FolderView","onToggleClick","isDropTarget","endAction","children","rowRef","label","depth","open","listId","useId","isLabelTruncated","setIsLabelTruncated","useState","resizeObserverRef","useRef","measureLabelRef","useCallback","node","current","disconnect","measure","scrollWidth","clientWidth","ResizeObserver","observe","applyInertWhenClosed","removeAttribute","setAttribute","labelTypography","_jsx","Typography","textColor","fontWeight","ref","overflow","tag","style","flex","minWidth","textOverflow","whiteSpace","_jsxs","Box","alignItems","onClick","aria-controls","aria-expanded","type","ChevronDown","fill","aria-hidden","transform","transition","flexShrink","Tooltip","gap","id","SubNavFolder","defaultOpen","openProp","onToggle","uncontrolledOpen","setUncontrolledOpen","isControlled","undefined","handleToggleClick","next"],"mappings":"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"}

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

@@ -9,105 +9,75 @@ 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');
 
-const BannerBackground = styledComponents.styled(designSystem.Flex)`
-  background: linear-gradient(
-    90deg,
-    ${({ theme })=>theme.colors.primary600} 0%,
-    ${({ theme })=>theme.colors.alternative600} 121.48%
-  );
-  position: relative;
-`;
-const FixedButtonWrapper = styledComponents.styled(designSystem.Box)`
+/**
+ * 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: 11;
+  z-index: 1;
   align-items: flex-end;
   top: 9px;
   right: 16px;
 `;
 const Banner = ({ isTrialEndedRecently, onDismiss })=>{
     const { formatMessage } = reactIntl.useIntl();
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(BannerBackground, {
-                width: "100%",
-                justifyContent: "center",
-                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    justifyContent: "center",
-                    alignItems: "center",
-                    width: "100%",
-                    paddingTop: 2,
-                    paddingBottom: 2,
-                    paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
-                    paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
-                    gap: 2,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                    variant: "delta",
-                                    fontWeight: "bold",
-                                    textColor: "neutral0",
-                                    textAlign: "center",
-                                    fontSize: 2,
-                                    children: formatMessage(isTrialEndedRecently ? {
-                                        id: 'app.components.UpsellBanner.intro.ended',
-                                        defaultMessage: 'Your trial has ended: '
-                                    } : {
-                                        id: 'app.components.UpsellBanner.intro',
-                                        defaultMessage: 'Access to Growth plan features: '
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                    variant: "delta",
-                                    textColor: "neutral0",
-                                    textAlign: "center",
-                                    paddingRight: 4,
-                                    fontSize: 2,
-                                    children: formatMessage(isTrialEndedRecently ? {
-                                        id: 'app.components.UpsellBanner.text.ended',
-                                        defaultMessage: 'Keep access to Growth features by upgrading now.'
-                                    } : {
-                                        id: 'app.components.UpsellBanner.text',
-                                        defaultMessage: 'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).'
-                                    })
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
-                                width: "max-content",
-                                variant: "tertiary",
-                                href: "https://billing.strapi.io",
-                                target: "_blank",
-                                children: formatMessage(isTrialEndedRecently ? {
-                                    id: 'app.components.UpsellBanner.button.ended',
-                                    defaultMessage: 'Keep Growth plan'
-                                } : {
-                                    id: 'app.components.UpsellBanner.button',
-                                    defaultMessage: 'Upgrade now'
-                                })
-                            })
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(FixedButtonWrapper, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                    withTooltip: false,
-                    label: formatMessage({
-                        id: 'app.components.UpsellBanner.close',
-                        defaultMessage: 'Close'
-                    }),
-                    onClick: onDismiss,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+    return /*#__PURE__*/ jsxRuntime.jsx(DismissibleBanner.DismissibleBanner, {
+        onDismiss: onDismiss,
+        closeLabel: formatMessage({
+            id: 'app.components.UpsellBanner.close',
+            defaultMessage: 'Close'
+        }),
+        message: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "delta",
+                    fontWeight: "bold",
+                    textColor: "neutral0",
+                    textAlign: "center",
+                    fontSize: 2,
+                    children: formatMessage(isTrialEndedRecently ? {
+                        id: 'app.components.UpsellBanner.intro.ended',
+                        defaultMessage: 'Your trial has ended: '
+                    } : {
+                        id: 'app.components.UpsellBanner.intro',
+                        defaultMessage: 'Access to Growth plan features: '
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "delta",
+                    textColor: "neutral0",
+                    textAlign: "center",
+                    paddingRight: 4,
+                    fontSize: 2,
+                    children: formatMessage(isTrialEndedRecently ? {
+                        id: 'app.components.UpsellBanner.text.ended',
+                        defaultMessage: 'Keep access to Growth features by upgrading now.'
+                    } : {
+                        id: 'app.components.UpsellBanner.text',
+                        defaultMessage: 'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).'
+                    })
                 })
+            ]
+        }),
+        action: /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
+            width: "max-content",
+            variant: "tertiary",
+            href: "https://billing.strapi.io",
+            target: "_blank",
+            children: formatMessage(isTrialEndedRecently ? {
+                id: 'app.components.UpsellBanner.button.ended',
+                defaultMessage: 'Keep Growth plan'
+            } : {
+                id: 'app.components.UpsellBanner.button',
+                defaultMessage: 'Upgrade now'
             })
-        ]
+        })
     });
 };
 const UpsellBanner = ()=>{

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, Flex, IconButton, LinkButton, Typography } from '@strapi/design-system';\nimport { ArrowsOut, Cross } 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 { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useScopedPersistentState } from '../hooks/usePersistentState';\n\nconst BannerBackground = styled(Flex)`\n  background: linear-gradient(\n    90deg,\n    ${({ theme }) => theme.colors.primary600} 0%,\n    ${({ theme }) => theme.colors.alternative600} 121.48%\n  );\n  position: relative;\n`;\n\nconst FixedButtonWrapper = styled(Box)`\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  z-index: 11;\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    <>\n      <BannerBackground width=\"100%\" justifyContent=\"center\">\n        <Flex\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          width=\"100%\"\n          paddingTop={2}\n          paddingBottom={2}\n          paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n          paddingRight={RESPONSIVE_DEFAULT_SPACING}\n          gap={2}\n        >\n          <Box>\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          </Box>\n          <Box>\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          </Box>\n        </Flex>\n      </BannerBackground>\n      <FixedButtonWrapper>\n        <IconButton\n          withTooltip={false}\n          label={formatMessage({\n            id: 'app.components.UpsellBanner.close',\n            defaultMessage: 'Close',\n          })}\n          onClick={onDismiss}\n        >\n          <Cross />\n        </IconButton>\n      </FixedButtonWrapper>\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":["BannerBackground","styled","Flex","theme","colors","primary600","alternative600","FixedButtonWrapper","Box","Banner","isTrialEndedRecently","onDismiss","formatMessage","useIntl","_jsxs","_Fragment","_jsx","width","justifyContent","alignItems","paddingTop","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","gap","Typography","variant","fontWeight","textColor","textAlign","fontSize","id","defaultMessage","LinkButton","href","target","IconButton","withTooltip","label","onClick","Cross","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","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 { 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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"}

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

@@ -1,111 +1,81 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { useLicenseLimits } from '@strapi/admin/strapi-admin/ee';
-import { IconButton, Box, Flex, Typography, LinkButton } from '@strapi/design-system';
-import { ArrowsOut, Cross } from '@strapi/icons';
+import { IconButton, Box, LinkButton, Typography } from '@strapi/design-system';
+import { ArrowsOut } 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';
 
-const BannerBackground = styled(Flex)`
-  background: linear-gradient(
-    90deg,
-    ${({ theme })=>theme.colors.primary600} 0%,
-    ${({ theme })=>theme.colors.alternative600} 121.48%
-  );
-  position: relative;
-`;
-const FixedButtonWrapper = styled(Box)`
+/**
+ * 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: 11;
+  z-index: 1;
   align-items: flex-end;
   top: 9px;
   right: 16px;
 `;
 const Banner = ({ isTrialEndedRecently, onDismiss })=>{
     const { formatMessage } = useIntl();
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(BannerBackground, {
-                width: "100%",
-                justifyContent: "center",
-                children: /*#__PURE__*/ jsxs(Flex, {
-                    justifyContent: "center",
-                    alignItems: "center",
-                    width: "100%",
-                    paddingTop: 2,
-                    paddingBottom: 2,
-                    paddingLeft: RESPONSIVE_DEFAULT_SPACING,
-                    paddingRight: RESPONSIVE_DEFAULT_SPACING,
-                    gap: 2,
-                    children: [
-                        /*#__PURE__*/ jsxs(Box, {
-                            children: [
-                                /*#__PURE__*/ jsx(Typography, {
-                                    variant: "delta",
-                                    fontWeight: "bold",
-                                    textColor: "neutral0",
-                                    textAlign: "center",
-                                    fontSize: 2,
-                                    children: formatMessage(isTrialEndedRecently ? {
-                                        id: 'app.components.UpsellBanner.intro.ended',
-                                        defaultMessage: 'Your trial has ended: '
-                                    } : {
-                                        id: 'app.components.UpsellBanner.intro',
-                                        defaultMessage: 'Access to Growth plan features: '
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Typography, {
-                                    variant: "delta",
-                                    textColor: "neutral0",
-                                    textAlign: "center",
-                                    paddingRight: 4,
-                                    fontSize: 2,
-                                    children: formatMessage(isTrialEndedRecently ? {
-                                        id: 'app.components.UpsellBanner.text.ended',
-                                        defaultMessage: 'Keep access to Growth features by upgrading now.'
-                                    } : {
-                                        id: 'app.components.UpsellBanner.text',
-                                        defaultMessage: 'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).'
-                                    })
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: /*#__PURE__*/ jsx(LinkButton, {
-                                width: "max-content",
-                                variant: "tertiary",
-                                href: "https://billing.strapi.io",
-                                target: "_blank",
-                                children: formatMessage(isTrialEndedRecently ? {
-                                    id: 'app.components.UpsellBanner.button.ended',
-                                    defaultMessage: 'Keep Growth plan'
-                                } : {
-                                    id: 'app.components.UpsellBanner.button',
-                                    defaultMessage: 'Upgrade now'
-                                })
-                            })
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(FixedButtonWrapper, {
-                children: /*#__PURE__*/ jsx(IconButton, {
-                    withTooltip: false,
-                    label: formatMessage({
-                        id: 'app.components.UpsellBanner.close',
-                        defaultMessage: 'Close'
-                    }),
-                    onClick: onDismiss,
-                    children: /*#__PURE__*/ jsx(Cross, {})
+    return /*#__PURE__*/ jsx(DismissibleBanner, {
+        onDismiss: onDismiss,
+        closeLabel: formatMessage({
+            id: 'app.components.UpsellBanner.close',
+            defaultMessage: 'Close'
+        }),
+        message: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Typography, {
+                    variant: "delta",
+                    fontWeight: "bold",
+                    textColor: "neutral0",
+                    textAlign: "center",
+                    fontSize: 2,
+                    children: formatMessage(isTrialEndedRecently ? {
+                        id: 'app.components.UpsellBanner.intro.ended',
+                        defaultMessage: 'Your trial has ended: '
+                    } : {
+                        id: 'app.components.UpsellBanner.intro',
+                        defaultMessage: 'Access to Growth plan features: '
+                    })
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    variant: "delta",
+                    textColor: "neutral0",
+                    textAlign: "center",
+                    paddingRight: 4,
+                    fontSize: 2,
+                    children: formatMessage(isTrialEndedRecently ? {
+                        id: 'app.components.UpsellBanner.text.ended',
+                        defaultMessage: 'Keep access to Growth features by upgrading now.'
+                    } : {
+                        id: 'app.components.UpsellBanner.text',
+                        defaultMessage: 'As part of your trial, you can explore premium tools such as Content History, Releases, and Single Sign-On (SSO).'
+                    })
                 })
+            ]
+        }),
+        action: /*#__PURE__*/ jsx(LinkButton, {
+            width: "max-content",
+            variant: "tertiary",
+            href: "https://billing.strapi.io",
+            target: "_blank",
+            children: formatMessage(isTrialEndedRecently ? {
+                id: 'app.components.UpsellBanner.button.ended',
+                defaultMessage: 'Keep Growth plan'
+            } : {
+                id: 'app.components.UpsellBanner.button',
+                defaultMessage: 'Upgrade now'
             })
-        ]
+        })
     });
 };
 const UpsellBanner = ()=>{