@strapi/admin 5.25.0 → 5.27.0

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

@@ -1,22 +1,39 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId, useState } from 'react';
-import { SubNav as SubNav$1, Box, Flex, Typography, IconButton } from '@strapi/design-system';
+import { SubNav as SubNav$1, Flex, Box, Typography, Badge, IconButton, ScrollArea } from '@strapi/design-system';
 import { Plus, ChevronDown } from '@strapi/icons';
 import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { HEIGHT_TOP_NAVIGATION } from '../constants/theme.mjs';
 import { tours } from './GuidedTour/Tours.mjs';
 
-const Main = styled(SubNav$1)`
+const MainSubNav = styled(SubNav$1)`
+  width: 100%;
+  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);
+  overflow: hidden;
   background-color: ${({ theme })=>theme.colors.neutral0};
-  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
-
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  display: flex;
+  flex-direction: column;
+  border-right: 0;
+  box-shadow: none;
+  position: fixed;
+  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);
+  left: 0;
+  z-index: 2;
 
-  &::-webkit-scrollbar {
-    display: none;
+  ${({ theme })=>theme.breakpoints.medium} {
+    position: sticky;
+    top: 0;
+    border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+  }
+  ${({ theme })=>theme.breakpoints.large} {
+    height: 100dvh;
   }
 `;
+const Main = ({ children, ...props })=>/*#__PURE__*/ jsx(MainSubNav, {
+        ...props,
+        children: children
+    });
 const StyledLink = styled(NavLink)`
   display: flex;
   align-items: center;
@@ -57,9 +74,10 @@ const StyledLink = styled(NavLink)`
   }
 `;
 const Link = (props)=>{
-    const { label, endAction, ...rest } = props;
+    const { label, endAction, handleClick, ...rest } = props;
     return /*#__PURE__*/ jsx(StyledLink, {
         ...rest,
+        onClick: handleClick,
         children: /*#__PURE__*/ jsx(Box, {
             width: '100%',
             paddingLeft: 3,
@@ -90,14 +108,21 @@ const Link = (props)=>{
         })
     });
 };
-const StyledHeader = styled(Box)`
-  height: 56px;
-  display: flex;
-  align-items: center;
-  padding-left: ${({ theme })=>theme.spaces[5]};
+const StyledHeader = styled(Flex)`
+  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};
+  height: ${HEIGHT_TOP_NAVIGATION};
 `;
 const Header = ({ label })=>{
     return /*#__PURE__*/ jsx(StyledHeader, {
+        justifyContent: "space-between",
+        paddingLeft: {
+            initial: 4,
+            large: 5
+        },
+        paddingRight: {
+            initial: 4,
+            large: 5
+        },
         children: /*#__PURE__*/ jsx(Typography, {
             variant: "beta",
             tag: "h2",
@@ -107,6 +132,7 @@ const Header = ({ label })=>{
 };
 const Sections = ({ children, ...props })=>{
     return /*#__PURE__*/ jsx(Box, {
+        paddingTop: 4,
         paddingBottom: 4,
         children: /*#__PURE__*/ jsx(Flex, {
             tag: "ol",
@@ -146,7 +172,7 @@ const Sections = ({ children, ...props })=>{
             return children;
     }
 };
-const Section = ({ label, children, link, sectionId })=>{
+const Section = ({ label, children, link, sectionId, badgeLabel })=>{
     const listId = useId();
     return /*#__PURE__*/ jsxs(Flex, {
         direction: "column",
@@ -154,14 +180,22 @@ const Section = ({ label, children, link, sectionId })=>{
         gap: 2,
         children: [
             /*#__PURE__*/ jsx(Box, {
-                paddingLeft: 5,
-                paddingRight: 5,
+                paddingLeft: {
+                    initial: 4,
+                    large: 5
+                },
+                paddingRight: {
+                    initial: 4,
+                    large: 5
+                },
                 children: /*#__PURE__*/ jsxs(Flex, {
                     position: "relative",
                     justifyContent: "space-between",
+                    gap: 2,
                     children: [
                         /*#__PURE__*/ jsx(Flex, {
                             children: /*#__PURE__*/ jsx(Box, {
+                                paddingRight: 1,
                                 children: /*#__PURE__*/ jsx(Typography, {
                                     variant: "sigma",
                                     textColor: "neutral600",
@@ -169,16 +203,26 @@ const Section = ({ label, children, link, sectionId })=>{
                                 })
                             })
                         }),
-                        link && /*#__PURE__*/ jsx(GuidedTourTooltip, {
-                            sectionId: sectionId,
-                            children: /*#__PURE__*/ jsx(IconButton, {
-                                label: link.label,
-                                variant: "ghost",
-                                withTooltip: true,
-                                onClick: link.onClik,
-                                size: "XS",
-                                children: /*#__PURE__*/ jsx(Plus, {})
-                            })
+                        /*#__PURE__*/ jsxs(Flex, {
+                            gap: 1,
+                            children: [
+                                badgeLabel && /*#__PURE__*/ jsx(Badge, {
+                                    backgroundColor: "neutral150",
+                                    textColor: "neutral600",
+                                    children: badgeLabel
+                                }),
+                                link && /*#__PURE__*/ jsx(GuidedTourTooltip, {
+                                    sectionId: sectionId,
+                                    children: /*#__PURE__*/ jsx(IconButton, {
+                                        label: link.label,
+                                        variant: "ghost",
+                                        withTooltip: true,
+                                        onClick: link.onClick,
+                                        size: "XS",
+                                        children: /*#__PURE__*/ jsx(Plus, {})
+                                    })
+                                })
+                            ]
                         })
                     ]
                 })
@@ -189,8 +233,14 @@ const Section = ({ label, children, link, sectionId })=>{
                 direction: "column",
                 gap: "2px",
                 alignItems: 'stretch',
-                marginLeft: 2,
-                marginRight: 2,
+                marginLeft: {
+                    initial: 1,
+                    large: 2
+                },
+                marginRight: {
+                    initial: 1,
+                    large: 2
+                },
                 children: children.map((child, index)=>{
                     return /*#__PURE__*/ jsx("li", {
                         children: child
@@ -208,11 +258,7 @@ const SubSectionHeader = styled.button`
   background: transparent;
   display: flex;
   align-items: center;
-
-  height: 32px;
-
   border-radius: ${({ theme })=>theme.borderRadius};
-
   padding-left: ${({ theme })=>theme.spaces[3]};
   padding-right: ${({ theme })=>theme.spaces[3]};
   padding-top: ${({ theme })=>theme.spaces[2]};
@@ -282,13 +328,32 @@ const SubSection = ({ label, children })=>{
         ]
     });
 };
+const PageWrapper = styled(Box)`
+  ${MainSubNav} {
+    background-color: transparent;
+    border-right: none;
+  }
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    ${MainSubNav} {
+      top: 0;
+    }
+  }
+`;
+const Content = ({ children })=>{
+    return /*#__PURE__*/ jsx(ScrollArea, {
+        children: children
+    });
+};
 const SubNav = {
     Main,
+    Content,
     Header,
     Link,
     Sections,
     Section,
-    SubSection
+    SubSection,
+    PageWrapper
 };
 
 export { SubNav };

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

@@ -1 +1 @@
-{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport { Box, SubNav as DSSubNav, Flex, Typography, IconButton } from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst Main = styled(DSSubNav)`\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n  }\n) => {\n  const { label, endAction, ...rest } = props;\n  return (\n    <StyledLink {...rest}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Box)`\n  height: 56px;\n  display: flex;\n  align-items: center;\n  padding-left: ${({ theme }) => theme.spaces[5]};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader>\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClik: () => void };\n  sectionId?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box paddingLeft={5} paddingRight={5}>\n        <Flex position=\"relative\" justifyContent=\"space-between\">\n          <Flex>\n            <Box>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          {link && (\n            <GuidedTourTooltip sectionId={sectionId}>\n              <IconButton\n                label={link.label}\n                variant=\"ghost\"\n                withTooltip\n                onClick={link.onClik}\n                size=\"XS\"\n              >\n                <Plus />\n              </IconButton>\n            </GuidedTourTooltip>\n          )}\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={2}\n        marginRight={2}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nexport const SubNav = {\n  Main,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n};\n"],"names":["Main","styled","DSSubNav","theme","colors","neutral0","neutral150","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","props","label","endAction","rest","_jsx","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","spaces","Header","variant","Sections","children","paddingBottom","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","listId","useId","position","textColor","IconButton","withTooltip","onClick","onClik","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","handleClick","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","SubNav"],"mappings":"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"}
+{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport {\n  Box,\n  SubNav as DSSubNav,\n  Flex,\n  Typography,\n  IconButton,\n  Badge,\n  ScrollArea,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: calc(100dvh - ${HEIGHT_TOP_NAVIGATION} - 1px);\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  z-index: 2;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n  ${({ theme }) => theme.breakpoints.large} {\n    height: 100dvh;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\n);\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader\n      justifyContent=\"space-between\"\n      paddingLeft={{\n        initial: 4,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 4,\n        large: 5,\n      }}\n    >\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingTop={4} paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 4,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 4,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box paddingRight={1}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 1,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 1,\n          large: 2,\n        }}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nconst PageWrapper = styled(Box)`\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","HEIGHT_TOP_NAVIGATION","theme","colors","neutral0","breakpoints","medium","neutral150","large","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","Header","initial","variant","Sections","paddingTop","paddingBottom","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":"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"}

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

@@ -8,6 +8,7 @@ var dateFns = require('date-fns');
 var reactIntl = require('react-intl');
 var styled = require('styled-components');
 var admin = require('../services/admin.js');
+var theme = require('../constants/theme.js');
 var usePersistentState = require('../hooks/usePersistentState.js');
 
 const BannerBackground = styled.styled(designSystem.Flex)`
@@ -28,8 +29,8 @@ const Banner = ({ isTrialEndedRecently })=>{
             width: "100%",
             paddingTop: 2,
             paddingBottom: 2,
-            paddingLeft: 10,
-            paddingRight: 10,
+            paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
             gap: 2,
             children: [
                 /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {

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, LinkButton, Typography } from '@strapi/design-system';\nimport { isAfter, 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\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`;\n\nconst Banner = ({ isTrialEndedRecently }: { isTrialEndedRecently: boolean }) => {\n  const { formatMessage } = useIntl();\n\n  return (\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={10}\n        paddingRight={10}\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://strapi.chargebeeportal.com\"\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  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\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  if (timeLeftData.data?.trialEndsAt || isTrialEndedRecently) {\n    return <Banner isTrialEndedRecently={isTrialEndedRecently} />;\n  }\n\n  return null;\n};\n\nexport { UpsellBanner };\n"],"names":["BannerBackground","styled","Flex","theme","colors","primary600","alternative600","Banner","isTrialEndedRecently","formatMessage","useIntl","_jsx","width","justifyContent","_jsxs","alignItems","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","Box","Typography","variant","fontWeight","textColor","textAlign","fontSize","id","defaultMessage","LinkButton","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter"],"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, Flex, LinkButton, Typography } from '@strapi/design-system';\nimport { isAfter, 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`;\n\nconst Banner = ({ isTrialEndedRecently }: { isTrialEndedRecently: boolean }) => {\n  const { formatMessage } = useIntl();\n\n  return (\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://strapi.chargebeeportal.com\"\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  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\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  if (timeLeftData.data?.trialEndsAt || isTrialEndedRecently) {\n    return <Banner isTrialEndedRecently={isTrialEndedRecently} />;\n  }\n\n  return null;\n};\n\nexport { UpsellBanner };\n"],"names":["BannerBackground","styled","Flex","theme","colors","primary600","alternative600","Banner","isTrialEndedRecently","formatMessage","useIntl","_jsx","width","justifyContent","_jsxs","alignItems","paddingTop","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","gap","Box","Typography","variant","fontWeight","textColor","textAlign","fontSize","id","defaultMessage","LinkButton","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ import { subDays, isAfter } 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';
 
 const BannerBackground = styled(Flex)`
@@ -26,8 +27,8 @@ const Banner = ({ isTrialEndedRecently })=>{
             width: "100%",
             paddingTop: 2,
             paddingBottom: 2,
-            paddingLeft: 10,
-            paddingRight: 10,
+            paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: RESPONSIVE_DEFAULT_SPACING,
             gap: 2,
             children: [
                 /*#__PURE__*/ jsxs(Box, {

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, Flex, LinkButton, Typography } from '@strapi/design-system';\nimport { isAfter, 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\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`;\n\nconst Banner = ({ isTrialEndedRecently }: { isTrialEndedRecently: boolean }) => {\n  const { formatMessage } = useIntl();\n\n  return (\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={10}\n        paddingRight={10}\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://strapi.chargebeeportal.com\"\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  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\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  if (timeLeftData.data?.trialEndsAt || isTrialEndedRecently) {\n    return <Banner isTrialEndedRecently={isTrialEndedRecently} />;\n  }\n\n  return null;\n};\n\nexport { UpsellBanner };\n"],"names":["BannerBackground","styled","Flex","theme","colors","primary600","alternative600","Banner","isTrialEndedRecently","formatMessage","useIntl","_jsx","width","justifyContent","_jsxs","alignItems","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","Box","Typography","variant","fontWeight","textColor","textAlign","fontSize","id","defaultMessage","LinkButton","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter"],"mappings":";;;;;;;;;;AAWA,MAAMA,gBAAAA,GAAmBC,MAAOC,CAAAA,IAAAA,CAAK;;;IAGjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;IACzC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,cAAc,CAAC;;AAEjD,CAAC;AAED,MAAMC,MAAS,GAAA,CAAC,EAAEC,oBAAoB,EAAqC,GAAA;IACzE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,GAACX,CAAAA,gBAAAA,EAAAA;QAAiBY,KAAM,EAAA,MAAA;QAAOC,cAAe,EAAA,QAAA;AAC5C,QAAA,QAAA,gBAAAC,IAACZ,CAAAA,IAAAA,EAAAA;YACCW,cAAe,EAAA,QAAA;YACfE,UAAW,EAAA,QAAA;YACXH,KAAM,EAAA,MAAA;YACNI,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,WAAa,EAAA,EAAA;YACbC,YAAc,EAAA,EAAA;YACdC,GAAK,EAAA,CAAA;;8BAELN,IAACO,CAAAA,GAAAA,EAAAA;;sCACCV,GAACW,CAAAA,UAAAA,EAAAA;4BACCC,OAAQ,EAAA,OAAA;4BACRC,UAAW,EAAA,MAAA;4BACXC,SAAU,EAAA,UAAA;4BACVC,SAAU,EAAA,QAAA;4BACVC,QAAU,EAAA,CAAA;AAETlB,4BAAAA,QAAAA,EAAAA,aAAAA,CACCD,oBACI,GAAA;gCACEoB,EAAI,EAAA,yCAAA;gCACJC,cAAgB,EAAA;6BAElB,GAAA;gCACED,EAAI,EAAA,mCAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;sCAGRlB,GAACW,CAAAA,UAAAA,EAAAA;4BACCC,OAAQ,EAAA,OAAA;4BACRE,SAAU,EAAA,UAAA;4BACVC,SAAU,EAAA,QAAA;4BACVP,YAAc,EAAA,CAAA;4BACdQ,QAAU,EAAA,CAAA;AAETlB,4BAAAA,QAAAA,EAAAA,aAAAA,CACCD,oBACI,GAAA;gCACEoB,EAAI,EAAA,wCAAA;gCACJC,cAAgB,EAAA;6BAElB,GAAA;gCACED,EAAI,EAAA,kCAAA;gCACJC,cACE,EAAA;AACJ,6BAAA;;;;8BAIVlB,GAACU,CAAAA,GAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAV,GAACmB,CAAAA,UAAAA,EAAAA;wBACClB,KAAM,EAAA,aAAA;wBACNW,OAAQ,EAAA,UAAA;wBACRQ,IAAK,EAAA,oCAAA;wBACLC,MAAO,EAAA,QAAA;AAENvB,wBAAAA,QAAAA,EAAAA,aAAAA,CACCD,oBACI,GAAA;4BACEoB,EAAI,EAAA,0CAAA;4BACJC,cAAgB,EAAA;yBAElB,GAAA;4BACED,EAAI,EAAA,oCAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;;;;AAOlB,CAAA;AAEA,MAAMI,YAAe,GAAA,IAAA;IACnB,MAAM,EAAEC,OAAO,EAAE,GAAGC,gBAAAA,EAAAA;AAEpB,IAAA,MAAM,CAACC,iBAAAA,EAAmBC,oBAAqB,CAAA,GAAGC,yBAChD,2BACAC,EAAAA,SAAAA,CAAAA;IAGF,MAAMC,YAAAA,GAAeC,OAAQ,CAAA,IAAIC,IAAQ,EAAA,EAAA,CAAA,CAAA;IAEzC,MAAMC,YAAAA,GAAeC,gCAAgCL,SAAW,EAAA;AAC9DM,QAAAA,IAAAA,EAAM,CAACX,OAASY,EAAAA;AAClB,KAAA,CAAA;IAEAC,SAAU,CAAA,IAAA;QACR,IAAIJ,YAAAA,CAAaK,IAAI,EAAEC,WAAa,EAAA;YAClCZ,oBAAqBM,CAAAA,YAAAA,CAAaK,IAAI,CAACC,WAAW,CAAA;AACpD;;KAEC,EAAA;AAACN,QAAAA,YAAAA,CAAaK,IAAI,EAAEC;AAAY,KAAA,CAAA;;;AAInC,IAAA,MAAMzC,oBAAuB0C,GAAAA,OAAAA,CAC3B,CAAChB,OAAAA,EAASY,WACR,CAACK,MAAAA,CAAOC,MAAM,CAACC,IAAI,IACnBjB,iBAAAA,IACAkB,OAAQ,CAAA,IAAIZ,KAAKN,iBAAoBI,CAAAA,EAAAA,YAAAA,CAAAA,CAAAA;AAGzC,IAAA,IAAIG,YAAaK,CAAAA,IAAI,EAAEC,WAAAA,IAAezC,oBAAsB,EAAA;AAC1D,QAAA,qBAAOG,GAACJ,CAAAA,MAAAA,EAAAA;YAAOC,oBAAsBA,EAAAA;;AACvC;IAEA,OAAO,IAAA;AACT;;;;"}
+{"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, Flex, LinkButton, Typography } from '@strapi/design-system';\nimport { isAfter, 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`;\n\nconst Banner = ({ isTrialEndedRecently }: { isTrialEndedRecently: boolean }) => {\n  const { formatMessage } = useIntl();\n\n  return (\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://strapi.chargebeeportal.com\"\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  );\n};\n\nconst UpsellBanner = () => {\n  const { license } = useLicenseLimits();\n\n  const [cachedTrialEndsAt, setCachedTrialEndsAt] = useScopedPersistentState<string | undefined>(\n    'STRAPI_FREE_TRIAL_ENDS_AT',\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  if (timeLeftData.data?.trialEndsAt || isTrialEndedRecently) {\n    return <Banner isTrialEndedRecently={isTrialEndedRecently} />;\n  }\n\n  return null;\n};\n\nexport { UpsellBanner };\n"],"names":["BannerBackground","styled","Flex","theme","colors","primary600","alternative600","Banner","isTrialEndedRecently","formatMessage","useIntl","_jsx","width","justifyContent","_jsxs","alignItems","paddingTop","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","gap","Box","Typography","variant","fontWeight","textColor","textAlign","fontSize","id","defaultMessage","LinkButton","href","target","UpsellBanner","license","useLicenseLimits","cachedTrialEndsAt","setCachedTrialEndsAt","useScopedPersistentState","undefined","sevenDaysAgo","subDays","Date","timeLeftData","useGetLicenseTrialTimeLeftQuery","skip","isTrial","useEffect","data","trialEndsAt","Boolean","window","strapi","isEE","isAfter"],"mappings":"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"}

package/dist/admin/admin/src/constants/theme.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const RESPONSIVE_DEFAULT_SPACING = {
+    initial: 4,
+    medium: 6,
+    large: 10
+};
+const HEIGHT_TOP_NAVIGATION = '5.6rem';
+
+exports.HEIGHT_TOP_NAVIGATION = HEIGHT_TOP_NAVIGATION;
+exports.RESPONSIVE_DEFAULT_SPACING = RESPONSIVE_DEFAULT_SPACING;
+//# sourceMappingURL=theme.js.map

package/dist/admin/admin/src/constants/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../../admin/src/constants/theme.ts"],"sourcesContent":["const RESPONSIVE_DEFAULT_SPACING = {\n  initial: 4,\n  medium: 6,\n  large: 10,\n};\n\nconst HEIGHT_TOP_NAVIGATION = '5.6rem';\n\nexport { RESPONSIVE_DEFAULT_SPACING, HEIGHT_TOP_NAVIGATION };\n"],"names":["RESPONSIVE_DEFAULT_SPACING","initial","medium","large","HEIGHT_TOP_NAVIGATION"],"mappings":";;AAAA,MAAMA,0BAA6B,GAAA;IACjCC,OAAS,EAAA,CAAA;IACTC,MAAQ,EAAA,CAAA;IACRC,KAAO,EAAA;AACT;AAEA,MAAMC,qBAAwB,GAAA;;;;;"}

package/dist/admin/admin/src/constants/theme.mjs

@@ -0,0 +1,9 @@
+const RESPONSIVE_DEFAULT_SPACING = {
+    initial: 4,
+    medium: 6,
+    large: 10
+};
+const HEIGHT_TOP_NAVIGATION = '5.6rem';
+
+export { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING };
+//# sourceMappingURL=theme.mjs.map

package/dist/admin/admin/src/constants/theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.mjs","sources":["../../../../../admin/src/constants/theme.ts"],"sourcesContent":["const RESPONSIVE_DEFAULT_SPACING = {\n  initial: 4,\n  medium: 6,\n  large: 10,\n};\n\nconst HEIGHT_TOP_NAVIGATION = '5.6rem';\n\nexport { RESPONSIVE_DEFAULT_SPACING, HEIGHT_TOP_NAVIGATION };\n"],"names":["RESPONSIVE_DEFAULT_SPACING","initial","medium","large","HEIGHT_TOP_NAVIGATION"],"mappings":"AAAA,MAAMA,0BAA6B,GAAA;IACjCC,OAAS,EAAA,CAAA;IACTC,MAAQ,EAAA,CAAA;IACRC,KAAO,EAAA;AACT;AAEA,MAAMC,qBAAwB,GAAA;;;;"}

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

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
+var theme = require('../constants/theme.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -61,18 +62,24 @@ const NotificationsContext = /*#__PURE__*/ React__namespace.createContext({
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                 left: "50%",
-                marginLeft: "-250px",
+                transform: "translateX(-50%)",
                 position: "fixed",
                 direction: "column",
                 alignItems: "stretch",
-                gap: 2,
-                top: `4.6rem`,
-                width: `50rem`,
+                gap: 4,
+                marginTop: 4,
+                top: theme.HEIGHT_TOP_NAVIGATION,
+                width: "100%",
+                maxWidth: `50rem`,
                 zIndex: "notification",
                 children: notifications.map((notification)=>{
-                    return /*#__PURE__*/ jsxRuntime.jsx(Notification, {
-                        ...notification,
-                        clearNotification: clearNotification
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Notification, {
+                            ...notification,
+                            clearNotification: clearNotification
+                        })
                     }, notification.id);
                 })
             }),

package/dist/admin/admin/src/features/Notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.js","sources":["../../../../../admin/src/features/Notifications.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Alert, AlertVariant, Flex, useCallbackRef, Link } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\ninterface NotificationLink {\n  label: string;\n  target?: string;\n  url: string;\n}\n\ninterface NotificationConfig {\n  blockTransition?: boolean;\n  link?: NotificationLink;\n  message?: string;\n  onClose?: () => void;\n  timeout?: number;\n  title?: string;\n  type?: 'info' | 'warning' | 'danger' | 'success';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsContextValue {\n  /**\n   * Toggles a notification, wrapped in `useCallback` for a stable identity.\n   */\n  toggleNotification: (config: NotificationConfig) => void;\n}\n\nconst NotificationsContext = React.createContext<NotificationsContextValue>({\n  toggleNotification: () => {},\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsProviderProps {\n  children: React.ReactNode;\n}\ninterface Notification extends NotificationConfig {\n  id: number;\n}\n\n/**\n * @internal\n * @description DO NOT USE. This will be removed before stable release of v5.\n */\nconst NotificationsProvider = ({ children }: NotificationsProviderProps) => {\n  const notificationIdRef = React.useRef(0);\n\n  const [notifications, setNotifications] = React.useState<Notification[]>([]);\n\n  const toggleNotification = React.useCallback(\n    ({ type, message, link, timeout, blockTransition, onClose, title }: NotificationConfig) => {\n      setNotifications((s) => [\n        ...s,\n        {\n          id: notificationIdRef.current++,\n          type,\n          message,\n          link,\n          timeout,\n          blockTransition,\n          onClose,\n          title,\n        },\n      ]);\n    },\n    []\n  );\n\n  const clearNotification = React.useCallback((id: number) => {\n    setNotifications((s) => s.filter((n) => n.id !== id));\n  }, []);\n\n  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      <Flex\n        left=\"50%\"\n        marginLeft=\"-250px\"\n        position=\"fixed\"\n        direction=\"column\"\n        alignItems=\"stretch\"\n        gap={2}\n        top={`4.6rem`}\n        width={`50rem`}\n        zIndex=\"notification\"\n      >\n        {notifications.map((notification) => {\n          return (\n            <Notification\n              key={notification.id}\n              {...notification}\n              clearNotification={clearNotification}\n            />\n          );\n        })}\n      </Flex>\n      {children}\n    </NotificationsContext.Provider>\n  );\n};\n\ninterface NotificationProps extends Notification {\n  clearNotification: (id: number) => void;\n}\n\nconst Notification = ({\n  clearNotification,\n  blockTransition = false,\n  id,\n  link,\n  message,\n  onClose,\n  timeout = 2500,\n  title,\n  type,\n}: NotificationProps) => {\n  const { formatMessage } = useIntl();\n  /**\n   * Chances are `onClose` won't be classed as stabilised,\n   * so we use `useCallbackRef` to avoid make it stable.\n   */\n  const onCloseCallback = useCallbackRef(onClose);\n\n  const handleClose = React.useCallback(() => {\n    onCloseCallback();\n\n    clearNotification(id);\n  }, [clearNotification, id, onCloseCallback]);\n\n  // eslint-disable-next-line consistent-return\n  React.useEffect(() => {\n    if (!blockTransition) {\n      const timeoutReference = setTimeout(() => {\n        handleClose();\n      }, timeout);\n\n      return () => {\n        clearTimeout(timeoutReference);\n      };\n    }\n  }, [blockTransition, handleClose, timeout]);\n\n  const getVariant = (): AlertVariant => {\n    switch (type) {\n      case 'info':\n        return 'default';\n      case 'danger':\n        return 'danger';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'success';\n    }\n  };\n\n  return (\n    <Alert\n      action={\n        link ? (\n          <Link href={link.url} isExternal>\n            {link.label}\n          </Link>\n        ) : undefined\n      }\n      onClose={handleClose}\n      closeLabel={formatMessage({\n        id: 'global.close',\n        defaultMessage: 'Close',\n      })}\n      title={title}\n      variant={getVariant()}\n    >\n      {message}\n    </Alert>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @preserve\n * @description Returns an object to interact with the notification\n * system. The callbacks are wrapped in `useCallback` for a stable\n * identity.\n *\n * @example\n * ```tsx\n * import { useNotification } from '@strapi/strapi/admin';\n *\n * const MyComponent = () => {\n *  const { toggleNotification } = useNotification();\n *\n *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;\n */\nconst useNotification = () => React.useContext(NotificationsContext);\n\nexport { NotificationsProvider, useNotification };\nexport type { NotificationConfig, NotificationsContextValue };\n"],"names":["NotificationsContext","React","createContext","toggleNotification","NotificationsProvider","children","notificationIdRef","useRef","notifications","setNotifications","useState","useCallback","type","message","link","timeout","blockTransition","onClose","title","s","id","current","clearNotification","filter","n","value","useMemo","_jsxs","Provider","_jsx","Flex","left","marginLeft","position","direction","alignItems","gap","top","width","zIndex","map","notification","Notification","formatMessage","useIntl","onCloseCallback","useCallbackRef","handleClose","useEffect","timeoutReference","setTimeout","clearTimeout","getVariant","Alert","action","Link","href","url","isExternal","label","undefined","closeLabel","defaultMessage","variant","useNotification","useContext"],"mappings":"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"}
+{"version":3,"file":"Notifications.js","sources":["../../../../../admin/src/features/Notifications.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Alert, AlertVariant, Flex, useCallbackRef, Link, Box } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../constants/theme';\n\ninterface NotificationLink {\n  label: string;\n  target?: string;\n  url: string;\n}\n\ninterface NotificationConfig {\n  blockTransition?: boolean;\n  link?: NotificationLink;\n  message?: string;\n  onClose?: () => void;\n  timeout?: number;\n  title?: string;\n  type?: 'info' | 'warning' | 'danger' | 'success';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsContextValue {\n  /**\n   * Toggles a notification, wrapped in `useCallback` for a stable identity.\n   */\n  toggleNotification: (config: NotificationConfig) => void;\n}\n\nconst NotificationsContext = React.createContext<NotificationsContextValue>({\n  toggleNotification: () => {},\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface NotificationsProviderProps {\n  children: React.ReactNode;\n}\ninterface Notification extends NotificationConfig {\n  id: number;\n}\n\n/**\n * @internal\n * @description DO NOT USE. This will be removed before stable release of v5.\n */\nconst NotificationsProvider = ({ children }: NotificationsProviderProps) => {\n  const notificationIdRef = React.useRef(0);\n\n  const [notifications, setNotifications] = React.useState<Notification[]>([]);\n\n  const toggleNotification = React.useCallback(\n    ({ type, message, link, timeout, blockTransition, onClose, title }: NotificationConfig) => {\n      setNotifications((s) => [\n        ...s,\n        {\n          id: notificationIdRef.current++,\n          type,\n          message,\n          link,\n          timeout,\n          blockTransition,\n          onClose,\n          title,\n        },\n      ]);\n    },\n    []\n  );\n\n  const clearNotification = React.useCallback((id: number) => {\n    setNotifications((s) => s.filter((n) => n.id !== id));\n  }, []);\n\n  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      <Flex\n        left=\"50%\"\n        transform=\"translateX(-50%)\"\n        position=\"fixed\"\n        direction=\"column\"\n        alignItems=\"stretch\"\n        gap={4}\n        marginTop={4}\n        top={HEIGHT_TOP_NAVIGATION}\n        width=\"100%\"\n        maxWidth={`50rem`}\n        zIndex=\"notification\"\n      >\n        {notifications.map((notification) => {\n          return (\n            <Box key={notification.id} paddingLeft={4} paddingRight={4}>\n              <Notification {...notification} clearNotification={clearNotification} />\n            </Box>\n          );\n        })}\n      </Flex>\n      {children}\n    </NotificationsContext.Provider>\n  );\n};\n\ninterface NotificationProps extends Notification {\n  clearNotification: (id: number) => void;\n}\n\nconst Notification = ({\n  clearNotification,\n  blockTransition = false,\n  id,\n  link,\n  message,\n  onClose,\n  timeout = 2500,\n  title,\n  type,\n}: NotificationProps) => {\n  const { formatMessage } = useIntl();\n  /**\n   * Chances are `onClose` won't be classed as stabilised,\n   * so we use `useCallbackRef` to avoid make it stable.\n   */\n  const onCloseCallback = useCallbackRef(onClose);\n\n  const handleClose = React.useCallback(() => {\n    onCloseCallback();\n\n    clearNotification(id);\n  }, [clearNotification, id, onCloseCallback]);\n\n  // eslint-disable-next-line consistent-return\n  React.useEffect(() => {\n    if (!blockTransition) {\n      const timeoutReference = setTimeout(() => {\n        handleClose();\n      }, timeout);\n\n      return () => {\n        clearTimeout(timeoutReference);\n      };\n    }\n  }, [blockTransition, handleClose, timeout]);\n\n  const getVariant = (): AlertVariant => {\n    switch (type) {\n      case 'info':\n        return 'default';\n      case 'danger':\n        return 'danger';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'success';\n    }\n  };\n\n  return (\n    <Alert\n      action={\n        link ? (\n          <Link href={link.url} isExternal>\n            {link.label}\n          </Link>\n        ) : undefined\n      }\n      onClose={handleClose}\n      closeLabel={formatMessage({\n        id: 'global.close',\n        defaultMessage: 'Close',\n      })}\n      title={title}\n      variant={getVariant()}\n    >\n      {message}\n    </Alert>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @preserve\n * @description Returns an object to interact with the notification\n * system. The callbacks are wrapped in `useCallback` for a stable\n * identity.\n *\n * @example\n * ```tsx\n * import { useNotification } from '@strapi/strapi/admin';\n *\n * const MyComponent = () => {\n *  const { toggleNotification } = useNotification();\n *\n *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;\n */\nconst useNotification = () => React.useContext(NotificationsContext);\n\nexport { NotificationsProvider, useNotification };\nexport type { NotificationConfig, NotificationsContextValue };\n"],"names":["NotificationsContext","React","createContext","toggleNotification","NotificationsProvider","children","notificationIdRef","useRef","notifications","setNotifications","useState","useCallback","type","message","link","timeout","blockTransition","onClose","title","s","id","current","clearNotification","filter","n","value","useMemo","_jsxs","Provider","_jsx","Flex","left","transform","position","direction","alignItems","gap","marginTop","top","HEIGHT_TOP_NAVIGATION","width","maxWidth","zIndex","map","notification","Box","paddingLeft","paddingRight","Notification","formatMessage","useIntl","onCloseCallback","useCallbackRef","handleClose","useEffect","timeoutReference","setTimeout","clearTimeout","getVariant","Alert","action","Link","href","url","isExternal","label","undefined","closeLabel","defaultMessage","variant","useNotification","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,oBAAAA,iBAAuBC,gBAAMC,CAAAA,aAAa,CAA4B;AAC1EC,IAAAA,kBAAAA,EAAoB,IAAO;AAC7B,CAAA,CAAA;AAaA;;;AAGC,IACKC,MAAAA,qBAAAA,GAAwB,CAAC,EAAEC,QAAQ,EAA8B,GAAA;IACrE,MAAMC,iBAAAA,GAAoBL,gBAAMM,CAAAA,MAAM,CAAC,CAAA,CAAA;AAEvC,IAAA,MAAM,CAACC,aAAeC,EAAAA,gBAAAA,CAAiB,GAAGR,gBAAMS,CAAAA,QAAQ,CAAiB,EAAE,CAAA;AAE3E,IAAA,MAAMP,qBAAqBF,gBAAMU,CAAAA,WAAW,CAC1C,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,eAAe,EAAEC,OAAO,EAAEC,KAAK,EAAsB,GAAA;AACpFT,QAAAA,gBAAAA,CAAiB,CAACU,CAAM,GAAA;AACnBA,gBAAAA,GAAAA,CAAAA;AACH,gBAAA;AACEC,oBAAAA,EAAAA,EAAId,kBAAkBe,OAAO,EAAA;AAC7BT,oBAAAA,IAAAA;AACAC,oBAAAA,OAAAA;AACAC,oBAAAA,IAAAA;AACAC,oBAAAA,OAAAA;AACAC,oBAAAA,eAAAA;AACAC,oBAAAA,OAAAA;AACAC,oBAAAA;AACF;AACD,aAAA,CAAA;AACH,KAAA,EACA,EAAE,CAAA;AAGJ,IAAA,MAAMI,iBAAoBrB,GAAAA,gBAAAA,CAAMU,WAAW,CAAC,CAACS,EAAAA,GAAAA;QAC3CX,gBAAiB,CAAA,CAACU,IAAMA,CAAEI,CAAAA,MAAM,CAAC,CAACC,CAAAA,GAAMA,CAAEJ,CAAAA,EAAE,KAAKA,EAAAA,CAAAA,CAAAA;AACnD,KAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAMK,KAAQxB,GAAAA,gBAAAA,CAAMyB,OAAO,CAAC,KAAO;AAAEvB,YAAAA;AAAmB,SAAA,CAAI,EAAA;AAACA,QAAAA;AAAmB,KAAA,CAAA;IAEhF,qBACEwB,eAAA,CAAC3B,qBAAqB4B,QAAQ,EAAA;QAACH,KAAOA,EAAAA,KAAAA;;0BACpCI,cAACC,CAAAA,iBAAAA,EAAAA;gBACCC,IAAK,EAAA,KAAA;gBACLC,SAAU,EAAA,kBAAA;gBACVC,QAAS,EAAA,OAAA;gBACTC,SAAU,EAAA,QAAA;gBACVC,UAAW,EAAA,SAAA;gBACXC,GAAK,EAAA,CAAA;gBACLC,SAAW,EAAA,CAAA;gBACXC,GAAKC,EAAAA,2BAAAA;gBACLC,KAAM,EAAA,MAAA;gBACNC,QAAU,EAAA,CAAC,KAAK,CAAC;gBACjBC,MAAO,EAAA,cAAA;0BAENlC,aAAcmC,CAAAA,GAAG,CAAC,CAACC,YAAAA,GAAAA;AAClB,oBAAA,qBACEf,cAACgB,CAAAA,gBAAAA,EAAAA;wBAA0BC,WAAa,EAAA,CAAA;wBAAGC,YAAc,EAAA,CAAA;AACvD,wBAAA,QAAA,gBAAAlB,cAACmB,CAAAA,YAAAA,EAAAA;AAAc,4BAAA,GAAGJ,YAAY;4BAAEtB,iBAAmBA,EAAAA;;AAD3CsB,qBAAAA,EAAAA,YAAAA,CAAaxB,EAAE,CAAA;AAI7B,iBAAA;;AAEDf,YAAAA;;;AAGP;AAMA,MAAM2C,YAAAA,GAAe,CAAC,EACpB1B,iBAAiB,EACjBN,eAAkB,GAAA,KAAK,EACvBI,EAAE,EACFN,IAAI,EACJD,OAAO,EACPI,OAAO,EACPF,OAAAA,GAAU,IAAI,EACdG,KAAK,EACLN,IAAI,EACc,GAAA;IAClB,MAAM,EAAEqC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B;;;MAIA,MAAMC,kBAAkBC,2BAAenC,CAAAA,OAAAA,CAAAA;IAEvC,MAAMoC,WAAAA,GAAcpD,gBAAMU,CAAAA,WAAW,CAAC,IAAA;AACpCwC,QAAAA,eAAAA,EAAAA;QAEA7B,iBAAkBF,CAAAA,EAAAA,CAAAA;KACjB,EAAA;AAACE,QAAAA,iBAAAA;AAAmBF,QAAAA,EAAAA;AAAI+B,QAAAA;AAAgB,KAAA,CAAA;;AAG3ClD,IAAAA,gBAAAA,CAAMqD,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACtC,eAAiB,EAAA;AACpB,YAAA,MAAMuC,mBAAmBC,UAAW,CAAA,IAAA;AAClCH,gBAAAA,WAAAA,EAAAA;aACCtC,EAAAA,OAAAA,CAAAA;YAEH,OAAO,IAAA;gBACL0C,YAAaF,CAAAA,gBAAAA,CAAAA;AACf,aAAA;AACF;KACC,EAAA;AAACvC,QAAAA,eAAAA;AAAiBqC,QAAAA,WAAAA;AAAatC,QAAAA;AAAQ,KAAA,CAAA;AAE1C,IAAA,MAAM2C,UAAa,GAAA,IAAA;QACjB,OAAQ9C,IAAAA;YACN,KAAK,MAAA;gBACH,OAAO,SAAA;YACT,KAAK,QAAA;gBACH,OAAO,QAAA;YACT,KAAK,SAAA;gBACH,OAAO,SAAA;AACT,YAAA;gBACE,OAAO,SAAA;AACX;AACF,KAAA;AAEA,IAAA,qBACEiB,cAAC8B,CAAAA,kBAAAA,EAAAA;AACCC,QAAAA,MAAAA,EACE9C,qBACEe,cAACgC,CAAAA,iBAAAA,EAAAA;AAAKC,YAAAA,IAAAA,EAAMhD,KAAKiD,GAAG;YAAEC,UAAU,EAAA,IAAA;AAC7BlD,YAAAA,QAAAA,EAAAA,IAAAA,CAAKmD;AAENC,SAAAA,CAAAA,GAAAA,SAAAA;QAENjD,OAASoC,EAAAA,WAAAA;AACTc,QAAAA,UAAAA,EAAYlB,aAAc,CAAA;YACxB7B,EAAI,EAAA,cAAA;YACJgD,cAAgB,EAAA;AAClB,SAAA,CAAA;QACAlD,KAAOA,EAAAA,KAAAA;QACPmD,OAASX,EAAAA,UAAAA,EAAAA;AAER7C,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAEA;;;;;;;;;;;;;;;;AAkBC,IACKyD,MAAAA,eAAAA,GAAkB,IAAMrE,gBAAAA,CAAMsE,UAAU,CAACvE,oBAAAA;;;;;"}

package/dist/admin/admin/src/features/Notifications.mjs

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, useCallbackRef, Alert, Link } from '@strapi/design-system';
+import { Flex, Box, useCallbackRef, Alert, Link } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+import { HEIGHT_TOP_NAVIGATION } from '../constants/theme.mjs';
 
 const NotificationsContext = /*#__PURE__*/ React.createContext({
     toggleNotification: ()=>{}
@@ -40,18 +41,24 @@ const NotificationsContext = /*#__PURE__*/ React.createContext({
         children: [
             /*#__PURE__*/ jsx(Flex, {
                 left: "50%",
-                marginLeft: "-250px",
+                transform: "translateX(-50%)",
                 position: "fixed",
                 direction: "column",
                 alignItems: "stretch",
-                gap: 2,
-                top: `4.6rem`,
-                width: `50rem`,
+                gap: 4,
+                marginTop: 4,
+                top: HEIGHT_TOP_NAVIGATION,
+                width: "100%",
+                maxWidth: `50rem`,
                 zIndex: "notification",
                 children: notifications.map((notification)=>{
-                    return /*#__PURE__*/ jsx(Notification, {
-                        ...notification,
-                        clearNotification: clearNotification
+                    return /*#__PURE__*/ jsx(Box, {
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                        children: /*#__PURE__*/ jsx(Notification, {
+                            ...notification,
+                            clearNotification: clearNotification
+                        })
                     }, notification.id);
                 })
             }),