@strapi/content-manager 0.0.0-experimental.bffd3c1819cd08304e7d270e88b4973e9fcbc183 → 0.0.0-experimental.c23f51fc41b3ef5de081f427d07e87af93cdcb2c

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddComponentButton.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Flex, Typography, TypographyComponent } from '@strapi/design-system';\nimport { PlusCircle } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\ninterface AddComponentButtonProps {\n  children: React.ReactNode;\n  hasError?: boolean;\n  isDisabled?: boolean;\n  isOpen?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n}\n\nconst AddComponentButton = ({\n  hasError,\n  isDisabled,\n  isOpen,\n  children,\n  onClick,\n}: AddComponentButtonProps) => {\n  return (\n    <StyledButton\n      type=\"button\"\n      onClick={onClick}\n      disabled={isDisabled}\n      background=\"neutral0\"\n      style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n      variant=\"tertiary\"\n    >\n      <Flex tag=\"span\" gap={2}>\n        <StyledAddIcon aria-hidden $isOpen={isOpen} $hasError={hasError && !isOpen} />\n        <Typography\n          variant=\"pi\"\n          fontWeight=\"bold\"\n          textColor={hasError && !isOpen ? 'danger600' : 'neutral600'}\n        >\n          {children}\n        </Typography>\n      </Flex>\n    </StyledButton>\n  );\n};\n\nconst StyledAddIcon = styled(PlusCircle)<{ $isOpen?: boolean; $hasError?: boolean }>`\n  height: ${({ theme }) => theme.spaces[6]};\n  width: ${({ theme }) => theme.spaces[6]};\n  transform: ${({ $isOpen }) => ($isOpen ? 'rotate(45deg)' : 'rotate(0deg)')};\n\n  > circle {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger200 : theme.colors.neutral150};\n  }\n  > path {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger600 : theme.colors.neutral500};\n  }\n`;\n\nconst StyledButton = styled(Button)`\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  border-radius: 26px;\n  box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n  height: 5rem;\n`;\n\nexport { AddComponentButton };\nexport type { AddComponentButtonProps };\n"],"names":["AddComponentButton","hasError","isDisabled","isOpen","children","onClick","_jsx","StyledButton","type","disabled","background","style","cursor","variant","_jsxs","Flex","tag","gap","StyledAddIcon","aria-hidden","$isOpen","$hasError","Typography","fontWeight","textColor","styled","PlusCircle","theme","spaces","colors","danger200","neutral150","danger600","neutral500","Button","shadows","filterShadow"],"mappings":";;;;;;AAcA,MAAMA,kBAAqB,GAAA,CAAC,EAC1BC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACiB,GAAA;AACxB,IAAA,qBACEC,GAACC,CAAAA,YAAAA,EAAAA;QACCC,IAAK,EAAA,QAAA;QACLH,OAASA,EAAAA,OAAAA;QACTI,QAAUP,EAAAA,UAAAA;QACVQ,UAAW,EAAA,UAAA;QACXC,KAAO,EAAA;AAAEC,YAAAA,MAAAA,EAAQV,aAAa,aAAgB,GAAA;AAAU,SAAA;QACxDW,OAAQ,EAAA,UAAA;AAER,QAAA,QAAA,gBAAAC,IAACC,CAAAA,IAAAA,EAAAA;YAAKC,GAAI,EAAA,MAAA;YAAOC,GAAK,EAAA,CAAA;;8BACpBX,GAACY,CAAAA,aAAAA,EAAAA;oBAAcC,aAAW,EAAA,IAAA;oBAACC,OAASjB,EAAAA,MAAAA;AAAQkB,oBAAAA,SAAAA,EAAWpB,YAAY,CAACE;;8BACpEG,GAACgB,CAAAA,UAAAA,EAAAA;oBACCT,OAAQ,EAAA,IAAA;oBACRU,UAAW,EAAA,MAAA;oBACXC,SAAWvB,EAAAA,QAAAA,IAAY,CAACE,MAAAA,GAAS,WAAc,GAAA,YAAA;AAE9CC,oBAAAA,QAAAA,EAAAA;;;;;AAKX;AAEA,MAAMc,aAAAA,GAAgBO,MAAOC,CAAAA,UAAAA,CAAuD;UAC1E,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;SAClC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,aAAA,EAAE,CAAC,EAAER,OAAO,EAAE,GAAMA,OAAAA,GAAU,kBAAkB,cAAgB,CAAA;;;AAGnE,UAAA,EAAE,CAAC,EAAEO,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAME,CAAAA,MAAM,CAACC,SAAS,GAAGH,MAAME,MAAM,CAACE,UAAU,CAAC;;;AAGzD,UAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAME,CAAAA,MAAM,CAACG,SAAS,GAAGL,MAAME,MAAM,CAACI,UAAU,CAAC;;AAEnE,CAAC;AAED,MAAM1B,YAAAA,GAAekB,MAAOS,CAAAA,MAAAA,CAAO;gBACnB,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;cAEnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMQ,CAAAA,OAAO,CAACC,YAAY,CAAC;;AAE1D,CAAC;;;;"}

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

@@ -0,0 +1,94 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var ComponentIcon = require('../../../../../components/ComponentIcon.js');
+var FormLayout = require('../../FormLayout.js');
+
+const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Item, {
+        value: category,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Header, {
+                variant: variant,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Trigger, {
+                    children: formatMessage({
+                        id: category,
+                        defaultMessage: category
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(ResponsiveAccordionContent, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Grid, {
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                    paddingLeft: 3,
+                    paddingRight: 3,
+                    children: components.map(({ uid, displayName, icon })=>/*#__PURE__*/ jsxRuntime.jsx(ComponentBox, {
+                            tag: "button",
+                            type: "button",
+                            background: "neutral100",
+                            justifyContent: "center",
+                            onClick: onAddComponent(uid),
+                            hasRadius: true,
+                            height: "8.4rem",
+                            shrink: 0,
+                            borderColor: "neutral200",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                direction: "column",
+                                gap: 1,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(ComponentIcon.ComponentIcon, {
+                                        color: "currentColor",
+                                        background: "primary200",
+                                        icon: icon
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "pi",
+                                        fontWeight: "bold",
+                                        children: displayName
+                                    })
+                                ]
+                            })
+                        }, uid))
+                })
+            })
+        ]
+    });
+};
+const ResponsiveAccordionContent = styledComponents.styled(designSystem.Accordion.Content)`
+  container-type: inline-size;
+`;
+const Grid = styledComponents.styled(designSystem.Box)`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 100%);
+  grid-gap: ${({ theme })=>theme.spaces[1]};
+
+  @container (min-width: ${()=>FormLayout.RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+    grid-template-columns: repeat(auto-fill, 14rem);
+  }
+`;
+const ComponentBox = styledComponents.styled(designSystem.Flex)`
+  color: ${({ theme })=>theme.colors.neutral600};
+  cursor: pointer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props)=>props.theme.motion.easings.easeOutQuad};
+  }
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme })=>theme.colors.primary200};
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+`;
+
+exports.ComponentCategory = ComponentCategory;
+//# sourceMappingURL=ComponentCategory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentCategory.js","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';\nimport { RESPONSIVE_CONTAINER_BREAKPOINTS } from '../../FormLayout';\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\nconst Grid = styled(Box)`\n  display: grid;\n  grid-template-columns: repeat(auto-fill, 100%);\n  grid-gap: ${({ theme }) => theme.spaces[1]};\n\n  @container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {\n    grid-template-columns: repeat(auto-fill, 14rem);\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","Box","theme","spaces","RESPONSIVE_CONTAINER_BREAKPOINTS","sm","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Accordion, Box, Flex, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { ComponentIcon } from '../../../../../components/ComponentIcon.mjs';
+import { RESPONSIVE_CONTAINER_BREAKPOINTS } from '../../FormLayout.mjs';
+
+const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Accordion.Item, {
+        value: category,
+        children: [
+            /*#__PURE__*/ jsx(Accordion.Header, {
+                variant: variant,
+                children: /*#__PURE__*/ jsx(Accordion.Trigger, {
+                    children: formatMessage({
+                        id: category,
+                        defaultMessage: category
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(ResponsiveAccordionContent, {
+                children: /*#__PURE__*/ jsx(Grid, {
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                    paddingLeft: 3,
+                    paddingRight: 3,
+                    children: components.map(({ uid, displayName, icon })=>/*#__PURE__*/ jsx(ComponentBox, {
+                            tag: "button",
+                            type: "button",
+                            background: "neutral100",
+                            justifyContent: "center",
+                            onClick: onAddComponent(uid),
+                            hasRadius: true,
+                            height: "8.4rem",
+                            shrink: 0,
+                            borderColor: "neutral200",
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                direction: "column",
+                                gap: 1,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                children: [
+                                    /*#__PURE__*/ jsx(ComponentIcon, {
+                                        color: "currentColor",
+                                        background: "primary200",
+                                        icon: icon
+                                    }),
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "pi",
+                                        fontWeight: "bold",
+                                        children: displayName
+                                    })
+                                ]
+                            })
+                        }, uid))
+                })
+            })
+        ]
+    });
+};
+const ResponsiveAccordionContent = styled(Accordion.Content)`
+  container-type: inline-size;
+`;
+const Grid = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 100%);
+  grid-gap: ${({ theme })=>theme.spaces[1]};
+
+  @container (min-width: ${()=>RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+    grid-template-columns: repeat(auto-fill, 14rem);
+  }
+`;
+const ComponentBox = styled(Flex)`
+  color: ${({ theme })=>theme.colors.neutral600};
+  cursor: pointer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props)=>props.theme.motion.easings.easeOutQuad};
+  }
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme })=>theme.colors.primary200};
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+`;
+
+export { ComponentCategory };
+//# sourceMappingURL=ComponentCategory.mjs.map

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

@@ -0,0 +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';\nimport { RESPONSIVE_CONTAINER_BREAKPOINTS } from '../../FormLayout';\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\nconst Grid = styled(Box)`\n  display: grid;\n  grid-template-columns: repeat(auto-fill, 100%);\n  grid-gap: ${({ theme }) => theme.spaces[1]};\n\n  @container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {\n    grid-template-columns: repeat(auto-fill, 14rem);\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","Box","theme","spaces","RESPONSIVE_CONTAINER_BREAKPOINTS","sm","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":";;;;;;;;AAsBA,MAAMA,iBAAoB,GAAA,CAAC,EACzBC,QAAQ,EACRC,UAAAA,GAAa,EAAE,EACfC,OAAU,GAAA,SAAS,EACnBC,cAAc,EACS,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,IAAA,CAACC,UAAUC,IAAI,EAAA;QAACC,KAAOT,EAAAA,QAAAA;;AACrB,0BAAAU,GAAA,CAACH,UAAUI,MAAM,EAAA;gBAACT,OAASA,EAAAA,OAAAA;wCACzBQ,GAAA,CAACH,UAAUK,OAAO,EAAA;8BACfR,aAAc,CAAA;wBAAES,EAAIb,EAAAA,QAAAA;wBAAUc,cAAgBd,EAAAA;AAAS,qBAAA;;;0BAG5DU,GAACK,CAAAA,0BAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAL,GAACM,CAAAA,IAAAA,EAAAA;oBAAKC,UAAY,EAAA,CAAA;oBAAGC,aAAe,EAAA,CAAA;oBAAGC,WAAa,EAAA,CAAA;oBAAGC,YAAc,EAAA,CAAA;8BAClEnB,UAAWoB,CAAAA,GAAG,CAAC,CAAC,EAAEC,GAAG,EAAEC,WAAW,EAAEC,IAAI,EAAE,iBACzCd,GAACe,CAAAA,YAAAA,EAAAA;4BAECC,GAAI,EAAA,QAAA;4BACJC,IAAK,EAAA,QAAA;4BACLC,UAAW,EAAA,YAAA;4BACXC,cAAe,EAAA,QAAA;AACfC,4BAAAA,OAAAA,EAAS3B,cAAemB,CAAAA,GAAAA,CAAAA;4BACxBS,SAAS,EAAA,IAAA;4BACTC,MAAO,EAAA,QAAA;4BACPC,MAAQ,EAAA,CAAA;4BACRC,WAAY,EAAA,YAAA;AAEZ,4BAAA,QAAA,gBAAA5B,IAAC6B,CAAAA,IAAAA,EAAAA;gCAAKC,SAAU,EAAA,QAAA;gCAASC,GAAK,EAAA,CAAA;gCAAGC,UAAW,EAAA,QAAA;gCAAST,cAAe,EAAA,QAAA;;kDAClEnB,GAAC6B,CAAAA,aAAAA,EAAAA;wCAAcC,KAAM,EAAA,cAAA;wCAAeZ,UAAW,EAAA,YAAA;wCAAaJ,IAAMA,EAAAA;;kDAElEd,GAAC+B,CAAAA,UAAAA,EAAAA;wCAAWvC,OAAQ,EAAA,IAAA;wCAAKwC,UAAW,EAAA,MAAA;AACjCnB,wCAAAA,QAAAA,EAAAA;;;;AAfAD,yBAAAA,EAAAA,GAAAA,CAAAA;;;;;AAwBnB;AAEA,MAAMP,0BAA6B4B,GAAAA,MAAAA,CAAOpC,SAAUqC,CAAAA,OAAO,CAAC;;AAE5D,CAAC;AAED,MAAM5B,IAAAA,GAAO2B,MAAOE,CAAAA,GAAAA,CAAI;;;YAGZ,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;yBAEpB,EAAE,IAAMC,gCAAiCC,CAAAA,EAAE,CAAC;;;AAGrE,CAAC;AAED,MAAMxB,YAAAA,GAAekB,MAAgCR,CAAAA,IAAAA,CAAK;SACjD,EAAE,CAAC,EAAEW,KAAK,EAAE,GAAKA,KAAMI,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;4BAItB,EAAE,CAACC,KAAUA,GAAAA,KAAAA,CAAMN,KAAK,CAACO,MAAM,CAACC,OAAO,CAACC,WAAW,CAAC;;;;;sBAK1D,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMI,CAAAA,MAAM,CAACM,UAAU,CAAC;gBAC/C,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAMI,CAAAA,MAAM,CAACO,UAAU,CAAC;WAC9C,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAMI,CAAAA,MAAM,CAACQ,UAAU,CAAC;;AAEpD,CAAC;;;;"}

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var translations = require('../../../../../utils/translations.js');
+var ComponentCategory = require('./ComponentCategory.js');
+
+const ComponentPicker = ({ dynamicComponentsByCategory = {}, isOpen, onClickAddComponent })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    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,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                justifyContent: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    fontWeight: "bold",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: translations.getTranslation('components.DynamicZone.ComponentPicker-label'),
+                        defaultMessage: 'Pick one component'
+                    })
+                })
+            }),
+            /*#__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, {
+                            category: category,
+                            components: components,
+                            onAddComponent: handleAddComponentToDz,
+                            variant: index % 2 === 1 ? 'primary' : 'secondary'
+                        }, category))
+                })
+            })
+        ]
+    });
+};
+
+exports.ComponentPicker = ComponentPicker;
+//# sourceMappingURL=ComponentPicker.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Box, Flex, Typography, 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 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,
+        children: [
+            /*#__PURE__*/ jsx(Flex, {
+                justifyContent: "center",
+                children: /*#__PURE__*/ jsx(Typography, {
+                    fontWeight: "bold",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: getTranslation('components.DynamicZone.ComponentPicker-label'),
+                        defaultMessage: 'Pick one component'
+                    })
+                })
+            }),
+            /*#__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, {
+                            category: category,
+                            components: components,
+                            onAddComponent: handleAddComponentToDz,
+                            variant: index % 2 === 1 ? 'primary' : 'secondary'
+                        }, category))
+                })
+            })
+        ]
+    });
+};
+
+export { ComponentPicker };
+//# sourceMappingURL=ComponentPicker.mjs.map

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

@@ -0,0 +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;;;;"}