@strapi/content-manager 5.35.0 → 5.36.1

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: category })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex direction=\"column\" gap={1} alignItems=\"center\" justifyContent=\"center\">\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Typography variant=\"pi\" fontWeight=\"bold\">\n                  {displayName}\n                </Typography>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 4px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 4px;\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","ComponentIcon","color","Typography","fontWeight","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}
+{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: category })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex direction=\"column\" gap={1} alignItems=\"center\" justifyContent=\"center\">\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Typography variant=\"pi\" fontWeight=\"bold\">\n                  {displayName}\n                </Typography>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","ComponentIcon","color","Typography","fontWeight","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var translations = require('../../../../../utils/translations.js');
@@ -9,27 +9,47 @@ var ComponentCategory = require('./ComponentCategory.js');
 
 const ComponentPicker = ({ dynamicComponentsByCategory = {}, isOpen, onClickAddComponent })=>{
     const { formatMessage } = reactIntl.useIntl();
+    const isMobile = strapiAdmin.useIsMobile();
     const handleAddComponentToDz = (componentUid)=>()=>{
             onClickAddComponent(componentUid);
         };
     if (!isOpen) {
         return null;
     }
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
-        paddingTop: 6,
-        paddingBottom: 6,
-        paddingLeft: 5,
-        paddingRight: 5,
-        background: "neutral0",
-        shadow: "tableShadow",
-        borderColor: "neutral150",
-        hasRadius: true,
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        paddingTop: {
+            initial: 0,
+            medium: 6
+        },
+        paddingBottom: {
+            initial: 0,
+            medium: 6
+        },
+        paddingLeft: {
+            initial: 0,
+            medium: 5
+        },
+        paddingRight: {
+            initial: 0,
+            medium: 5
+        },
+        background: isMobile ? 'transparent' : 'neutral0',
+        shadow: isMobile ? 'none' : 'tableShadow',
+        borderColor: isMobile ? 'transparent' : 'neutral150',
+        hasRadius: !isMobile,
+        gap: {
+            initial: 4,
+            medium: 2
+        },
+        direction: "column",
+        alignItems: "stretch",
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                 justifyContent: "center",
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                     fontWeight: "bold",
                     textColor: "neutral600",
+                    fontSize: 1,
                     children: formatMessage({
                         id: translations.getTranslation('components.DynamicZone.ComponentPicker-label'),
                         defaultMessage: 'Pick one component'
@@ -37,7 +57,6 @@ const ComponentPicker = ({ dynamicComponentsByCategory = {}, isOpen, onClickAddC
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                paddingTop: 2,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Root, {
                     defaultValue: Object.keys(dynamicComponentsByCategory)[0],
                     children: Object.entries(dynamicComponentsByCategory).map(([category, components], index)=>/*#__PURE__*/ jsxRuntime.jsx(ComponentCategory.ComponentCategory, {

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentPicker.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = {},\n  isOpen,\n  onClickAddComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Box\n      paddingTop={6}\n      paddingBottom={6}\n      paddingLeft={5}\n      paddingRight={5}\n      background=\"neutral0\"\n      shadow=\"tableShadow\"\n      borderColor=\"neutral150\"\n      hasRadius\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\">\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box paddingTop={2}>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Box>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","formatMessage","useIntl","handleAddComponentToDz","componentUid","_jsxs","Box","paddingTop","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","_jsx","Flex","justifyContent","Typography","fontWeight","textColor","id","getTranslation","defaultMessage","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","variant"],"mappings":";;;;;;;;;AAeMA,MAAAA,eAAAA,GAAkB,CAAC,EACvBC,2BAA8B,GAAA,EAAE,EAChCC,MAAM,EACNC,mBAAmB,EACE,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,MAAMC,sBAAAA,GAAyB,CAACC,YAAyB,GAAA,IAAA;YACvDJ,mBAAoBI,CAAAA,YAAAA,CAAAA;AACtB,SAAA;AAEA,IAAA,IAAI,CAACL,MAAQ,EAAA;QACX,OAAO,IAAA;AACT;AAEA,IAAA,qBACEM,eAACC,CAAAA,gBAAAA,EAAAA;QACCC,UAAY,EAAA,CAAA;QACZC,aAAe,EAAA,CAAA;QACfC,WAAa,EAAA,CAAA;QACbC,YAAc,EAAA,CAAA;QACdC,UAAW,EAAA,UAAA;QACXC,MAAO,EAAA,aAAA;QACPC,WAAY,EAAA,YAAA;QACZC,SAAS,EAAA,IAAA;;0BAETC,cAACC,CAAAA,iBAAAA,EAAAA;gBAAKC,cAAe,EAAA,QAAA;AACnB,gBAAA,QAAA,gBAAAF,cAACG,CAAAA,uBAAAA,EAAAA;oBAAWC,UAAW,EAAA,MAAA;oBAAOC,SAAU,EAAA,YAAA;8BACrCnB,aAAc,CAAA;AACboB,wBAAAA,EAAAA,EAAIC,2BAAe,CAAA,8CAAA,CAAA;wBACnBC,cAAgB,EAAA;AAClB,qBAAA;;;0BAGJR,cAACT,CAAAA,gBAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;wCACfQ,cAAA,CAACS,uBAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAOC,CAAAA,IAAI,CAAC9B,2BAAAA,CAA4B,CAAC,CAAE,CAAA;8BACtE6B,MAAOE,CAAAA,OAAO,CAAC/B,2BAAAA,CAAAA,CAA6BgC,GAAG,CAAC,CAAC,CAACC,QAAUC,EAAAA,UAAAA,CAAW,EAAEC,KAAAA,iBACxElB,cAACmB,CAAAA,mCAAAA,EAAAA;4BAECH,QAAUA,EAAAA,QAAAA;4BACVC,UAAYA,EAAAA,UAAAA;4BACZG,cAAgBhC,EAAAA,sBAAAA;4BAChBiC,OAASH,EAAAA,KAAAA,GAAQ,CAAM,KAAA,CAAA,GAAI,SAAY,GAAA;AAJlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAWnB;;;;"}
+{"version":3,"file":"ComponentPicker.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = {},\n  isOpen,\n  onClickAddComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n  const isMobile = useIsMobile();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Flex\n      paddingTop={{ initial: 0, medium: 6 }}\n      paddingBottom={{ initial: 0, medium: 6 }}\n      paddingLeft={{ initial: 0, medium: 5 }}\n      paddingRight={{ initial: 0, medium: 5 }}\n      background={isMobile ? 'transparent' : 'neutral0'}\n      shadow={isMobile ? 'none' : 'tableShadow'}\n      borderColor={isMobile ? 'transparent' : 'neutral150'}\n      hasRadius={!isMobile}\n      gap={{ initial: 4, medium: 2 }}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\" fontSize={1}>\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","formatMessage","useIntl","isMobile","useIsMobile","handleAddComponentToDz","componentUid","_jsxs","Flex","paddingTop","initial","medium","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","gap","direction","alignItems","_jsx","justifyContent","Typography","fontWeight","textColor","fontSize","id","getTranslation","defaultMessage","Box","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","variant"],"mappings":";;;;;;;;;AAcMA,MAAAA,eAAAA,GAAkB,CAAC,EACvBC,2BAA8B,GAAA,EAAE,EAChCC,MAAM,EACNC,mBAAmB,EACE,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAWC,GAAAA,uBAAAA,EAAAA;IAEjB,MAAMC,sBAAAA,GAAyB,CAACC,YAAyB,GAAA,IAAA;YACvDN,mBAAoBM,CAAAA,YAAAA,CAAAA;AACtB,SAAA;AAEA,IAAA,IAAI,CAACP,MAAQ,EAAA;QACX,OAAO,IAAA;AACT;AAEA,IAAA,qBACEQ,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,UAAY,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACpCC,aAAe,EAAA;YAAEF,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACvCE,WAAa,EAAA;YAAEH,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACrCG,YAAc,EAAA;YAAEJ,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;AACtCI,QAAAA,UAAAA,EAAYZ,WAAW,aAAgB,GAAA,UAAA;AACvCa,QAAAA,MAAAA,EAAQb,WAAW,MAAS,GAAA,aAAA;AAC5Bc,QAAAA,WAAAA,EAAad,WAAW,aAAgB,GAAA,YAAA;AACxCe,QAAAA,SAAAA,EAAW,CAACf,QAAAA;QACZgB,GAAK,EAAA;YAAET,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QAC7BS,SAAU,EAAA,QAAA;QACVC,UAAW,EAAA,SAAA;;0BAEXC,cAACd,CAAAA,iBAAAA,EAAAA;gBAAKe,cAAe,EAAA,QAAA;AACnB,gBAAA,QAAA,gBAAAD,cAACE,CAAAA,uBAAAA,EAAAA;oBAAWC,UAAW,EAAA,MAAA;oBAAOC,SAAU,EAAA,YAAA;oBAAaC,QAAU,EAAA,CAAA;8BAC5D1B,aAAc,CAAA;AACb2B,wBAAAA,EAAAA,EAAIC,2BAAe,CAAA,8CAAA,CAAA;wBACnBC,cAAgB,EAAA;AAClB,qBAAA;;;0BAGJR,cAACS,CAAAA,gBAAAA,EAAAA;wCACCT,cAAA,CAACU,uBAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAOC,CAAAA,IAAI,CAACtC,2BAAAA,CAA4B,CAAC,CAAE,CAAA;8BACtEqC,MAAOE,CAAAA,OAAO,CAACvC,2BAAAA,CAAAA,CAA6BwC,GAAG,CAAC,CAAC,CAACC,QAAUC,EAAAA,UAAAA,CAAW,EAAEC,KAAAA,iBACxEnB,cAACoB,CAAAA,mCAAAA,EAAAA;4BAECH,QAAUA,EAAAA,QAAAA;4BACVC,UAAYA,EAAAA,UAAAA;4BACZG,cAAgBtC,EAAAA,sBAAAA;4BAChBuC,OAASH,EAAAA,KAAAA,GAAQ,CAAM,KAAA,CAAA,GAAI,SAAY,GAAA;AAJlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAWnB;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.mjs

@@ -1,33 +1,53 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { Box, Flex, Typography, Accordion } from '@strapi/design-system';
+import { useIsMobile } from '@strapi/admin/strapi-admin';
+import { Flex, Typography, Box, Accordion } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { getTranslation } from '../../../../../utils/translations.mjs';
 import { ComponentCategory } from './ComponentCategory.mjs';
 
 const ComponentPicker = ({ dynamicComponentsByCategory = {}, isOpen, onClickAddComponent })=>{
     const { formatMessage } = useIntl();
+    const isMobile = useIsMobile();
     const handleAddComponentToDz = (componentUid)=>()=>{
             onClickAddComponent(componentUid);
         };
     if (!isOpen) {
         return null;
     }
-    return /*#__PURE__*/ jsxs(Box, {
-        paddingTop: 6,
-        paddingBottom: 6,
-        paddingLeft: 5,
-        paddingRight: 5,
-        background: "neutral0",
-        shadow: "tableShadow",
-        borderColor: "neutral150",
-        hasRadius: true,
+    return /*#__PURE__*/ jsxs(Flex, {
+        paddingTop: {
+            initial: 0,
+            medium: 6
+        },
+        paddingBottom: {
+            initial: 0,
+            medium: 6
+        },
+        paddingLeft: {
+            initial: 0,
+            medium: 5
+        },
+        paddingRight: {
+            initial: 0,
+            medium: 5
+        },
+        background: isMobile ? 'transparent' : 'neutral0',
+        shadow: isMobile ? 'none' : 'tableShadow',
+        borderColor: isMobile ? 'transparent' : 'neutral150',
+        hasRadius: !isMobile,
+        gap: {
+            initial: 4,
+            medium: 2
+        },
+        direction: "column",
+        alignItems: "stretch",
         children: [
             /*#__PURE__*/ jsx(Flex, {
                 justifyContent: "center",
                 children: /*#__PURE__*/ jsx(Typography, {
                     fontWeight: "bold",
                     textColor: "neutral600",
+                    fontSize: 1,
                     children: formatMessage({
                         id: getTranslation('components.DynamicZone.ComponentPicker-label'),
                         defaultMessage: 'Pick one component'
@@ -35,7 +55,6 @@ const ComponentPicker = ({ dynamicComponentsByCategory = {}, isOpen, onClickAddC
                 })
             }),
             /*#__PURE__*/ jsx(Box, {
-                paddingTop: 2,
                 children: /*#__PURE__*/ jsx(Accordion.Root, {
                     defaultValue: Object.keys(dynamicComponentsByCategory)[0],
                     children: Object.entries(dynamicComponentsByCategory).map(([category, components], index)=>/*#__PURE__*/ jsx(ComponentCategory, {

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentPicker.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = {},\n  isOpen,\n  onClickAddComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Box\n      paddingTop={6}\n      paddingBottom={6}\n      paddingLeft={5}\n      paddingRight={5}\n      background=\"neutral0\"\n      shadow=\"tableShadow\"\n      borderColor=\"neutral150\"\n      hasRadius\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\">\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box paddingTop={2}>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Box>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","formatMessage","useIntl","handleAddComponentToDz","componentUid","_jsxs","Box","paddingTop","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","_jsx","Flex","justifyContent","Typography","fontWeight","textColor","id","getTranslation","defaultMessage","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","variant"],"mappings":";;;;;;;AAeMA,MAAAA,eAAAA,GAAkB,CAAC,EACvBC,2BAA8B,GAAA,EAAE,EAChCC,MAAM,EACNC,mBAAmB,EACE,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,MAAMC,sBAAAA,GAAyB,CAACC,YAAyB,GAAA,IAAA;YACvDJ,mBAAoBI,CAAAA,YAAAA,CAAAA;AACtB,SAAA;AAEA,IAAA,IAAI,CAACL,MAAQ,EAAA;QACX,OAAO,IAAA;AACT;AAEA,IAAA,qBACEM,IAACC,CAAAA,GAAAA,EAAAA;QACCC,UAAY,EAAA,CAAA;QACZC,aAAe,EAAA,CAAA;QACfC,WAAa,EAAA,CAAA;QACbC,YAAc,EAAA,CAAA;QACdC,UAAW,EAAA,UAAA;QACXC,MAAO,EAAA,aAAA;QACPC,WAAY,EAAA,YAAA;QACZC,SAAS,EAAA,IAAA;;0BAETC,GAACC,CAAAA,IAAAA,EAAAA;gBAAKC,cAAe,EAAA,QAAA;AACnB,gBAAA,QAAA,gBAAAF,GAACG,CAAAA,UAAAA,EAAAA;oBAAWC,UAAW,EAAA,MAAA;oBAAOC,SAAU,EAAA,YAAA;8BACrCnB,aAAc,CAAA;AACboB,wBAAAA,EAAAA,EAAIC,cAAe,CAAA,8CAAA,CAAA;wBACnBC,cAAgB,EAAA;AAClB,qBAAA;;;0BAGJR,GAACT,CAAAA,GAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;wCACfQ,GAAA,CAACS,UAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAOC,CAAAA,IAAI,CAAC9B,2BAAAA,CAA4B,CAAC,CAAE,CAAA;8BACtE6B,MAAOE,CAAAA,OAAO,CAAC/B,2BAAAA,CAAAA,CAA6BgC,GAAG,CAAC,CAAC,CAACC,QAAUC,EAAAA,UAAAA,CAAW,EAAEC,KAAAA,iBACxElB,GAACmB,CAAAA,iBAAAA,EAAAA;4BAECH,QAAUA,EAAAA,QAAAA;4BACVC,UAAYA,EAAAA,UAAAA;4BACZG,cAAgBhC,EAAAA,sBAAAA;4BAChBiC,OAASH,EAAAA,KAAAA,GAAQ,CAAM,KAAA,CAAA,GAAI,SAAY,GAAA;AAJlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAWnB;;;;"}
+{"version":3,"file":"ComponentPicker.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = {},\n  isOpen,\n  onClickAddComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n  const isMobile = useIsMobile();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Flex\n      paddingTop={{ initial: 0, medium: 6 }}\n      paddingBottom={{ initial: 0, medium: 6 }}\n      paddingLeft={{ initial: 0, medium: 5 }}\n      paddingRight={{ initial: 0, medium: 5 }}\n      background={isMobile ? 'transparent' : 'neutral0'}\n      shadow={isMobile ? 'none' : 'tableShadow'}\n      borderColor={isMobile ? 'transparent' : 'neutral150'}\n      hasRadius={!isMobile}\n      gap={{ initial: 4, medium: 2 }}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\" fontSize={1}>\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","formatMessage","useIntl","isMobile","useIsMobile","handleAddComponentToDz","componentUid","_jsxs","Flex","paddingTop","initial","medium","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","gap","direction","alignItems","_jsx","justifyContent","Typography","fontWeight","textColor","fontSize","id","getTranslation","defaultMessage","Box","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","variant"],"mappings":";;;;;;;AAcMA,MAAAA,eAAAA,GAAkB,CAAC,EACvBC,2BAA8B,GAAA,EAAE,EAChCC,MAAM,EACNC,mBAAmB,EACE,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAWC,GAAAA,WAAAA,EAAAA;IAEjB,MAAMC,sBAAAA,GAAyB,CAACC,YAAyB,GAAA,IAAA;YACvDN,mBAAoBM,CAAAA,YAAAA,CAAAA;AACtB,SAAA;AAEA,IAAA,IAAI,CAACP,MAAQ,EAAA;QACX,OAAO,IAAA;AACT;AAEA,IAAA,qBACEQ,IAACC,CAAAA,IAAAA,EAAAA;QACCC,UAAY,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACpCC,aAAe,EAAA;YAAEF,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACvCE,WAAa,EAAA;YAAEH,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACrCG,YAAc,EAAA;YAAEJ,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;AACtCI,QAAAA,UAAAA,EAAYZ,WAAW,aAAgB,GAAA,UAAA;AACvCa,QAAAA,MAAAA,EAAQb,WAAW,MAAS,GAAA,aAAA;AAC5Bc,QAAAA,WAAAA,EAAad,WAAW,aAAgB,GAAA,YAAA;AACxCe,QAAAA,SAAAA,EAAW,CAACf,QAAAA;QACZgB,GAAK,EAAA;YAAET,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QAC7BS,SAAU,EAAA,QAAA;QACVC,UAAW,EAAA,SAAA;;0BAEXC,GAACd,CAAAA,IAAAA,EAAAA;gBAAKe,cAAe,EAAA,QAAA;AACnB,gBAAA,QAAA,gBAAAD,GAACE,CAAAA,UAAAA,EAAAA;oBAAWC,UAAW,EAAA,MAAA;oBAAOC,SAAU,EAAA,YAAA;oBAAaC,QAAU,EAAA,CAAA;8BAC5D1B,aAAc,CAAA;AACb2B,wBAAAA,EAAAA,EAAIC,cAAe,CAAA,8CAAA,CAAA;wBACnBC,cAAgB,EAAA;AAClB,qBAAA;;;0BAGJR,GAACS,CAAAA,GAAAA,EAAAA;wCACCT,GAAA,CAACU,UAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAOC,CAAAA,IAAI,CAACtC,2BAAAA,CAA4B,CAAC,CAAE,CAAA;8BACtEqC,MAAOE,CAAAA,OAAO,CAACvC,2BAAAA,CAAAA,CAA6BwC,GAAG,CAAC,CAAC,CAACC,QAAUC,EAAAA,UAAAA,CAAW,EAAEC,KAAAA,iBACxEnB,GAACoB,CAAAA,iBAAAA,EAAAA;4BAECH,QAAUA,EAAAA,QAAAA;4BACVC,UAAYA,EAAAA,UAAAA;4BACZG,cAAgBtC,EAAAA,sBAAAA;4BAChBuC,OAASH,EAAAA,KAAAA,GAAQ,CAAM,KAAA,CAAA,GAAI,SAAY,GAAA;AAJlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAWnB;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.js

@@ -288,10 +288,10 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                 children: /*#__PURE__*/ jsxRuntime.jsx(AccordionContentRadius, {
                                     background: "neutral0",
                                     children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        paddingTop: 6,
-                                        paddingBottom: 6,
+                                        padding: {
+                                            initial: 4,
+                                            medium: 6
+                                        },
                                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
                                             gap: 4,
                                             children: components[componentUid]?.layout?.map((row, rowInd)=>{

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicComponent.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useField, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const handleMoveUp = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index > 0) {\n        onMoveComponent(index - 1, index);\n      }\n    },\n    [index, onMoveComponent]\n  );\n\n  const handleMoveDown = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index < totalLength - 1) {\n        onMoveComponent(index + 1, index);\n      }\n    },\n    [index, totalLength, onMoveComponent]\n  );\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveUp}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveDown}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => {\n                        return (\n                          <Grid.Item\n                            col={12}\n                            key={rowInd}\n                            xs={12}\n                            direction=\"column\"\n                            alignItems=\"stretch\"\n                          >\n                            <ResponsiveGridRoot gap={4}>\n                              {row.map(({ size, ...field }) => {\n                                const fieldName = `${name}.${index}.${field.name}`;\n\n                                const fieldWithTranslatedLabel = {\n                                  ...field,\n                                  label: formatMessage({\n                                    id: `content-manager.components.${componentUid}.${field.name}`,\n                                    defaultMessage: field.label,\n                                  }),\n                                };\n\n                                return (\n                                  <ResponsiveGridItem\n                                    col={size}\n                                    key={fieldName}\n                                    s={12}\n                                    xs={12}\n                                    direction=\"column\"\n                                    alignItems=\"stretch\"\n                                  >\n                                    {children ? (\n                                      children({\n                                        ...fieldWithTranslatedLabel,\n                                        document: currentDocument,\n                                        name: fieldName,\n                                      })\n                                    ) : (\n                                      <InputRenderer\n                                        {...fieldWithTranslatedLabel}\n                                        document={currentDocument}\n                                        name={fieldName}\n                                      />\n                                    )}\n                                  </ResponsiveGridItem>\n                                );\n                              })}\n                            </ResponsiveGridRoot>\n                          </Grid.Item>\n                        );\n                      })}\n                    </Grid.Root>\n                  </Box>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","handleMoveUp","useCallback","e","stopPropagation","handleMoveDown","canMoveUp","canMoveDown","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}
+{"version":3,"file":"DynamicComponent.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useField, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const handleMoveUp = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index > 0) {\n        onMoveComponent(index - 1, index);\n      }\n    },\n    [index, onMoveComponent]\n  );\n\n  const handleMoveDown = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index < totalLength - 1) {\n        onMoveComponent(index + 1, index);\n      }\n    },\n    [index, totalLength, onMoveComponent]\n  );\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveUp}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveDown}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box padding={{ initial: 4, medium: 6 }}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => {\n                        return (\n                          <Grid.Item\n                            col={12}\n                            key={rowInd}\n                            xs={12}\n                            direction=\"column\"\n                            alignItems=\"stretch\"\n                          >\n                            <ResponsiveGridRoot gap={4}>\n                              {row.map(({ size, ...field }) => {\n                                const fieldName = `${name}.${index}.${field.name}`;\n\n                                const fieldWithTranslatedLabel = {\n                                  ...field,\n                                  label: formatMessage({\n                                    id: `content-manager.components.${componentUid}.${field.name}`,\n                                    defaultMessage: field.label,\n                                  }),\n                                };\n\n                                return (\n                                  <ResponsiveGridItem\n                                    col={size}\n                                    key={fieldName}\n                                    s={12}\n                                    xs={12}\n                                    direction=\"column\"\n                                    alignItems=\"stretch\"\n                                  >\n                                    {children ? (\n                                      children({\n                                        ...fieldWithTranslatedLabel,\n                                        document: currentDocument,\n                                        name: fieldName,\n                                      })\n                                    ) : (\n                                      <InputRenderer\n                                        {...fieldWithTranslatedLabel}\n                                        document={currentDocument}\n                                        name={fieldName}\n                                      />\n                                    )}\n                                  </ResponsiveGridItem>\n                                );\n                              })}\n                            </ResponsiveGridRoot>\n                          </Grid.Item>\n                        );\n                      })}\n                    </Grid.Root>\n                  </Box>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","handleMoveUp","useCallback","e","stopPropagation","handleMoveDown","canMoveUp","canMoveDown","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","padding","initial","medium","Grid","gap","layout","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs

@@ -267,10 +267,10 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                 children: /*#__PURE__*/ jsx(AccordionContentRadius, {
                                     background: "neutral0",
                                     children: /*#__PURE__*/ jsx(Box, {
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        paddingTop: 6,
-                                        paddingBottom: 6,
+                                        padding: {
+                                            initial: 4,
+                                            medium: 6
+                                        },
                                         children: /*#__PURE__*/ jsx(Grid.Root, {
                                             gap: 4,
                                             children: components[componentUid]?.layout?.map((row, rowInd)=>{

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useField, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const handleMoveUp = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index > 0) {\n        onMoveComponent(index - 1, index);\n      }\n    },\n    [index, onMoveComponent]\n  );\n\n  const handleMoveDown = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index < totalLength - 1) {\n        onMoveComponent(index + 1, index);\n      }\n    },\n    [index, totalLength, onMoveComponent]\n  );\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveUp}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveDown}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => {\n                        return (\n                          <Grid.Item\n                            col={12}\n                            key={rowInd}\n                            xs={12}\n                            direction=\"column\"\n                            alignItems=\"stretch\"\n                          >\n                            <ResponsiveGridRoot gap={4}>\n                              {row.map(({ size, ...field }) => {\n                                const fieldName = `${name}.${index}.${field.name}`;\n\n                                const fieldWithTranslatedLabel = {\n                                  ...field,\n                                  label: formatMessage({\n                                    id: `content-manager.components.${componentUid}.${field.name}`,\n                                    defaultMessage: field.label,\n                                  }),\n                                };\n\n                                return (\n                                  <ResponsiveGridItem\n                                    col={size}\n                                    key={fieldName}\n                                    s={12}\n                                    xs={12}\n                                    direction=\"column\"\n                                    alignItems=\"stretch\"\n                                  >\n                                    {children ? (\n                                      children({\n                                        ...fieldWithTranslatedLabel,\n                                        document: currentDocument,\n                                        name: fieldName,\n                                      })\n                                    ) : (\n                                      <InputRenderer\n                                        {...fieldWithTranslatedLabel}\n                                        document={currentDocument}\n                                        name={fieldName}\n                                      />\n                                    )}\n                                  </ResponsiveGridItem>\n                                );\n                              })}\n                            </ResponsiveGridRoot>\n                          </Grid.Item>\n                        );\n                      })}\n                    </Grid.Root>\n                  </Box>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","handleMoveUp","useCallback","e","stopPropagation","handleMoveDown","canMoveUp","canMoveDown","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}
+{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useField, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const handleMoveUp = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index > 0) {\n        onMoveComponent(index - 1, index);\n      }\n    },\n    [index, onMoveComponent]\n  );\n\n  const handleMoveDown = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (index < totalLength - 1) {\n        onMoveComponent(index + 1, index);\n      }\n    },\n    [index, totalLength, onMoveComponent]\n  );\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveUp}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={handleMoveDown}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box padding={{ initial: 4, medium: 6 }}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => {\n                        return (\n                          <Grid.Item\n                            col={12}\n                            key={rowInd}\n                            xs={12}\n                            direction=\"column\"\n                            alignItems=\"stretch\"\n                          >\n                            <ResponsiveGridRoot gap={4}>\n                              {row.map(({ size, ...field }) => {\n                                const fieldName = `${name}.${index}.${field.name}`;\n\n                                const fieldWithTranslatedLabel = {\n                                  ...field,\n                                  label: formatMessage({\n                                    id: `content-manager.components.${componentUid}.${field.name}`,\n                                    defaultMessage: field.label,\n                                  }),\n                                };\n\n                                return (\n                                  <ResponsiveGridItem\n                                    col={size}\n                                    key={fieldName}\n                                    s={12}\n                                    xs={12}\n                                    direction=\"column\"\n                                    alignItems=\"stretch\"\n                                  >\n                                    {children ? (\n                                      children({\n                                        ...fieldWithTranslatedLabel,\n                                        document: currentDocument,\n                                        name: fieldName,\n                                      })\n                                    ) : (\n                                      <InputRenderer\n                                        {...fieldWithTranslatedLabel}\n                                        document={currentDocument}\n                                        name={fieldName}\n                                      />\n                                    )}\n                                  </ResponsiveGridItem>\n                                );\n                              })}\n                            </ResponsiveGridRoot>\n                          </Grid.Item>\n                        );\n                      })}\n                    </Grid.Root>\n                  </Box>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","handleMoveUp","useCallback","e","stopPropagation","handleMoveDown","canMoveUp","canMoveDown","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","padding","initial","medium","Grid","gap","layout","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/Field.js

@@ -178,7 +178,10 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
         children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
             direction: "column",
             alignItems: "stretch",
-            gap: 6,
+            gap: {
+                initial: 4,
+                medium: 6
+            },
             children: [
                 dynamicDisplayedComponentsLength > 0 && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
                     children: [