@strapi/admin 5.33.3 → 5.34.0

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

@@ -6,12 +6,28 @@ var icons = require('@strapi/icons');
 var styled = require('styled-components');
 
 const GradientBadge = styled.styled(designSystem.Badge)`
+  width: 100%;
   background: linear-gradient(
     90deg,
     ${({ theme })=>theme.colors.primary600} 0%,
     ${({ theme })=>theme.colors.alternative600} 121.48%
   );
-  padding: 0.4rem 1rem;
+  padding: 1.1rem 1rem;
+
+  ${({ theme })=>theme.breakpoints.small} {
+    padding: 1.2rem 1rem;
+  }
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding: 0.4rem 1rem;
+  }
+`;
+const CustomText = styled.styled(designSystem.Typography)`
+  font-size: 1.2rem;
+
+  ${({ theme })=>theme.breakpoints.small} {
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+  }
 `;
 const GradientBadgeWithIcon = ({ label })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(GradientBadge, {
@@ -24,7 +40,7 @@ const GradientBadgeWithIcon = ({ label })=>{
                     height: 16,
                     fill: "neutral0"
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                /*#__PURE__*/ jsxRuntime.jsx(CustomText, {
                     textColor: "neutral0",
                     children: label
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"GradientBadge.js","sources":["../../../../../admin/src/components/GradientBadge.tsx"],"sourcesContent":["import { Badge, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst GradientBadge = styled(Badge)`\n  background: linear-gradient(\n    90deg,\n    ${({ theme }) => theme.colors.primary600} 0%,\n    ${({ theme }) => theme.colors.alternative600} 121.48%\n  );\n  padding: 0.4rem 1rem;\n`;\n\nconst GradientBadgeWithIcon = ({ label }: { label: string }) => {\n  return (\n    <GradientBadge>\n      <Flex gap={1} alignItems=\"center\">\n        <Lightning width={16} height={16} fill=\"neutral0\" />\n        <Typography textColor=\"neutral0\">{label}</Typography>\n      </Flex>\n    </GradientBadge>\n  );\n};\n\nexport { GradientBadgeWithIcon as GradientBadge };\n"],"names":["GradientBadge","styled","Badge","theme","colors","primary600","alternative600","GradientBadgeWithIcon","label","_jsx","_jsxs","Flex","gap","alignItems","Lightning","width","height","fill","Typography","textColor"],"mappings":";;;;;;;AAIA,MAAMA,aAAAA,GAAgBC,aAAOC,CAAAA,kBAAAA,CAAM;;;IAG/B,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;;;AAGjD,CAAC;AAED,MAAMC,qBAAwB,GAAA,CAAC,EAAEC,KAAK,EAAqB,GAAA;AACzD,IAAA,qBACEC,cAACT,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAU,eAACC,CAAAA,iBAAAA,EAAAA;YAAKC,GAAK,EAAA,CAAA;YAAGC,UAAW,EAAA,QAAA;;8BACvBJ,cAACK,CAAAA,eAAAA,EAAAA;oBAAUC,KAAO,EAAA,EAAA;oBAAIC,MAAQ,EAAA,EAAA;oBAAIC,IAAK,EAAA;;8BACvCR,cAACS,CAAAA,uBAAAA,EAAAA;oBAAWC,SAAU,EAAA,UAAA;AAAYX,oBAAAA,QAAAA,EAAAA;;;;;AAI1C;;;;"}
+{"version":3,"file":"GradientBadge.js","sources":["../../../../../admin/src/components/GradientBadge.tsx"],"sourcesContent":["import { Badge, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst GradientBadge = styled(Badge)`\n  width: 100%;\n  background: linear-gradient(\n    90deg,\n    ${({ theme }) => theme.colors.primary600} 0%,\n    ${({ theme }) => theme.colors.alternative600} 121.48%\n  );\n  padding: 1.1rem 1rem;\n\n  ${({ theme }) => theme.breakpoints.small} {\n    padding: 1.2rem 1rem;\n  }\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding: 0.4rem 1rem;\n  }\n`;\n\nconst CustomText = styled(Typography)`\n  font-size: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.small} {\n    font-size: 1.4rem;\n    line-height: 1.6rem;\n  }\n`;\n\nconst GradientBadgeWithIcon = ({ label }: { label: string }) => {\n  return (\n    <GradientBadge>\n      <Flex gap={1} alignItems=\"center\">\n        <Lightning width={16} height={16} fill=\"neutral0\" />\n        <CustomText textColor=\"neutral0\">{label}</CustomText>\n      </Flex>\n    </GradientBadge>\n  );\n};\n\nexport { GradientBadgeWithIcon as GradientBadge };\n"],"names":["GradientBadge","styled","Badge","theme","colors","primary600","alternative600","breakpoints","small","medium","CustomText","Typography","GradientBadgeWithIcon","label","_jsx","_jsxs","Flex","gap","alignItems","Lightning","width","height","fill","textColor"],"mappings":";;;;;;;AAIA,MAAMA,aAAAA,GAAgBC,aAAOC,CAAAA,kBAAAA,CAAM;;;;IAI/B,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;;;;EAI/C,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMI,CAAAA,WAAW,CAACC,KAAK,CAAC;;;EAGzC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMI,CAAAA,WAAW,CAACE,MAAM,CAAC;;;AAG5C,CAAC;AAED,MAAMC,UAAAA,GAAaT,aAAOU,CAAAA,uBAAAA,CAAW;;;EAGnC,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMI,CAAAA,WAAW,CAACC,KAAK,CAAC;;;;AAI3C,CAAC;AAED,MAAMI,qBAAwB,GAAA,CAAC,EAAEC,KAAK,EAAqB,GAAA;AACzD,IAAA,qBACEC,cAACd,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAe,eAACC,CAAAA,iBAAAA,EAAAA;YAAKC,GAAK,EAAA,CAAA;YAAGC,UAAW,EAAA,QAAA;;8BACvBJ,cAACK,CAAAA,eAAAA,EAAAA;oBAAUC,KAAO,EAAA,EAAA;oBAAIC,MAAQ,EAAA,EAAA;oBAAIC,IAAK,EAAA;;8BACvCR,cAACJ,CAAAA,UAAAA,EAAAA;oBAAWa,SAAU,EAAA,UAAA;AAAYV,oBAAAA,QAAAA,EAAAA;;;;;AAI1C;;;;"}

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

@@ -1,15 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Badge, Flex, Typography } from '@strapi/design-system';
+import { Badge, Typography, Flex } from '@strapi/design-system';
 import { Lightning } from '@strapi/icons';
 import { styled } from 'styled-components';
 
 const GradientBadge = styled(Badge)`
+  width: 100%;
   background: linear-gradient(
     90deg,
     ${({ theme })=>theme.colors.primary600} 0%,
     ${({ theme })=>theme.colors.alternative600} 121.48%
   );
-  padding: 0.4rem 1rem;
+  padding: 1.1rem 1rem;
+
+  ${({ theme })=>theme.breakpoints.small} {
+    padding: 1.2rem 1rem;
+  }
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding: 0.4rem 1rem;
+  }
+`;
+const CustomText = styled(Typography)`
+  font-size: 1.2rem;
+
+  ${({ theme })=>theme.breakpoints.small} {
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+  }
 `;
 const GradientBadgeWithIcon = ({ label })=>{
     return /*#__PURE__*/ jsx(GradientBadge, {
@@ -22,7 +38,7 @@ const GradientBadgeWithIcon = ({ label })=>{
                     height: 16,
                     fill: "neutral0"
                 }),
-                /*#__PURE__*/ jsx(Typography, {
+                /*#__PURE__*/ jsx(CustomText, {
                     textColor: "neutral0",
                     children: label
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"GradientBadge.mjs","sources":["../../../../../admin/src/components/GradientBadge.tsx"],"sourcesContent":["import { Badge, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst GradientBadge = styled(Badge)`\n  background: linear-gradient(\n    90deg,\n    ${({ theme }) => theme.colors.primary600} 0%,\n    ${({ theme }) => theme.colors.alternative600} 121.48%\n  );\n  padding: 0.4rem 1rem;\n`;\n\nconst GradientBadgeWithIcon = ({ label }: { label: string }) => {\n  return (\n    <GradientBadge>\n      <Flex gap={1} alignItems=\"center\">\n        <Lightning width={16} height={16} fill=\"neutral0\" />\n        <Typography textColor=\"neutral0\">{label}</Typography>\n      </Flex>\n    </GradientBadge>\n  );\n};\n\nexport { GradientBadgeWithIcon as GradientBadge };\n"],"names":["GradientBadge","styled","Badge","theme","colors","primary600","alternative600","GradientBadgeWithIcon","label","_jsx","_jsxs","Flex","gap","alignItems","Lightning","width","height","fill","Typography","textColor"],"mappings":";;;;;AAIA,MAAMA,aAAAA,GAAgBC,MAAOC,CAAAA,KAAAA,CAAM;;;IAG/B,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;;;AAGjD,CAAC;AAED,MAAMC,qBAAwB,GAAA,CAAC,EAAEC,KAAK,EAAqB,GAAA;AACzD,IAAA,qBACEC,GAACT,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAU,IAACC,CAAAA,IAAAA,EAAAA;YAAKC,GAAK,EAAA,CAAA;YAAGC,UAAW,EAAA,QAAA;;8BACvBJ,GAACK,CAAAA,SAAAA,EAAAA;oBAAUC,KAAO,EAAA,EAAA;oBAAIC,MAAQ,EAAA,EAAA;oBAAIC,IAAK,EAAA;;8BACvCR,GAACS,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,UAAA;AAAYX,oBAAAA,QAAAA,EAAAA;;;;;AAI1C;;;;"}
+{"version":3,"file":"GradientBadge.mjs","sources":["../../../../../admin/src/components/GradientBadge.tsx"],"sourcesContent":["import { Badge, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst GradientBadge = styled(Badge)`\n  width: 100%;\n  background: linear-gradient(\n    90deg,\n    ${({ theme }) => theme.colors.primary600} 0%,\n    ${({ theme }) => theme.colors.alternative600} 121.48%\n  );\n  padding: 1.1rem 1rem;\n\n  ${({ theme }) => theme.breakpoints.small} {\n    padding: 1.2rem 1rem;\n  }\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding: 0.4rem 1rem;\n  }\n`;\n\nconst CustomText = styled(Typography)`\n  font-size: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.small} {\n    font-size: 1.4rem;\n    line-height: 1.6rem;\n  }\n`;\n\nconst GradientBadgeWithIcon = ({ label }: { label: string }) => {\n  return (\n    <GradientBadge>\n      <Flex gap={1} alignItems=\"center\">\n        <Lightning width={16} height={16} fill=\"neutral0\" />\n        <CustomText textColor=\"neutral0\">{label}</CustomText>\n      </Flex>\n    </GradientBadge>\n  );\n};\n\nexport { GradientBadgeWithIcon as GradientBadge };\n"],"names":["GradientBadge","styled","Badge","theme","colors","primary600","alternative600","breakpoints","small","medium","CustomText","Typography","GradientBadgeWithIcon","label","_jsx","_jsxs","Flex","gap","alignItems","Lightning","width","height","fill","textColor"],"mappings":";;;;;AAIA,MAAMA,aAAAA,GAAgBC,MAAOC,CAAAA,KAAAA,CAAM;;;;IAI/B,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;;;;EAI/C,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMI,CAAAA,WAAW,CAACC,KAAK,CAAC;;;EAGzC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMI,CAAAA,WAAW,CAACE,MAAM,CAAC;;;AAG5C,CAAC;AAED,MAAMC,UAAAA,GAAaT,MAAOU,CAAAA,UAAAA,CAAW;;;EAGnC,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMI,CAAAA,WAAW,CAACC,KAAK,CAAC;;;;AAI3C,CAAC;AAED,MAAMI,qBAAwB,GAAA,CAAC,EAAEC,KAAK,EAAqB,GAAA;AACzD,IAAA,qBACEC,GAACd,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAe,IAACC,CAAAA,IAAAA,EAAAA;YAAKC,GAAK,EAAA,CAAA;YAAGC,UAAW,EAAA,QAAA;;8BACvBJ,GAACK,CAAAA,SAAAA,EAAAA;oBAAUC,KAAO,EAAA,EAAA;oBAAIC,MAAQ,EAAA,EAAA;oBAAIC,IAAK,EAAA;;8BACvCR,GAACJ,CAAAA,UAAAA,EAAAA;oBAAWa,SAAU,EAAA,UAAA;AAAYV,oBAAAA,QAAAA,EAAAA;;;;;AAI1C;;;;"}

package/dist/admin/admin/src/components/Layouts/ActionLayout.js

@@ -12,7 +12,14 @@ const ActionLayout = ({ startActions, endActions })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         justifyContent: "space-between",
         alignItems: "flex-start",
-        paddingBottom: 4,
+        paddingBottom: {
+            initial: 2,
+            medium: 4
+        },
+        paddingTop: {
+            initial: 4,
+            medium: 0
+        },
         paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
         paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
         children: [

package/dist/admin/admin/src/components/Layouts/ActionLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAaC,EAAAA,gCAAAA;QACbC,YAAcD,EAAAA,gCAAAA;;0BAEdE,cAACP,CAAAA,iBAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBZ,gBAAAA,QAAAA,EAAAA;;0BAGHU,cAACP,CAAAA,iBAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BX,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={{ initial: 4, medium: 0 }}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","initial","medium","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACvCC,UAAY,EAAA;YAAEF,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACpCE,WAAaC,EAAAA,gCAAAA;QACbC,YAAcD,EAAAA,gCAAAA;;0BAEdE,cAACV,CAAAA,iBAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBf,gBAAAA,QAAAA,EAAAA;;0BAGHa,cAACV,CAAAA,iBAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3Bd,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}

package/dist/admin/admin/src/components/Layouts/ActionLayout.mjs

@@ -10,7 +10,14 @@ const ActionLayout = ({ startActions, endActions })=>{
     return /*#__PURE__*/ jsxs(Flex, {
         justifyContent: "space-between",
         alignItems: "flex-start",
-        paddingBottom: 4,
+        paddingBottom: {
+            initial: 2,
+            medium: 4
+        },
+        paddingTop: {
+            initial: 4,
+            medium: 0
+        },
         paddingLeft: RESPONSIVE_DEFAULT_SPACING,
         paddingRight: RESPONSIVE_DEFAULT_SPACING,
         children: [

package/dist/admin/admin/src/components/Layouts/ActionLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAaC,EAAAA,0BAAAA;QACbC,YAAcD,EAAAA,0BAAAA;;0BAEdE,GAACP,CAAAA,IAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBZ,gBAAAA,QAAAA,EAAAA;;0BAGHU,GAACP,CAAAA,IAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BX,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={{ initial: 4, medium: 0 }}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","initial","medium","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACvCC,UAAY,EAAA;YAAEF,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACpCE,WAAaC,EAAAA,0BAAAA;QACbC,YAAcD,EAAAA,0BAAAA;;0BAEdE,GAACV,CAAAA,IAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBf,gBAAAA,QAAAA,EAAAA;;0BAGHa,GAACV,CAAAA,IAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3Bd,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}

package/dist/admin/admin/src/components/Layouts/ContentLayout.js

@@ -9,6 +9,10 @@ const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
         paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
         paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingTop: {
+            initial: 4,
+            medium: 0
+        },
         children: children
     });
 };

package/dist/admin/admin/src/components/Layouts/ContentLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,WAAaC,EAAAA,gCAAAA;QAA4BC,YAAcD,EAAAA,gCAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      paddingTop={{ initial: 4, medium: 0 }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","paddingTop","initial","medium"],"mappings":";;;;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QACCC,WAAaC,EAAAA,gCAAAA;QACbC,YAAcD,EAAAA,gCAAAA;QACdE,UAAY,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;AAEnCR,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/Layouts/ContentLayout.mjs

@@ -7,6 +7,10 @@ const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsx(Box, {
         paddingLeft: RESPONSIVE_DEFAULT_SPACING,
         paddingRight: RESPONSIVE_DEFAULT_SPACING,
+        paddingTop: {
+            initial: 4,
+            medium: 0
+        },
         children: children
     });
 };

package/dist/admin/admin/src/components/Layouts/ContentLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,WAAaC,EAAAA,0BAAAA;QAA4BC,YAAcD,EAAAA,0BAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      paddingTop={{ initial: 4, medium: 0 }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","paddingTop","initial","medium"],"mappings":";;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QACCC,WAAaC,EAAAA,0BAAAA;QACbC,YAAcD,EAAAA,0BAAAA;QACdE,UAAY,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;AAEnCR,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js

@@ -6,6 +6,7 @@ var designSystem = require('@strapi/design-system');
 var theme = require('../../constants/theme.js');
 var useDeviceType = require('../../hooks/useDeviceType.js');
 var useElementOnScreen = require('../../hooks/useElementOnScreen.js');
+var useMediaQuery = require('../../hooks/useMediaQuery.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -27,6 +28,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref)=>{
+    const isMobile = useMediaQuery.useIsMobile();
     const isSubtitleString = typeof subtitle === 'string';
     if (sticky) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
@@ -86,7 +88,7 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
             })
         });
     }
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
         ref: ref,
         paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
         paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
@@ -100,54 +102,83 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
         },
         background: "neutral100",
         "data-strapi-header": true,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                direction: "column",
-                alignItems: "initial",
-                gap: 2,
-                children: [
-                    navigationAction,
-                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        justifyContent: "space-between",
-                        wrap: "wrap",
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                minWidth: 0,
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                        tag: "h1",
-                                        variant: "alpha",
-                                        ...props,
-                                        style: {
-                                            wordBreak: 'break-word',
-                                            overflowWrap: 'break-word',
-                                            maxWidth: '100%'
-                                        },
-                                        children: title
-                                    }),
-                                    secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                        paddingLeft: 4,
-                                        children: secondaryAction
-                                    }) : null
-                                ]
-                            }),
-                            primaryAction
-                        ]
-                    })
-                ]
-            }),
-            isSubtitleString ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                variant: "epsilon",
-                textColor: "neutral600",
-                tag: "p",
-                paddingTop: {
-                    initial: 4,
-                    large: 0
-                },
-                children: subtitle
-            }) : subtitle
-        ]
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            direction: "column",
+            alignItems: "initial",
+            gap: 3,
+            children: [
+                navigationAction,
+                !isMobile ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            justifyContent: "space-between",
+                            wrap: "wrap",
+                            gap: 4,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    minWidth: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            tag: "h1",
+                                            variant: "alpha",
+                                            ...props,
+                                            style: {
+                                                wordBreak: 'break-word',
+                                                overflowWrap: 'break-word',
+                                                maxWidth: '100%'
+                                            },
+                                            children: title
+                                        }),
+                                        secondaryAction && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                            paddingLeft: 4,
+                                            children: secondaryAction
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    paddingLeft: 4,
+                                    marginLeft: "auto",
+                                    children: primaryAction
+                                })
+                            ]
+                        }),
+                        isSubtitleString ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "epsilon",
+                            textColor: "neutral600",
+                            tag: "p",
+                            children: subtitle
+                        }) : subtitle
+                    ]
+                }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            tag: "h1",
+                            variant: "alpha",
+                            ...props,
+                            style: {
+                                wordBreak: 'break-word',
+                                overflowWrap: 'break-word',
+                                maxWidth: '100%'
+                            },
+                            children: title
+                        }),
+                        isSubtitleString ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "epsilon",
+                            textColor: "neutral600",
+                            tag: "p",
+                            children: subtitle
+                        }) : subtitle,
+                        (primaryAction || secondaryAction) && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 3,
+                            children: [
+                                secondaryAction,
+                                primaryAction
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
     });
 });
 const HeaderLayout = (props)=>{

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography\n                tag=\"h1\"\n                variant=\"alpha\"\n                {...props}\n                style={{\n                  wordBreak: 'break-word',\n                  overflowWrap: 'break-word',\n                  maxWidth: '100%',\n                }}\n              >\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef, baseHeaderLayoutRef], () => {\n    const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n\n    if (headerContainer) {\n      const newSize = headerContainer.getBoundingClientRect();\n\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (baseHeaderLayoutRef.current || containerRef.current) {\n      const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n      setHeaderSize(headerContainer?.getBoundingClientRect() ?? null);\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","minWidth","style","wordBreak","overflowWrap","maxWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","headerContainer","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useDeviceType } from '../../hooks/useDeviceType';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\nimport { useIsMobile } from '../../hooks/useMediaQuery';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isMobile = useIsMobile();\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display=\"flex\"\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={3}>\n          {navigationAction}\n          {!isMobile ? (\n            <>\n              <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n                <Flex minWidth={0}>\n                  <Typography\n                    tag=\"h1\"\n                    variant=\"alpha\"\n                    {...props}\n                    style={{\n                      wordBreak: 'break-word',\n                      overflowWrap: 'break-word',\n                      maxWidth: '100%',\n                    }}\n                  >\n                    {title}\n                  </Typography>\n                  {secondaryAction && <Box paddingLeft={4}>{secondaryAction}</Box>}\n                </Flex>\n                <Box paddingLeft={4} marginLeft=\"auto\">\n                  {primaryAction}\n                </Box>\n              </Flex>\n              {isSubtitleString ? (\n                <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n                  {subtitle}\n                </Typography>\n              ) : (\n                subtitle\n              )}\n            </>\n          ) : (\n            <>\n              <Typography\n                tag=\"h1\"\n                variant=\"alpha\"\n                {...props}\n                style={{\n                  wordBreak: 'break-word',\n                  overflowWrap: 'break-word',\n                  maxWidth: '100%',\n                }}\n              >\n                {title}\n              </Typography>\n              {isSubtitleString ? (\n                <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n                  {subtitle}\n                </Typography>\n              ) : (\n                subtitle\n              )}\n              {(primaryAction || secondaryAction) && (\n                <Flex gap={3}>\n                  {secondaryAction}\n                  {primaryAction}\n                </Flex>\n              )}\n            </>\n          )}\n        </Flex>\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const deviceType = useDeviceType();\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef, baseHeaderLayoutRef], () => {\n    const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n\n    if (headerContainer) {\n      const newSize = headerContainer.getBoundingClientRect();\n\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (baseHeaderLayoutRef.current || containerRef.current) {\n      const headerContainer = baseHeaderLayoutRef.current ?? containerRef.current;\n      setHeaderSize(headerContainer?.getBoundingClientRect() ?? null);\n    }\n  }, [containerRef]);\n\n  if (deviceType === 'mobile') {\n    return <BaseHeaderLayout {...props} />;\n  }\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isMobile","useIsMobile","isSubtitleString","_jsx","Box","display","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","initial","large","data-strapi-header","direction","gap","_Fragment","minWidth","style","wordBreak","overflowWrap","maxWidth","marginLeft","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","deviceType","useDeviceType","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","headerContainer","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs

@@ -1,11 +1,13 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box, Flex, Typography, useCallbackRef } from '@strapi/design-system';
 import { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 import { useDeviceType } from '../../hooks/useDeviceType.mjs';
 import { useElementOnScreen } from '../../hooks/useElementOnScreen.mjs';
+import { useIsMobile } from '../../hooks/useMediaQuery.mjs';
 
 const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref)=>{
+    const isMobile = useIsMobile();
     const isSubtitleString = typeof subtitle === 'string';
     if (sticky) {
         return /*#__PURE__*/ jsx(Box, {
@@ -65,7 +67,7 @@ const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, pri
             })
         });
     }
-    return /*#__PURE__*/ jsxs(Box, {
+    return /*#__PURE__*/ jsx(Box, {
         ref: ref,
         paddingLeft: RESPONSIVE_DEFAULT_SPACING,
         paddingRight: RESPONSIVE_DEFAULT_SPACING,
@@ -79,54 +81,83 @@ const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, pri
         },
         background: "neutral100",
         "data-strapi-header": true,
-        children: [
-            /*#__PURE__*/ jsxs(Flex, {
-                direction: "column",
-                alignItems: "initial",
-                gap: 2,
-                children: [
-                    navigationAction,
-                    /*#__PURE__*/ jsxs(Flex, {
-                        justifyContent: "space-between",
-                        wrap: "wrap",
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsxs(Flex, {
-                                minWidth: 0,
-                                children: [
-                                    /*#__PURE__*/ jsx(Typography, {
-                                        tag: "h1",
-                                        variant: "alpha",
-                                        ...props,
-                                        style: {
-                                            wordBreak: 'break-word',
-                                            overflowWrap: 'break-word',
-                                            maxWidth: '100%'
-                                        },
-                                        children: title
-                                    }),
-                                    secondaryAction ? /*#__PURE__*/ jsx(Box, {
-                                        paddingLeft: 4,
-                                        children: secondaryAction
-                                    }) : null
-                                ]
-                            }),
-                            primaryAction
-                        ]
-                    })
-                ]
-            }),
-            isSubtitleString ? /*#__PURE__*/ jsx(Typography, {
-                variant: "epsilon",
-                textColor: "neutral600",
-                tag: "p",
-                paddingTop: {
-                    initial: 4,
-                    large: 0
-                },
-                children: subtitle
-            }) : subtitle
-        ]
+        children: /*#__PURE__*/ jsxs(Flex, {
+            direction: "column",
+            alignItems: "initial",
+            gap: 3,
+            children: [
+                navigationAction,
+                !isMobile ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxs(Flex, {
+                            justifyContent: "space-between",
+                            wrap: "wrap",
+                            gap: 4,
+                            children: [
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    minWidth: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            tag: "h1",
+                                            variant: "alpha",
+                                            ...props,
+                                            style: {
+                                                wordBreak: 'break-word',
+                                                overflowWrap: 'break-word',
+                                                maxWidth: '100%'
+                                            },
+                                            children: title
+                                        }),
+                                        secondaryAction && /*#__PURE__*/ jsx(Box, {
+                                            paddingLeft: 4,
+                                            children: secondaryAction
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    paddingLeft: 4,
+                                    marginLeft: "auto",
+                                    children: primaryAction
+                                })
+                            ]
+                        }),
+                        isSubtitleString ? /*#__PURE__*/ jsx(Typography, {
+                            variant: "epsilon",
+                            textColor: "neutral600",
+                            tag: "p",
+                            children: subtitle
+                        }) : subtitle
+                    ]
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            tag: "h1",
+                            variant: "alpha",
+                            ...props,
+                            style: {
+                                wordBreak: 'break-word',
+                                overflowWrap: 'break-word',
+                                maxWidth: '100%'
+                            },
+                            children: title
+                        }),
+                        isSubtitleString ? /*#__PURE__*/ jsx(Typography, {
+                            variant: "epsilon",
+                            textColor: "neutral600",
+                            tag: "p",
+                            children: subtitle
+                        }) : subtitle,
+                        (primaryAction || secondaryAction) && /*#__PURE__*/ jsxs(Flex, {
+                            gap: 3,
+                            children: [
+                                secondaryAction,
+                                primaryAction
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
     });
 });
 const HeaderLayout = (props)=>{