@strapi/content-manager 5.61.0 → 5.62.0

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.js

@@ -17,32 +17,42 @@ const EditorLayout = ({ children, error, disabled, onToggleExpand, ariaDescripti
             isExpandedMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
                 open: isExpandedMode,
                 onOpenChange: onToggleExpand,
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Content, {
                     style: {
                         maxWidth: 'unset',
                         width: 'unset'
                     },
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        height: "90dvh",
-                        width: "90dvw",
-                        alignItems: "flex-start",
-                        direction: "column",
-                        children: [
-                            children,
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                position: "absolute",
-                                bottom: "1.2rem",
-                                right: "1.2rem",
-                                shadow: "filterShadow",
-                                label: formatMessage({
-                                    id: translations.getTranslation('components.Blocks.collapse'),
-                                    defaultMessage: 'Collapse'
-                                }),
-                                onClick: onToggleExpand,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
+                                children: formatMessage({
+                                    id: translations.getTranslation('components.Blocks.expand'),
+                                    defaultMessage: 'Expand'
+                                })
                             })
-                        ]
-                    })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            height: "90dvh",
+                            width: "90dvw",
+                            alignItems: "flex-start",
+                            direction: "column",
+                            children: [
+                                children,
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    position: "absolute",
+                                    bottom: "1.2rem",
+                                    right: "1.2rem",
+                                    shadow: "filterShadow",
+                                    label: formatMessage({
+                                        id: translations.getTranslation('components.Blocks.collapse'),
+                                        defaultMessage: 'Collapse'
+                                    }),
+                                    onClick: onToggleExpand,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
+                                })
+                            ]
+                        })
+                    ]
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(InputWrapper, {

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onToggleExpand: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n  livePreviewSync?: boolean;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onToggleExpand,\n  ariaDescriptionId,\n  livePreviewSync = false,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  return (\n    <>\n      {isExpandedMode && (\n        <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n          <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n            <Flex height=\"90dvh\" width=\"90dvw\" alignItems=\"flex-start\" direction=\"column\">\n              {children}\n              <IconButton\n                position=\"absolute\"\n                bottom=\"1.2rem\"\n                right=\"1.2rem\"\n                shadow=\"filterShadow\"\n                label={formatMessage({\n                  id: getTranslation('components.Blocks.collapse'),\n                  defaultMessage: 'Collapse',\n                })}\n                onClick={onToggleExpand}\n              >\n                <Collapse />\n              </IconButton>\n            </Flex>\n          </Modal.Content>\n        </Modal.Root>\n      )}\n      <InputWrapper\n        direction=\"column\"\n        alignItems=\"flex-start\"\n        height=\"512px\"\n        $disabled={disabled}\n        $hasError={Boolean(error)}\n        minHeight={livePreviewSync ? 0 : undefined}\n        style={{ overflow: 'hidden' }}\n        aria-describedby={ariaDescriptionId}\n        position=\"relative\"\n      >\n        {!isExpandedMode && children}\n      </InputWrapper>\n    </>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","livePreviewSync","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","id","getTranslation","defaultMessage","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","minHeight","undefined","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150"],"mappings":"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"}
+{"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal, VisuallyHidden } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onToggleExpand: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n  livePreviewSync?: boolean;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onToggleExpand,\n  ariaDescriptionId,\n  livePreviewSync = false,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  return (\n    <>\n      {isExpandedMode && (\n        <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n          <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n            <VisuallyHidden>\n              <Modal.Title>\n                {formatMessage({\n                  id: getTranslation('components.Blocks.expand'),\n                  defaultMessage: 'Expand',\n                })}\n              </Modal.Title>\n            </VisuallyHidden>\n            <Flex height=\"90dvh\" width=\"90dvw\" alignItems=\"flex-start\" direction=\"column\">\n              {children}\n              <IconButton\n                position=\"absolute\"\n                bottom=\"1.2rem\"\n                right=\"1.2rem\"\n                shadow=\"filterShadow\"\n                label={formatMessage({\n                  id: getTranslation('components.Blocks.collapse'),\n                  defaultMessage: 'Collapse',\n                })}\n                onClick={onToggleExpand}\n              >\n                <Collapse />\n              </IconButton>\n            </Flex>\n          </Modal.Content>\n        </Modal.Root>\n      )}\n      <InputWrapper\n        direction=\"column\"\n        alignItems=\"flex-start\"\n        height=\"512px\"\n        $disabled={disabled}\n        $hasError={Boolean(error)}\n        minHeight={livePreviewSync ? 0 : undefined}\n        style={{ overflow: 'hidden' }}\n        aria-describedby={ariaDescriptionId}\n        position=\"relative\"\n      >\n        {!isExpandedMode && children}\n      </InputWrapper>\n    </>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","livePreviewSync","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","VisuallyHidden","Title","id","getTranslation","defaultMessage","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","minHeight","undefined","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.mjs

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'react';
-import { Flex, Modal, IconButton } from '@strapi/design-system';
+import { Flex, Modal, VisuallyHidden, IconButton } from '@strapi/design-system';
 import { Collapse } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { css, styled } from 'styled-components';
@@ -15,32 +15,42 @@ const EditorLayout = ({ children, error, disabled, onToggleExpand, ariaDescripti
             isExpandedMode && /*#__PURE__*/ jsx(Modal.Root, {
                 open: isExpandedMode,
                 onOpenChange: onToggleExpand,
-                children: /*#__PURE__*/ jsx(Modal.Content, {
+                children: /*#__PURE__*/ jsxs(Modal.Content, {
                     style: {
                         maxWidth: 'unset',
                         width: 'unset'
                     },
-                    children: /*#__PURE__*/ jsxs(Flex, {
-                        height: "90dvh",
-                        width: "90dvw",
-                        alignItems: "flex-start",
-                        direction: "column",
-                        children: [
-                            children,
-                            /*#__PURE__*/ jsx(IconButton, {
-                                position: "absolute",
-                                bottom: "1.2rem",
-                                right: "1.2rem",
-                                shadow: "filterShadow",
-                                label: formatMessage({
-                                    id: getTranslation('components.Blocks.collapse'),
-                                    defaultMessage: 'Collapse'
-                                }),
-                                onClick: onToggleExpand,
-                                children: /*#__PURE__*/ jsx(Collapse, {})
+                    children: [
+                        /*#__PURE__*/ jsx(VisuallyHidden, {
+                            children: /*#__PURE__*/ jsx(Modal.Title, {
+                                children: formatMessage({
+                                    id: getTranslation('components.Blocks.expand'),
+                                    defaultMessage: 'Expand'
+                                })
                             })
-                        ]
-                    })
+                        }),
+                        /*#__PURE__*/ jsxs(Flex, {
+                            height: "90dvh",
+                            width: "90dvw",
+                            alignItems: "flex-start",
+                            direction: "column",
+                            children: [
+                                children,
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    position: "absolute",
+                                    bottom: "1.2rem",
+                                    right: "1.2rem",
+                                    shadow: "filterShadow",
+                                    label: formatMessage({
+                                        id: getTranslation('components.Blocks.collapse'),
+                                        defaultMessage: 'Collapse'
+                                    }),
+                                    onClick: onToggleExpand,
+                                    children: /*#__PURE__*/ jsx(Collapse, {})
+                                })
+                            ]
+                        })
+                    ]
                 })
             }),
             /*#__PURE__*/ jsx(InputWrapper, {

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onToggleExpand: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n  livePreviewSync?: boolean;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onToggleExpand,\n  ariaDescriptionId,\n  livePreviewSync = false,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  return (\n    <>\n      {isExpandedMode && (\n        <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n          <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n            <Flex height=\"90dvh\" width=\"90dvw\" alignItems=\"flex-start\" direction=\"column\">\n              {children}\n              <IconButton\n                position=\"absolute\"\n                bottom=\"1.2rem\"\n                right=\"1.2rem\"\n                shadow=\"filterShadow\"\n                label={formatMessage({\n                  id: getTranslation('components.Blocks.collapse'),\n                  defaultMessage: 'Collapse',\n                })}\n                onClick={onToggleExpand}\n              >\n                <Collapse />\n              </IconButton>\n            </Flex>\n          </Modal.Content>\n        </Modal.Root>\n      )}\n      <InputWrapper\n        direction=\"column\"\n        alignItems=\"flex-start\"\n        height=\"512px\"\n        $disabled={disabled}\n        $hasError={Boolean(error)}\n        minHeight={livePreviewSync ? 0 : undefined}\n        style={{ overflow: 'hidden' }}\n        aria-describedby={ariaDescriptionId}\n        position=\"relative\"\n      >\n        {!isExpandedMode && children}\n      </InputWrapper>\n    </>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","livePreviewSync","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","id","getTranslation","defaultMessage","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","minHeight","undefined","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150"],"mappings":"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"}
+{"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal, VisuallyHidden } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  error?: string;\n  onToggleExpand: () => void;\n  disabled: boolean;\n  ariaDescriptionId: string;\n  livePreviewSync?: boolean;\n}\n\nconst EditorLayout = ({\n  children,\n  error,\n  disabled,\n  onToggleExpand,\n  ariaDescriptionId,\n  livePreviewSync = false,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n  return (\n    <>\n      {isExpandedMode && (\n        <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n          <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n            <VisuallyHidden>\n              <Modal.Title>\n                {formatMessage({\n                  id: getTranslation('components.Blocks.expand'),\n                  defaultMessage: 'Expand',\n                })}\n              </Modal.Title>\n            </VisuallyHidden>\n            <Flex height=\"90dvh\" width=\"90dvw\" alignItems=\"flex-start\" direction=\"column\">\n              {children}\n              <IconButton\n                position=\"absolute\"\n                bottom=\"1.2rem\"\n                right=\"1.2rem\"\n                shadow=\"filterShadow\"\n                label={formatMessage({\n                  id: getTranslation('components.Blocks.collapse'),\n                  defaultMessage: 'Collapse',\n                })}\n                onClick={onToggleExpand}\n              >\n                <Collapse />\n              </IconButton>\n            </Flex>\n          </Modal.Content>\n        </Modal.Root>\n      )}\n      <InputWrapper\n        direction=\"column\"\n        alignItems=\"flex-start\"\n        height=\"512px\"\n        $disabled={disabled}\n        $hasError={Boolean(error)}\n        minHeight={livePreviewSync ? 0 : undefined}\n        style={{ overflow: 'hidden' }}\n        aria-describedby={ariaDescriptionId}\n        position=\"relative\"\n      >\n        {!isExpandedMode && children}\n      </InputWrapper>\n    </>\n  );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n  border: 1px solid\n    ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme, $hasError = false }) => css`\n    outline: none;\n    box-shadow: 0;\n    transition-property: border-color, box-shadow, fill;\n    transition-duration: 0.2s;\n\n    &:focus-within {\n      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n    }\n  `}\n\n  ${({ theme, $disabled }) =>\n    $disabled\n      ? css`\n          color: ${theme.colors.neutral600};\n          background: ${theme.colors.neutral150};\n        `\n      : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","livePreviewSync","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","VisuallyHidden","Title","id","getTranslation","defaultMessage","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","minHeight","undefined","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150"],"mappings":";;;;;;;;;AAoBA,MAAMA,YAAAA,GAAe,CAAC,EACpBC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACdC,iBAAiB,EACjBC,eAAAA,GAAkB,KAAK,EACL,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,cAAc,EAAE,GAAGC,sBAAAA,CAAuB,cAAA,CAAA;IAElD,qBACEC,IAAA,CAAAC,QAAA,EAAA;;YACGH,cAAAA,kBACCI,GAAA,CAACC,MAAMC,IAAI,EAAA;gBAACC,IAAAA,EAAMP,cAAAA;gBAAgBQ,YAAAA,EAAcb,cAAAA;wCAC9CO,IAAA,CAACG,MAAMI,OAAO,EAAA;oBAACC,KAAAA,EAAO;wBAAEC,QAAAA,EAAU,OAAA;wBAASC,KAAAA,EAAO;AAAQ,qBAAA;;sCACxDR,GAAA,CAACS,cAAAA,EAAAA;oDACCT,GAAA,CAACC,MAAMS,KAAK,EAAA;0CACThB,aAAAA,CAAc;AACbiB,oCAAAA,EAAAA,EAAIC,cAAAA,CAAe,0BAAA,CAAA;oCACnBC,cAAAA,EAAgB;AAClB,iCAAA;;;sCAGJf,IAAA,CAACgB,IAAAA,EAAAA;4BAAKC,MAAAA,EAAO,OAAA;4BAAQP,KAAAA,EAAM,OAAA;4BAAQQ,UAAAA,EAAW,YAAA;4BAAaC,SAAAA,EAAU,QAAA;;AAClE7B,gCAAAA,QAAAA;8CACDY,GAAA,CAACkB,UAAAA,EAAAA;oCACCC,QAAAA,EAAS,UAAA;oCACTC,MAAAA,EAAO,QAAA;oCACPC,KAAAA,EAAM,QAAA;oCACNC,MAAAA,EAAO,cAAA;AACPC,oCAAAA,KAAAA,EAAO7B,aAAAA,CAAc;AACnBiB,wCAAAA,EAAAA,EAAIC,cAAAA,CAAe,4BAAA,CAAA;wCACnBC,cAAAA,EAAgB;AAClB,qCAAA,CAAA;oCACAW,OAAAA,EAASjC,cAAAA;AAET,oCAAA,QAAA,gBAAAS,GAAA,CAACyB,QAAAA,EAAAA,EAAAA;;;;;;;0BAMXzB,GAAA,CAAC0B,YAAAA,EAAAA;gBACCT,SAAAA,EAAU,QAAA;gBACVD,UAAAA,EAAW,YAAA;gBACXD,MAAAA,EAAO,OAAA;gBACPY,SAAAA,EAAWrC,QAAAA;AACXsC,gBAAAA,SAAAA,EAAWC,OAAAA,CAAQxC,KAAAA,CAAAA;AACnByC,gBAAAA,SAAAA,EAAWrC,kBAAkB,CAAA,GAAIsC,SAAAA;gBACjCzB,KAAAA,EAAO;oBAAE0B,QAAAA,EAAU;AAAS,iBAAA;gBAC5BC,kBAAAA,EAAkBzC,iBAAAA;gBAClB2B,QAAAA,EAAS,UAAA;AAER,gBAAA,QAAA,EAAA,CAACvB,cAAAA,IAAkBR;;;;AAI5B;AAEA,MAAMsC,YAAAA,GAAeQ,MAAAA,CAAsBpB,IAAAA,CAAmD;;AAE1F,IAAA,EAAE,CAAC,EAAEqB,KAAK,EAAEP,SAAS,EAAE,GAAMA,SAAAA,GAAYO,KAAAA,CAAMC,MAAM,CAACC,SAAS,GAAGF,MAAMC,MAAM,CAACE,UAAU,CAAE;AAC9E,iBAAA,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACI,QAAQ,CAAC;;EAEnD,EAAE,CAAC,EAAEL,KAAK,EAAEP,YAAY,KAAK,EAAE,GAAKa,GAAG;;;;;;;wBAOjB,EAAEb,SAAAA,GAAYO,KAAAA,CAAMC,MAAM,CAACC,SAAS,GAAGF,KAAAA,CAAMC,MAAM,CAACM,UAAU,CAAC;kBACrE,EAAEd,SAAAA,GAAYO,KAAAA,CAAMC,MAAM,CAACC,SAAS,GAAGF,KAAAA,CAAMC,MAAM,CAACM,UAAU,CAAC;;AAE/E,EAAA,CAAC;;EAED,EAAE,CAAC,EAAEP,KAAK,EAAER,SAAS,EAAE,GACrBA,SAAAA,GACIc,GAAG;AACM,iBAAA,EAAEN,KAAAA,CAAMC,MAAM,CAACO,UAAU,CAAC;AACrB,sBAAA,EAAER,KAAAA,CAAMC,MAAM,CAACQ,UAAU,CAAC;AACxC,QAAA,CAAC,GACDb,SAAAA;AACR,CAAC;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/Component/AddComponentMenu.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var translations = require('../../../../../utils/translations.js');
+
+/**
+ * The choices offered when adding a component to a field that can also copy one from another
+ * entry: start from blank fields, or pick existing content.
+ */ const AddComponentMenuContent = ({ kind, onAddEmpty, onCopy })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(MenuContent, {
+        minWidth: "30rem",
+        maxHeight: "none",
+        popoverPlacement: "bottom-center",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                onSelect: onAddEmpty,
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Plus, {}),
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    tag: "span",
+                    direction: "column",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            tag: "span",
+                            fontWeight: "bold",
+                            textColor: "neutral800",
+                            children: kind === 'entry' ? formatMessage({
+                                id: translations.getTranslation('components.AddComponentMenu.empty.entry'),
+                                defaultMessage: 'Empty entry'
+                            }) : formatMessage({
+                                id: translations.getTranslation('components.AddComponentMenu.empty.component'),
+                                defaultMessage: 'Empty component'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            tag: "span",
+                            variant: "pi",
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: translations.getTranslation('components.AddComponentMenu.empty.hint'),
+                                defaultMessage: 'Start with blank fields'
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                onSelect: onCopy,
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Duplicate, {}),
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    tag: "span",
+                    direction: "column",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            tag: "span",
+                            fontWeight: "bold",
+                            textColor: "neutral800",
+                            children: formatMessage({
+                                id: translations.getTranslation('components.AddComponentMenu.copy'),
+                                defaultMessage: 'Use existing content…'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            tag: "span",
+                            variant: "pi",
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: translations.getTranslation('components.AddComponentMenu.copy.hint'),
+                                defaultMessage: 'From another entry'
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const MenuContent = styledComponents.styled(designSystem.Menu.Content)`
+  /* two-line items: the icon lines up with the title */
+  [role='menuitem'] {
+    align-items: flex-start;
+    padding-block: ${({ theme })=>theme.spaces[2]};
+
+    > span:first-child {
+      margin-top: 2px;
+    }
+  }
+`;
+
+exports.AddComponentMenuContent = AddComponentMenuContent;
+//# sourceMappingURL=AddComponentMenu.js.map

package/dist/admin/pages/EditView/components/FormInputs/Component/AddComponentMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddComponentMenu.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/AddComponentMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Menu, Typography } from '@strapi/design-system';\nimport { Duplicate, Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\ninterface AddComponentMenuContentProps {\n  /**\n   * What the menu adds: an entry of a component field, or a component of a dynamic zone.\n   */\n  kind: 'entry' | 'component';\n  onAddEmpty: () => void;\n  onCopy: () => void;\n}\n\n/**\n * The choices offered when adding a component to a field that can also copy one from another\n * entry: start from blank fields, or pick existing content.\n */\nconst AddComponentMenuContent = ({ kind, onAddEmpty, onCopy }: AddComponentMenuContentProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <MenuContent minWidth=\"30rem\" maxHeight=\"none\" popoverPlacement=\"bottom-center\">\n      <Menu.Item onSelect={onAddEmpty} startIcon={<Plus />}>\n        <Flex tag=\"span\" direction=\"column\" alignItems=\"flex-start\">\n          <Typography tag=\"span\" fontWeight=\"bold\" textColor=\"neutral800\">\n            {kind === 'entry'\n              ? formatMessage({\n                  id: getTranslation('components.AddComponentMenu.empty.entry'),\n                  defaultMessage: 'Empty entry',\n                })\n              : formatMessage({\n                  id: getTranslation('components.AddComponentMenu.empty.component'),\n                  defaultMessage: 'Empty component',\n                })}\n          </Typography>\n          <Typography tag=\"span\" variant=\"pi\" textColor=\"neutral600\">\n            {formatMessage({\n              id: getTranslation('components.AddComponentMenu.empty.hint'),\n              defaultMessage: 'Start with blank fields',\n            })}\n          </Typography>\n        </Flex>\n      </Menu.Item>\n      <Menu.Item onSelect={onCopy} startIcon={<Duplicate />}>\n        <Flex tag=\"span\" direction=\"column\" alignItems=\"flex-start\">\n          <Typography tag=\"span\" fontWeight=\"bold\" textColor=\"neutral800\">\n            {formatMessage({\n              id: getTranslation('components.AddComponentMenu.copy'),\n              defaultMessage: 'Use existing content…',\n            })}\n          </Typography>\n          <Typography tag=\"span\" variant=\"pi\" textColor=\"neutral600\">\n            {formatMessage({\n              id: getTranslation('components.AddComponentMenu.copy.hint'),\n              defaultMessage: 'From another entry',\n            })}\n          </Typography>\n        </Flex>\n      </Menu.Item>\n    </MenuContent>\n  );\n};\n\nconst MenuContent = styled(Menu.Content)`\n  /* two-line items: the icon lines up with the title */\n  [role='menuitem'] {\n    align-items: flex-start;\n    padding-block: ${({ theme }) => theme.spaces[2]};\n\n    > span:first-child {\n      margin-top: 2px;\n    }\n  }\n`;\n\nexport { AddComponentMenuContent };\nexport type { AddComponentMenuContentProps };\n"],"names":["AddComponentMenuContent","kind","onAddEmpty","onCopy","formatMessage","useIntl","_jsxs","MenuContent","minWidth","maxHeight","popoverPlacement","_jsx","Menu","Item","onSelect","startIcon","Plus","Flex","tag","direction","alignItems","Typography","fontWeight","textColor","id","getTranslation","defaultMessage","variant","Duplicate","styled","Content","theme","spaces"],"mappings":";;;;;;;;;;AAkBA;;;IAIA,MAAMA,0BAA0B,CAAC,EAAEC,IAAI,EAAEC,UAAU,EAAEC,MAAM,EAAgC,GAAA;IACzF,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,eAAA,CAACC,WAAAA,EAAAA;QAAYC,QAAAA,EAAS,OAAA;QAAQC,SAAAA,EAAU,MAAA;QAAOC,gBAAAA,EAAiB,eAAA;;AAC9D,0BAAAC,cAAA,CAACC,kBAAKC,IAAI,EAAA;gBAACC,QAAAA,EAAUZ,UAAAA;AAAYa,gBAAAA,SAAAA,gBAAWJ,cAAA,CAACK,UAAAA,EAAAA,EAAAA,CAAAA;AAC3C,gBAAA,QAAA,gBAAAV,eAAA,CAACW,iBAAAA,EAAAA;oBAAKC,GAAAA,EAAI,MAAA;oBAAOC,SAAAA,EAAU,QAAA;oBAASC,UAAAA,EAAW,YAAA;;sCAC7CT,cAAA,CAACU,uBAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOI,UAAAA,EAAW,MAAA;4BAAOC,SAAAA,EAAU,YAAA;AAChDtB,4BAAAA,QAAAA,EAAAA,IAAAA,KAAS,UACNG,aAAAA,CAAc;AACZoB,gCAAAA,EAAAA,EAAIC,2BAAAA,CAAe,yCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA,CAAA,GACAtB,aAAAA,CAAc;AACZoB,gCAAAA,EAAAA,EAAIC,2BAAAA,CAAe,6CAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;sCAENf,cAAA,CAACU,uBAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOS,OAAAA,EAAQ,IAAA;4BAAKJ,SAAAA,EAAU,YAAA;sCAC3CnB,aAAAA,CAAc;AACboB,gCAAAA,EAAAA,EAAIC,2BAAAA,CAAe,wCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;;;;AAIN,0BAAAf,cAAA,CAACC,kBAAKC,IAAI,EAAA;gBAACC,QAAAA,EAAUX,MAAAA;AAAQY,gBAAAA,SAAAA,gBAAWJ,cAAA,CAACiB,eAAAA,EAAAA,EAAAA,CAAAA;AACvC,gBAAA,QAAA,gBAAAtB,eAAA,CAACW,iBAAAA,EAAAA;oBAAKC,GAAAA,EAAI,MAAA;oBAAOC,SAAAA,EAAU,QAAA;oBAASC,UAAAA,EAAW,YAAA;;sCAC7CT,cAAA,CAACU,uBAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOI,UAAAA,EAAW,MAAA;4BAAOC,SAAAA,EAAU,YAAA;sCAChDnB,aAAAA,CAAc;AACboB,gCAAAA,EAAAA,EAAIC,2BAAAA,CAAe,kCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;sCAEFf,cAAA,CAACU,uBAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOS,OAAAA,EAAQ,IAAA;4BAAKJ,SAAAA,EAAU,YAAA;sCAC3CnB,aAAAA,CAAc;AACboB,gCAAAA,EAAAA,EAAIC,2BAAAA,CAAe,uCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAMZ;AAEA,MAAMnB,WAAAA,GAAcsB,uBAAAA,CAAOjB,iBAAAA,CAAKkB,OAAO,CAAC;;;;mBAIrB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMpD,CAAC;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/Component/AddComponentMenu.mjs

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Menu, Flex, Typography } from '@strapi/design-system';
+import { Plus, Duplicate } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+
+/**
+ * The choices offered when adding a component to a field that can also copy one from another
+ * entry: start from blank fields, or pick existing content.
+ */ const AddComponentMenuContent = ({ kind, onAddEmpty, onCopy })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(MenuContent, {
+        minWidth: "30rem",
+        maxHeight: "none",
+        popoverPlacement: "bottom-center",
+        children: [
+            /*#__PURE__*/ jsx(Menu.Item, {
+                onSelect: onAddEmpty,
+                startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    tag: "span",
+                    direction: "column",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            tag: "span",
+                            fontWeight: "bold",
+                            textColor: "neutral800",
+                            children: kind === 'entry' ? formatMessage({
+                                id: getTranslation('components.AddComponentMenu.empty.entry'),
+                                defaultMessage: 'Empty entry'
+                            }) : formatMessage({
+                                id: getTranslation('components.AddComponentMenu.empty.component'),
+                                defaultMessage: 'Empty component'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Typography, {
+                            tag: "span",
+                            variant: "pi",
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: getTranslation('components.AddComponentMenu.empty.hint'),
+                                defaultMessage: 'Start with blank fields'
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Menu.Item, {
+                onSelect: onCopy,
+                startIcon: /*#__PURE__*/ jsx(Duplicate, {}),
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    tag: "span",
+                    direction: "column",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            tag: "span",
+                            fontWeight: "bold",
+                            textColor: "neutral800",
+                            children: formatMessage({
+                                id: getTranslation('components.AddComponentMenu.copy'),
+                                defaultMessage: 'Use existing content…'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Typography, {
+                            tag: "span",
+                            variant: "pi",
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: getTranslation('components.AddComponentMenu.copy.hint'),
+                                defaultMessage: 'From another entry'
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const MenuContent = styled(Menu.Content)`
+  /* two-line items: the icon lines up with the title */
+  [role='menuitem'] {
+    align-items: flex-start;
+    padding-block: ${({ theme })=>theme.spaces[2]};
+
+    > span:first-child {
+      margin-top: 2px;
+    }
+  }
+`;
+
+export { AddComponentMenuContent };
+//# sourceMappingURL=AddComponentMenu.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/Component/AddComponentMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddComponentMenu.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/AddComponentMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Menu, Typography } from '@strapi/design-system';\nimport { Duplicate, Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\ninterface AddComponentMenuContentProps {\n  /**\n   * What the menu adds: an entry of a component field, or a component of a dynamic zone.\n   */\n  kind: 'entry' | 'component';\n  onAddEmpty: () => void;\n  onCopy: () => void;\n}\n\n/**\n * The choices offered when adding a component to a field that can also copy one from another\n * entry: start from blank fields, or pick existing content.\n */\nconst AddComponentMenuContent = ({ kind, onAddEmpty, onCopy }: AddComponentMenuContentProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <MenuContent minWidth=\"30rem\" maxHeight=\"none\" popoverPlacement=\"bottom-center\">\n      <Menu.Item onSelect={onAddEmpty} startIcon={<Plus />}>\n        <Flex tag=\"span\" direction=\"column\" alignItems=\"flex-start\">\n          <Typography tag=\"span\" fontWeight=\"bold\" textColor=\"neutral800\">\n            {kind === 'entry'\n              ? formatMessage({\n                  id: getTranslation('components.AddComponentMenu.empty.entry'),\n                  defaultMessage: 'Empty entry',\n                })\n              : formatMessage({\n                  id: getTranslation('components.AddComponentMenu.empty.component'),\n                  defaultMessage: 'Empty component',\n                })}\n          </Typography>\n          <Typography tag=\"span\" variant=\"pi\" textColor=\"neutral600\">\n            {formatMessage({\n              id: getTranslation('components.AddComponentMenu.empty.hint'),\n              defaultMessage: 'Start with blank fields',\n            })}\n          </Typography>\n        </Flex>\n      </Menu.Item>\n      <Menu.Item onSelect={onCopy} startIcon={<Duplicate />}>\n        <Flex tag=\"span\" direction=\"column\" alignItems=\"flex-start\">\n          <Typography tag=\"span\" fontWeight=\"bold\" textColor=\"neutral800\">\n            {formatMessage({\n              id: getTranslation('components.AddComponentMenu.copy'),\n              defaultMessage: 'Use existing content…',\n            })}\n          </Typography>\n          <Typography tag=\"span\" variant=\"pi\" textColor=\"neutral600\">\n            {formatMessage({\n              id: getTranslation('components.AddComponentMenu.copy.hint'),\n              defaultMessage: 'From another entry',\n            })}\n          </Typography>\n        </Flex>\n      </Menu.Item>\n    </MenuContent>\n  );\n};\n\nconst MenuContent = styled(Menu.Content)`\n  /* two-line items: the icon lines up with the title */\n  [role='menuitem'] {\n    align-items: flex-start;\n    padding-block: ${({ theme }) => theme.spaces[2]};\n\n    > span:first-child {\n      margin-top: 2px;\n    }\n  }\n`;\n\nexport { AddComponentMenuContent };\nexport type { AddComponentMenuContentProps };\n"],"names":["AddComponentMenuContent","kind","onAddEmpty","onCopy","formatMessage","useIntl","_jsxs","MenuContent","minWidth","maxHeight","popoverPlacement","_jsx","Menu","Item","onSelect","startIcon","Plus","Flex","tag","direction","alignItems","Typography","fontWeight","textColor","id","getTranslation","defaultMessage","variant","Duplicate","styled","Content","theme","spaces"],"mappings":";;;;;;;;AAkBA;;;IAIA,MAAMA,0BAA0B,CAAC,EAAEC,IAAI,EAAEC,UAAU,EAAEC,MAAM,EAAgC,GAAA;IACzF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,IAAA,CAACC,WAAAA,EAAAA;QAAYC,QAAAA,EAAS,OAAA;QAAQC,SAAAA,EAAU,MAAA;QAAOC,gBAAAA,EAAiB,eAAA;;AAC9D,0BAAAC,GAAA,CAACC,KAAKC,IAAI,EAAA;gBAACC,QAAAA,EAAUZ,UAAAA;AAAYa,gBAAAA,SAAAA,gBAAWJ,GAAA,CAACK,IAAAA,EAAAA,EAAAA,CAAAA;AAC3C,gBAAA,QAAA,gBAAAV,IAAA,CAACW,IAAAA,EAAAA;oBAAKC,GAAAA,EAAI,MAAA;oBAAOC,SAAAA,EAAU,QAAA;oBAASC,UAAAA,EAAW,YAAA;;sCAC7CT,GAAA,CAACU,UAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOI,UAAAA,EAAW,MAAA;4BAAOC,SAAAA,EAAU,YAAA;AAChDtB,4BAAAA,QAAAA,EAAAA,IAAAA,KAAS,UACNG,aAAAA,CAAc;AACZoB,gCAAAA,EAAAA,EAAIC,cAAAA,CAAe,yCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA,CAAA,GACAtB,aAAAA,CAAc;AACZoB,gCAAAA,EAAAA,EAAIC,cAAAA,CAAe,6CAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;sCAENf,GAAA,CAACU,UAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOS,OAAAA,EAAQ,IAAA;4BAAKJ,SAAAA,EAAU,YAAA;sCAC3CnB,aAAAA,CAAc;AACboB,gCAAAA,EAAAA,EAAIC,cAAAA,CAAe,wCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;;;;AAIN,0BAAAf,GAAA,CAACC,KAAKC,IAAI,EAAA;gBAACC,QAAAA,EAAUX,MAAAA;AAAQY,gBAAAA,SAAAA,gBAAWJ,GAAA,CAACiB,SAAAA,EAAAA,EAAAA,CAAAA;AACvC,gBAAA,QAAA,gBAAAtB,IAAA,CAACW,IAAAA,EAAAA;oBAAKC,GAAAA,EAAI,MAAA;oBAAOC,SAAAA,EAAU,QAAA;oBAASC,UAAAA,EAAW,YAAA;;sCAC7CT,GAAA,CAACU,UAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOI,UAAAA,EAAW,MAAA;4BAAOC,SAAAA,EAAU,YAAA;sCAChDnB,aAAAA,CAAc;AACboB,gCAAAA,EAAAA,EAAIC,cAAAA,CAAe,kCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;sCAEFf,GAAA,CAACU,UAAAA,EAAAA;4BAAWH,GAAAA,EAAI,MAAA;4BAAOS,OAAAA,EAAQ,IAAA;4BAAKJ,SAAAA,EAAU,YAAA;sCAC3CnB,aAAAA,CAAc;AACboB,gCAAAA,EAAAA,EAAIC,cAAAA,CAAe,uCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAMZ;AAEA,MAAMnB,WAAAA,GAAcsB,MAAAA,CAAOjB,IAAAA,CAAKkB,OAAO,CAAC;;;;mBAIrB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMpD,CAAC;;;;"}