@strapi/content-type-builder 5.13.1 → 5.14.0

package/dist/admin/components/DynamicZoneList.mjs

@@ -1,38 +1,35 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, createElement } from 'react';
-import { Box, Flex, Typography } from '@strapi/design-system';
+import { useState } from 'react';
+import { Flex, Box, Typography } from '@strapi/design-system';
 import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
-import { useDataManager } from '../hooks/useDataManager.mjs';
 import { getTrad } from '../utils/getTrad.mjs';
 import { ComponentCard } from './ComponentCard/ComponentCard.mjs';
 import { ComponentList } from './ComponentList.mjs';
-import { Tr } from './Tr.mjs';
+import { ComponentRow } from './ComponentRow.mjs';
+import { useDataManager } from './DataManager/useDataManager.mjs';
 
 const StyledAddIcon = styled(Plus)`
   width: 3.2rem;
   height: 3.2rem;
   padding: 0.9rem;
   border-radius: 6.4rem;
-  background: ${({ theme })=>theme.colors.primary100};
+  background: ${({ theme, disabled })=>disabled ? theme.colors.neutral100 : theme.colors.primary100};
   path {
-    fill: ${({ theme })=>theme.colors.primary600};
+    fill: ${({ theme, disabled })=>disabled ? theme.colors.neutral600 : theme.colors.primary600};
   }
 `;
-const FixedBox = styled(Box)`
-  height: 9rem;
-  position: absolute;
-  width: 100%;
-  top: 0;
-  left: 0;
-`;
 const ScrollableStack = styled(Flex)`
   width: 100%;
   overflow-x: auto;
-`;
-const ComponentContentBox = styled(Box)`
-  padding-top: 9rem;
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 const ComponentStack = styled(Flex)`
   flex-shrink: 0;
@@ -41,7 +38,7 @@ const ComponentStack = styled(Flex)`
   justify-content: center;
   align-items: center;
 `;
-const DynamicZoneList = ({ customRowComponent, components = [], addComponent, name, targetUid })=>{
+const DynamicZoneList = ({ components = [], addComponent, name, forTarget, targetUid, disabled = false })=>{
     const { isInDevelopmentMode } = useDataManager();
     const [activeTab, setActiveTab] = useState(0);
     const { formatMessage } = useIntl();
@@ -53,30 +50,36 @@ const DynamicZoneList = ({ customRowComponent, components = [], addComponent, na
     const handleClickAdd = ()=>{
         addComponent(name);
     };
-    return /*#__PURE__*/ jsx(Tr, {
+    return /*#__PURE__*/ jsx(ComponentRow, {
         className: "dynamiczone-row",
         $isFromDynamicZone: true,
-        children: /*#__PURE__*/ jsxs("td", {
-            colSpan: 12,
+        children: /*#__PURE__*/ jsxs(Box, {
             children: [
-                /*#__PURE__*/ jsx(FixedBox, {
-                    paddingLeft: 8,
+                /*#__PURE__*/ jsx(Box, {
+                    padding: 2,
+                    paddingLeft: "104px",
                     children: /*#__PURE__*/ jsxs(ScrollableStack, {
                         gap: 2,
                         children: [
                             isInDevelopmentMode && /*#__PURE__*/ jsx("button", {
                                 type: "button",
                                 onClick: handleClickAdd,
+                                disabled: disabled,
+                                style: {
+                                    cursor: disabled ? 'not-allowed' : 'pointer'
+                                },
                                 children: /*#__PURE__*/ jsxs(ComponentStack, {
                                     direction: "column",
                                     alignItems: "stretch",
                                     gap: 1,
                                     children: [
-                                        /*#__PURE__*/ jsx(StyledAddIcon, {}),
+                                        /*#__PURE__*/ jsx(StyledAddIcon, {
+                                            disabled: disabled
+                                        }),
                                         /*#__PURE__*/ jsx(Typography, {
                                             variant: "pi",
                                             fontWeight: "bold",
-                                            textColor: "primary600",
+                                            textColor: disabled ? 'neutral600' : 'primary600',
                                             children: formatMessage({
                                                 id: getTrad('button.component.add'),
                                                 defaultMessage: 'Add a component'
@@ -95,19 +98,18 @@ const DynamicZoneList = ({ customRowComponent, components = [], addComponent, na
                                         component: component,
                                         isActive: activeTab === index,
                                         isInDevelopmentMode: isInDevelopmentMode,
-                                        onClick: ()=>toggle(index)
+                                        onClick: ()=>toggle(index),
+                                        forTarget: forTarget,
+                                        targetUid: targetUid,
+                                        disabled: disabled
                                     }, component);
                                 })
                             })
                         ]
                     })
                 }),
-                /*#__PURE__*/ jsx(ComponentContentBox, {
+                /*#__PURE__*/ jsx(Box, {
                     children: components.map((component, index)=>{
-                        const props = {
-                            customRowComponent,
-                            component
-                        };
                         return /*#__PURE__*/ jsx(Box, {
                             id: `dz-${name}-panel-${index}`,
                             role: "tabpanel",
@@ -115,16 +117,10 @@ const DynamicZoneList = ({ customRowComponent, components = [], addComponent, na
                             style: {
                                 display: activeTab === index ? 'block' : 'none'
                             },
-                            children: /*#__PURE__*/ jsx("table", {
-                                children: /*#__PURE__*/ jsx("tbody", {
-                                    children: /*#__PURE__*/ createElement(ComponentList, {
-                                        ...props,
-                                        isFromDynamicZone: true,
-                                        component: targetUid,
-                                        key: component
-                                    })
-                                })
-                            })
+                            children: /*#__PURE__*/ jsx(ComponentList, {
+                                isFromDynamicZone: true,
+                                component: component
+                            }, component)
                         }, component);
                     })
                 })

package/dist/admin/components/DynamicZoneList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicZoneList.mjs","sources":["../../../admin/src/components/DynamicZoneList.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getTrad } from '../utils/getTrad';\n\nimport { ComponentCard } from './ComponentCard';\nimport { ComponentList } from './ComponentList';\nimport { Tr } from './Tr';\n\nimport type { Internal } from '@strapi/types';\n\ninterface DynamicZoneListProps {\n  addComponent: (name?: string) => void;\n  components: Array<string>;\n  customRowComponent?: () => void;\n  name?: string;\n  targetUid: Internal.UID.Component;\n}\n\nconst StyledAddIcon = styled(Plus)`\n  width: 3.2rem;\n  height: 3.2rem;\n  padding: 0.9rem;\n  border-radius: 6.4rem;\n  background: ${({ theme }) => theme.colors.primary100};\n  path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nconst FixedBox = styled(Box)`\n  height: 9rem;\n  position: absolute;\n  width: 100%;\n  top: 0;\n  left: 0;\n`;\n\nconst ScrollableStack = styled(Flex)`\n  width: 100%;\n  overflow-x: auto;\n`;\n\nconst ComponentContentBox = styled(Box)`\n  padding-top: 9rem;\n`;\n\nconst ComponentStack = styled(Flex)`\n  flex-shrink: 0;\n  width: 14rem;\n  height: 8rem;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DynamicZoneList = ({\n  customRowComponent,\n  components = [],\n  addComponent,\n  name,\n  targetUid,\n}: DynamicZoneListProps) => {\n  const { isInDevelopmentMode } = useDataManager();\n  const [activeTab, setActiveTab] = useState(0);\n  const { formatMessage } = useIntl();\n\n  const toggle = (tab: number) => {\n    if (activeTab !== tab) {\n      setActiveTab(tab);\n    }\n  };\n\n  const handleClickAdd = () => {\n    addComponent(name);\n  };\n\n  return (\n    <Tr className=\"dynamiczone-row\" $isFromDynamicZone>\n      <td colSpan={12}>\n        <FixedBox paddingLeft={8}>\n          <ScrollableStack gap={2}>\n            {isInDevelopmentMode && (\n              <button type=\"button\" onClick={handleClickAdd}>\n                <ComponentStack direction=\"column\" alignItems=\"stretch\" gap={1}>\n                  <StyledAddIcon />\n                  <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"primary600\">\n                    {formatMessage({\n                      id: getTrad('button.component.add'),\n                      defaultMessage: 'Add a component',\n                    })}\n                  </Typography>\n                </ComponentStack>\n              </button>\n            )}\n            <Flex role=\"tablist\" gap={2}>\n              {components.map((component, index) => {\n                return (\n                  <ComponentCard\n                    key={component}\n                    dzName={name || ''}\n                    index={index}\n                    component={component}\n                    isActive={activeTab === index}\n                    isInDevelopmentMode={isInDevelopmentMode}\n                    onClick={() => toggle(index)}\n                  />\n                );\n              })}\n            </Flex>\n          </ScrollableStack>\n        </FixedBox>\n        <ComponentContentBox>\n          {components.map((component, index) => {\n            const props = {\n              customRowComponent,\n              component,\n            };\n\n            return (\n              <Box\n                id={`dz-${name}-panel-${index}`}\n                role=\"tabpanel\"\n                aria-labelledby={`dz-${name}-tab-${index}`}\n                key={component}\n                style={{ display: activeTab === index ? 'block' : 'none' }}\n              >\n                <table>\n                  <tbody>\n                    <ComponentList\n                      {...props}\n                      isFromDynamicZone\n                      component={targetUid}\n                      key={component}\n                    />\n                  </tbody>\n                </table>\n              </Box>\n            );\n          })}\n        </ComponentContentBox>\n      </td>\n    </Tr>\n  );\n};\n"],"names":["StyledAddIcon","styled","Plus","theme","colors","primary100","primary600","FixedBox","Box","ScrollableStack","Flex","ComponentContentBox","ComponentStack","DynamicZoneList","customRowComponent","components","addComponent","name","targetUid","isInDevelopmentMode","useDataManager","activeTab","setActiveTab","useState","formatMessage","useIntl","toggle","tab","handleClickAdd","_jsx","Tr","className","$isFromDynamicZone","_jsxs","td","colSpan","paddingLeft","gap","button","type","onClick","direction","alignItems","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","role","map","component","index","ComponentCard","dzName","isActive","props","aria-labelledby","style","display","table","tbody","_createElement","ComponentList","isFromDynamicZone","key"],"mappings":"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"}
+{"version":3,"file":"DynamicZoneList.mjs","sources":["../../../admin/src/components/DynamicZoneList.tsx"],"sourcesContent":["import { ComponentType, useState } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nimport { ComponentCard } from './ComponentCard';\nimport { ComponentList } from './ComponentList';\nimport { ComponentRow } from './ComponentRow';\nimport { useDataManager } from './DataManager/useDataManager';\n\nimport type { Internal, Struct } from '@strapi/types';\n\ninterface DynamicZoneListProps {\n  addComponent: (name?: string) => void;\n  components: Array<Internal.UID.Component>;\n  customRowComponent?: ComponentType<any>;\n  name?: string;\n  forTarget: Struct.ModelType;\n  targetUid: Internal.UID.Schema;\n  disabled?: boolean;\n}\n\nconst StyledAddIcon = styled(Plus)<{ disabled?: boolean }>`\n  width: 3.2rem;\n  height: 3.2rem;\n  padding: 0.9rem;\n  border-radius: 6.4rem;\n  background: ${({ theme, disabled }) =>\n    disabled ? theme.colors.neutral100 : theme.colors.primary100};\n  path {\n    fill: ${({ theme, disabled }) =>\n      disabled ? theme.colors.neutral600 : theme.colors.primary600};\n  }\n`;\n\nconst ScrollableStack = styled(Flex)`\n  width: 100%;\n  overflow-x: auto;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ComponentStack = styled(Flex)`\n  flex-shrink: 0;\n  width: 14rem;\n  height: 8rem;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DynamicZoneList = ({\n  components = [],\n  addComponent,\n  name,\n  forTarget,\n  targetUid,\n  disabled = false,\n}: DynamicZoneListProps) => {\n  const { isInDevelopmentMode } = useDataManager();\n  const [activeTab, setActiveTab] = useState(0);\n  const { formatMessage } = useIntl();\n\n  const toggle = (tab: number) => {\n    if (activeTab !== tab) {\n      setActiveTab(tab);\n    }\n  };\n\n  const handleClickAdd = () => {\n    addComponent(name);\n  };\n\n  return (\n    <ComponentRow className=\"dynamiczone-row\" $isFromDynamicZone>\n      <Box>\n        <Box padding={2} paddingLeft=\"104px\">\n          <ScrollableStack gap={2}>\n            {isInDevelopmentMode && (\n              <button\n                type=\"button\"\n                onClick={handleClickAdd}\n                disabled={disabled}\n                style={{\n                  cursor: disabled ? 'not-allowed' : 'pointer',\n                }}\n              >\n                <ComponentStack direction=\"column\" alignItems=\"stretch\" gap={1}>\n                  <StyledAddIcon disabled={disabled} />\n                  <Typography\n                    variant=\"pi\"\n                    fontWeight=\"bold\"\n                    textColor={disabled ? 'neutral600' : 'primary600'}\n                  >\n                    {formatMessage({\n                      id: getTrad('button.component.add'),\n                      defaultMessage: 'Add a component',\n                    })}\n                  </Typography>\n                </ComponentStack>\n              </button>\n            )}\n            <Flex role=\"tablist\" gap={2}>\n              {components.map((component, index) => {\n                return (\n                  <ComponentCard\n                    key={component}\n                    dzName={name || ''}\n                    index={index}\n                    component={component}\n                    isActive={activeTab === index}\n                    isInDevelopmentMode={isInDevelopmentMode}\n                    onClick={() => toggle(index)}\n                    forTarget={forTarget}\n                    targetUid={targetUid}\n                    disabled={disabled}\n                  />\n                );\n              })}\n            </Flex>\n          </ScrollableStack>\n        </Box>\n        <Box>\n          {components.map((component, index) => {\n            return (\n              <Box\n                id={`dz-${name}-panel-${index}`}\n                role=\"tabpanel\"\n                aria-labelledby={`dz-${name}-tab-${index}`}\n                key={component}\n                style={{ display: activeTab === index ? 'block' : 'none' }}\n              >\n                <ComponentList isFromDynamicZone component={component} key={component} />\n              </Box>\n            );\n          })}\n        </Box>\n      </Box>\n    </ComponentRow>\n  );\n};\n"],"names":["StyledAddIcon","styled","Plus","theme","disabled","colors","neutral100","primary100","neutral600","primary600","ScrollableStack","Flex","ComponentStack","DynamicZoneList","components","addComponent","name","forTarget","targetUid","isInDevelopmentMode","useDataManager","activeTab","setActiveTab","useState","formatMessage","useIntl","toggle","tab","handleClickAdd","_jsx","ComponentRow","className","$isFromDynamicZone","_jsxs","Box","padding","paddingLeft","gap","button","type","onClick","style","cursor","direction","alignItems","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","role","map","component","index","ComponentCard","dzName","isActive","aria-labelledby","display","ComponentList","isFromDynamicZone"],"mappings":"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"}

package/dist/admin/components/ExitPrompt.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var useDataManager = require('./DataManager/useDataManager.js');
+var getTrad = require('../utils/getTrad.js');
+
+const ExitPrompt = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { isModified, isSaving } = useDataManager.useDataManager();
+    const confirmationMessage = formatMessage({
+        id: getTrad.getTrad('prompt.unsaved'),
+        defaultMessage: 'Are you sure you want to leave? All your modifications will be lost.'
+    });
+    const blocker = reactRouterDom.useBlocker((ctx)=>{
+        return ctx.currentLocation.pathname.startsWith('/plugins/content-type-builder/') && !ctx.nextLocation.pathname.startsWith('/plugins/content-type-builder/') && isModified;
+    });
+    React.useEffect(()=>{
+        const handleBeforeUnload = (event)=>{
+            if (isModified && !isSaving) {
+                event.preventDefault();
+                event.returnValue = '';
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return ()=>window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, [
+        confirmationMessage,
+        isModified,
+        isSaving
+    ]);
+    if (blocker.state === 'blocked') {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+            open: true,
+            onOpenChange: ()=>blocker.reset(),
+            children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
+                onConfirm: ()=>blocker.proceed(),
+                children: confirmationMessage
+            })
+        });
+    }
+    return null;
+};
+
+exports.ExitPrompt = ExitPrompt;
+//# sourceMappingURL=ExitPrompt.js.map

package/dist/admin/components/ExitPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExitPrompt.js","sources":["../../../admin/src/components/ExitPrompt.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Dialog } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useBlocker } from 'react-router-dom';\n\nimport { useDataManager } from '../components/DataManager/useDataManager';\nimport { getTrad } from '../utils/getTrad';\n\nexport const ExitPrompt = () => {\n  const { formatMessage } = useIntl();\n  const { isModified, isSaving } = useDataManager();\n\n  const confirmationMessage = formatMessage({\n    id: getTrad('prompt.unsaved'),\n    defaultMessage: 'Are you sure you want to leave? All your modifications will be lost.',\n  });\n\n  const blocker = useBlocker((ctx) => {\n    return (\n      ctx.currentLocation.pathname.startsWith('/plugins/content-type-builder/') &&\n      !ctx.nextLocation.pathname.startsWith('/plugins/content-type-builder/') &&\n      isModified\n    );\n  });\n\n  useEffect(() => {\n    const handleBeforeUnload = (event: BeforeUnloadEvent) => {\n      if (isModified && !isSaving) {\n        event.preventDefault();\n        event.returnValue = '';\n      }\n    };\n\n    window.addEventListener('beforeunload', handleBeforeUnload);\n    return () => window.removeEventListener('beforeunload', handleBeforeUnload);\n  }, [confirmationMessage, isModified, isSaving]);\n\n  if (blocker.state === 'blocked') {\n    return (\n      <Dialog.Root open onOpenChange={() => blocker.reset()}>\n        <ConfirmDialog onConfirm={() => blocker.proceed()}>{confirmationMessage}</ConfirmDialog>\n      </Dialog.Root>\n    );\n  }\n\n  return null;\n};\n"],"names":["ExitPrompt","formatMessage","useIntl","isModified","isSaving","useDataManager","confirmationMessage","id","getTrad","defaultMessage","blocker","useBlocker","ctx","currentLocation","pathname","startsWith","nextLocation","useEffect","handleBeforeUnload","event","preventDefault","returnValue","window","addEventListener","removeEventListener","state","_jsx","Dialog","Root","open","onOpenChange","reset","ConfirmDialog","onConfirm","proceed"],"mappings":";;;;;;;;;;;MAUaA,UAAa,GAAA,IAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGC,6BAAAA,EAAAA;AAEjC,IAAA,MAAMC,sBAAsBL,aAAc,CAAA;AACxCM,QAAAA,EAAAA,EAAIC,eAAQ,CAAA,gBAAA,CAAA;QACZC,cAAgB,EAAA;AAClB,KAAA,CAAA;IAEA,MAAMC,OAAAA,GAAUC,0BAAW,CAACC,GAAAA,GAAAA;AAC1B,QAAA,OACEA,IAAIC,eAAe,CAACC,QAAQ,CAACC,UAAU,CAAC,gCAAA,CAAA,IACxC,CAACH,GAAAA,CAAII,YAAY,CAACF,QAAQ,CAACC,UAAU,CAAC,gCACtCZ,CAAAA,IAAAA,UAAAA;AAEJ,KAAA,CAAA;IAEAc,eAAU,CAAA,IAAA;AACR,QAAA,MAAMC,qBAAqB,CAACC,KAAAA,GAAAA;YAC1B,IAAIhB,UAAAA,IAAc,CAACC,QAAU,EAAA;AAC3Be,gBAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBD,gBAAAA,KAAAA,CAAME,WAAW,GAAG,EAAA;AACtB;AACF,SAAA;QAEAC,MAAOC,CAAAA,gBAAgB,CAAC,cAAgBL,EAAAA,kBAAAA,CAAAA;AACxC,QAAA,OAAO,IAAMI,MAAAA,CAAOE,mBAAmB,CAAC,cAAgBN,EAAAA,kBAAAA,CAAAA;KACvD,EAAA;AAACZ,QAAAA,mBAAAA;AAAqBH,QAAAA,UAAAA;AAAYC,QAAAA;AAAS,KAAA,CAAA;IAE9C,IAAIM,OAAAA,CAAQe,KAAK,KAAK,SAAW,EAAA;QAC/B,qBACEC,cAAA,CAACC,oBAAOC,IAAI,EAAA;YAACC,IAAI,EAAA,IAAA;YAACC,YAAc,EAAA,IAAMpB,QAAQqB,KAAK,EAAA;AACjD,YAAA,QAAA,gBAAAL,cAACM,CAAAA,yBAAAA,EAAAA;gBAAcC,SAAW,EAAA,IAAMvB,QAAQwB,OAAO,EAAA;AAAK5B,gBAAAA,QAAAA,EAAAA;;;AAG1D;IAEA,OAAO,IAAA;AACT;;;;"}

package/dist/admin/components/ExitPrompt.mjs

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { ConfirmDialog } from '@strapi/admin/strapi-admin';
+import { Dialog } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useBlocker } from 'react-router-dom';
+import { useDataManager } from './DataManager/useDataManager.mjs';
+import { getTrad } from '../utils/getTrad.mjs';
+
+const ExitPrompt = ()=>{
+    const { formatMessage } = useIntl();
+    const { isModified, isSaving } = useDataManager();
+    const confirmationMessage = formatMessage({
+        id: getTrad('prompt.unsaved'),
+        defaultMessage: 'Are you sure you want to leave? All your modifications will be lost.'
+    });
+    const blocker = useBlocker((ctx)=>{
+        return ctx.currentLocation.pathname.startsWith('/plugins/content-type-builder/') && !ctx.nextLocation.pathname.startsWith('/plugins/content-type-builder/') && isModified;
+    });
+    useEffect(()=>{
+        const handleBeforeUnload = (event)=>{
+            if (isModified && !isSaving) {
+                event.preventDefault();
+                event.returnValue = '';
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return ()=>window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, [
+        confirmationMessage,
+        isModified,
+        isSaving
+    ]);
+    if (blocker.state === 'blocked') {
+        return /*#__PURE__*/ jsx(Dialog.Root, {
+            open: true,
+            onOpenChange: ()=>blocker.reset(),
+            children: /*#__PURE__*/ jsx(ConfirmDialog, {
+                onConfirm: ()=>blocker.proceed(),
+                children: confirmationMessage
+            })
+        });
+    }
+    return null;
+};
+
+export { ExitPrompt };
+//# sourceMappingURL=ExitPrompt.mjs.map

package/dist/admin/components/ExitPrompt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExitPrompt.mjs","sources":["../../../admin/src/components/ExitPrompt.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Dialog } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useBlocker } from 'react-router-dom';\n\nimport { useDataManager } from '../components/DataManager/useDataManager';\nimport { getTrad } from '../utils/getTrad';\n\nexport const ExitPrompt = () => {\n  const { formatMessage } = useIntl();\n  const { isModified, isSaving } = useDataManager();\n\n  const confirmationMessage = formatMessage({\n    id: getTrad('prompt.unsaved'),\n    defaultMessage: 'Are you sure you want to leave? All your modifications will be lost.',\n  });\n\n  const blocker = useBlocker((ctx) => {\n    return (\n      ctx.currentLocation.pathname.startsWith('/plugins/content-type-builder/') &&\n      !ctx.nextLocation.pathname.startsWith('/plugins/content-type-builder/') &&\n      isModified\n    );\n  });\n\n  useEffect(() => {\n    const handleBeforeUnload = (event: BeforeUnloadEvent) => {\n      if (isModified && !isSaving) {\n        event.preventDefault();\n        event.returnValue = '';\n      }\n    };\n\n    window.addEventListener('beforeunload', handleBeforeUnload);\n    return () => window.removeEventListener('beforeunload', handleBeforeUnload);\n  }, [confirmationMessage, isModified, isSaving]);\n\n  if (blocker.state === 'blocked') {\n    return (\n      <Dialog.Root open onOpenChange={() => blocker.reset()}>\n        <ConfirmDialog onConfirm={() => blocker.proceed()}>{confirmationMessage}</ConfirmDialog>\n      </Dialog.Root>\n    );\n  }\n\n  return null;\n};\n"],"names":["ExitPrompt","formatMessage","useIntl","isModified","isSaving","useDataManager","confirmationMessage","id","getTrad","defaultMessage","blocker","useBlocker","ctx","currentLocation","pathname","startsWith","nextLocation","useEffect","handleBeforeUnload","event","preventDefault","returnValue","window","addEventListener","removeEventListener","state","_jsx","Dialog","Root","open","onOpenChange","reset","ConfirmDialog","onConfirm","proceed"],"mappings":";;;;;;;;;MAUaA,UAAa,GAAA,IAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGC,cAAAA,EAAAA;AAEjC,IAAA,MAAMC,sBAAsBL,aAAc,CAAA;AACxCM,QAAAA,EAAAA,EAAIC,OAAQ,CAAA,gBAAA,CAAA;QACZC,cAAgB,EAAA;AAClB,KAAA,CAAA;IAEA,MAAMC,OAAAA,GAAUC,WAAW,CAACC,GAAAA,GAAAA;AAC1B,QAAA,OACEA,IAAIC,eAAe,CAACC,QAAQ,CAACC,UAAU,CAAC,gCAAA,CAAA,IACxC,CAACH,GAAAA,CAAII,YAAY,CAACF,QAAQ,CAACC,UAAU,CAAC,gCACtCZ,CAAAA,IAAAA,UAAAA;AAEJ,KAAA,CAAA;IAEAc,SAAU,CAAA,IAAA;AACR,QAAA,MAAMC,qBAAqB,CAACC,KAAAA,GAAAA;YAC1B,IAAIhB,UAAAA,IAAc,CAACC,QAAU,EAAA;AAC3Be,gBAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBD,gBAAAA,KAAAA,CAAME,WAAW,GAAG,EAAA;AACtB;AACF,SAAA;QAEAC,MAAOC,CAAAA,gBAAgB,CAAC,cAAgBL,EAAAA,kBAAAA,CAAAA;AACxC,QAAA,OAAO,IAAMI,MAAAA,CAAOE,mBAAmB,CAAC,cAAgBN,EAAAA,kBAAAA,CAAAA;KACvD,EAAA;AAACZ,QAAAA,mBAAAA;AAAqBH,QAAAA,UAAAA;AAAYC,QAAAA;AAAS,KAAA,CAAA;IAE9C,IAAIM,OAAAA,CAAQe,KAAK,KAAK,SAAW,EAAA;QAC/B,qBACEC,GAAA,CAACC,OAAOC,IAAI,EAAA;YAACC,IAAI,EAAA,IAAA;YAACC,YAAc,EAAA,IAAMpB,QAAQqB,KAAK,EAAA;AACjD,YAAA,QAAA,gBAAAL,GAACM,CAAAA,aAAAA,EAAAA;gBAAcC,SAAW,EAAA,IAAMvB,QAAQwB,OAAO,EAAA;AAAK5B,gBAAAA,QAAAA,EAAAA;;;AAG1D;IAEA,OAAO,IAAA;AACT;;;;"}

package/dist/admin/components/{NestedFooter.js → Footers.js}

@@ -27,12 +27,12 @@ const ButtonBox = styledComponents.styled(designSystem.Box)`
   width: 100%;
   border: none;
   position: relative;
-  left: -0.4rem;
 `;
 const NestedTFooter = ({ children, icon, color, ...props })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(ButtonBox, {
         paddingBottom: 4,
         paddingTop: 4,
+        paddingLeft: "6rem",
         tag: "button",
         type: "button",
         ...props,
@@ -57,6 +57,39 @@ const NestedTFooter = ({ children, icon, color, ...props })=>{
         })
     });
 };
+const TFooter = ({ children, icon, color, ...props })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(ButtonBox, {
+                tag: "button",
+                background: `${color}100`,
+                padding: 5,
+                ...props,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+                            color: color,
+                            "aria-hidden": true,
+                            background: `${color}200`,
+                            children: icon
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            paddingLeft: 3,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "pi",
+                                fontWeight: "bold",
+                                textColor: `${color}600`,
+                                children: children
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
 
 exports.NestedTFooter = NestedTFooter;
-//# sourceMappingURL=NestedFooter.js.map
+exports.TFooter = TFooter;
+//# sourceMappingURL=Footers.js.map

package/dist/admin/components/Footers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footers.js","sources":["../../../admin/src/components/Footers.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Divider, Flex, TFooterProps, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n  height: 2.4rem;\n  width: 2.4rem;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    height: 1rem;\n    width: 1rem;\n  }\n\n  svg path {\n    fill: ${({ theme, color }) => theme.colors[`${color}600`]};\n  }\n`;\n\nconst ButtonBox = styled(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n  display: block;\n  width: 100%;\n  border: none;\n  position: relative;\n`;\n\ninterface NestedTFooterProps extends TFooterProps {\n  color: string;\n  children: ReactNode;\n  icon: ReactNode;\n  onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n  return (\n    <ButtonBox\n      paddingBottom={4}\n      paddingTop={4}\n      paddingLeft=\"6rem\"\n      tag=\"button\"\n      type=\"button\"\n      {...props}\n    >\n      <Flex>\n        <IconBox color={color} aria-hidden background={`${color}200`}>\n          {icon}\n        </IconBox>\n        <Box paddingLeft={3}>\n          <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n            {children}\n          </Typography>\n        </Box>\n      </Flex>\n    </ButtonBox>\n  );\n};\n\nexport const TFooter = ({ children, icon, color, ...props }: TFooterProps & { color: string }) => {\n  return (\n    <div>\n      <Divider />\n      <ButtonBox tag=\"button\" background={`${color}100`} padding={5} {...props}>\n        <Flex>\n          <IconBox color={color} aria-hidden background={`${color}200`}>\n            {icon}\n          </IconBox>\n          <Box paddingLeft={3}>\n            <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n              {children}\n            </Typography>\n          </Box>\n        </Flex>\n      </ButtonBox>\n    </div>\n  );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","paddingLeft","tag","type","_jsxs","Flex","aria-hidden","background","Typography","variant","fontWeight","textColor","TFooter","div","Divider","padding"],"mappings":";;;;;;AAKA,MAAMA,OAAAA,GAAUC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,CAAC,CAAC;;AAE9D,CAAC;AAED,MAAME,SAAAA,GAAYL,uBAAOC,CAAAA,gBAAAA,CAAI;AACR,qBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMI,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;AAK9F,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAA2B,EAAA,GAAA;AACnF,IAAA,qBACEC,cAACN,CAAAA,SAAAA,EAAAA;QACCO,aAAe,EAAA,CAAA;QACfC,UAAY,EAAA,CAAA;QACZC,WAAY,EAAA,MAAA;QACZC,GAAI,EAAA,QAAA;QACJC,IAAK,EAAA,QAAA;AACJ,QAAA,GAAGN,KAAK;AAET,QAAA,QAAA,gBAAAO,eAACC,CAAAA,iBAAAA,EAAAA;;8BACCP,cAACZ,CAAAA,OAAAA,EAAAA;oBAAQI,KAAOA,EAAAA,KAAAA;oBAAOgB,aAAW,EAAA,IAAA;AAACC,oBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,oBAAAA,QAAAA,EAAAA;;8BAEHE,cAACV,CAAAA,gBAAAA,EAAAA;oBAAIa,WAAa,EAAA,CAAA;AAChB,oBAAA,QAAA,gBAAAH,cAACU,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;AAAOC,wBAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,wBAAAA,QAAAA,EAAAA;;;;;;AAMb;AAEO,MAAMiB,OAAU,GAAA,CAAC,EAAEjB,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAAyC,EAAA,GAAA;AAC3F,IAAA,qBACEO,eAACS,CAAAA,KAAAA,EAAAA;;0BACCf,cAACgB,CAAAA,oBAAAA,EAAAA,EAAAA,CAAAA;0BACDhB,cAACN,CAAAA,SAAAA,EAAAA;gBAAUU,GAAI,EAAA,QAAA;AAASK,gBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;gBAAEyB,OAAS,EAAA,CAAA;AAAI,gBAAA,GAAGlB,KAAK;AACtE,gBAAA,QAAA,gBAAAO,eAACC,CAAAA,iBAAAA,EAAAA;;sCACCP,cAACZ,CAAAA,OAAAA,EAAAA;4BAAQI,KAAOA,EAAAA,KAAAA;4BAAOgB,aAAW,EAAA,IAAA;AAACC,4BAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,4BAAAA,QAAAA,EAAAA;;sCAEHE,cAACV,CAAAA,gBAAAA,EAAAA;4BAAIa,WAAa,EAAA,CAAA;AAChB,4BAAA,QAAA,gBAAAH,cAACU,CAAAA,uBAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,UAAW,EAAA,MAAA;AAAOC,gCAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,gCAAAA,QAAAA,EAAAA;;;;;;;;AAOf;;;;;"}

package/dist/admin/components/{NestedFooter.mjs → Footers.mjs}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, Flex, Typography } from '@strapi/design-system';
+import { Box, Flex, Typography, Divider } from '@strapi/design-system';
 import { styled } from 'styled-components';
 
 const IconBox = styled(Box)`
@@ -25,12 +25,12 @@ const ButtonBox = styled(Box)`
   width: 100%;
   border: none;
   position: relative;
-  left: -0.4rem;
 `;
 const NestedTFooter = ({ children, icon, color, ...props })=>{
     return /*#__PURE__*/ jsx(ButtonBox, {
         paddingBottom: 4,
         paddingTop: 4,
+        paddingLeft: "6rem",
         tag: "button",
         type: "button",
         ...props,
@@ -55,6 +55,38 @@ const NestedTFooter = ({ children, icon, color, ...props })=>{
         })
     });
 };
+const TFooter = ({ children, icon, color, ...props })=>{
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(Divider, {}),
+            /*#__PURE__*/ jsx(ButtonBox, {
+                tag: "button",
+                background: `${color}100`,
+                padding: 5,
+                ...props,
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    children: [
+                        /*#__PURE__*/ jsx(IconBox, {
+                            color: color,
+                            "aria-hidden": true,
+                            background: `${color}200`,
+                            children: icon
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            paddingLeft: 3,
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "pi",
+                                fontWeight: "bold",
+                                textColor: `${color}600`,
+                                children: children
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
 
-export { NestedTFooter };
-//# sourceMappingURL=NestedFooter.mjs.map
+export { NestedTFooter, TFooter };
+//# sourceMappingURL=Footers.mjs.map

package/dist/admin/components/Footers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footers.mjs","sources":["../../../admin/src/components/Footers.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Divider, Flex, TFooterProps, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n  height: 2.4rem;\n  width: 2.4rem;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    height: 1rem;\n    width: 1rem;\n  }\n\n  svg path {\n    fill: ${({ theme, color }) => theme.colors[`${color}600`]};\n  }\n`;\n\nconst ButtonBox = styled(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n  display: block;\n  width: 100%;\n  border: none;\n  position: relative;\n`;\n\ninterface NestedTFooterProps extends TFooterProps {\n  color: string;\n  children: ReactNode;\n  icon: ReactNode;\n  onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n  return (\n    <ButtonBox\n      paddingBottom={4}\n      paddingTop={4}\n      paddingLeft=\"6rem\"\n      tag=\"button\"\n      type=\"button\"\n      {...props}\n    >\n      <Flex>\n        <IconBox color={color} aria-hidden background={`${color}200`}>\n          {icon}\n        </IconBox>\n        <Box paddingLeft={3}>\n          <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n            {children}\n          </Typography>\n        </Box>\n      </Flex>\n    </ButtonBox>\n  );\n};\n\nexport const TFooter = ({ children, icon, color, ...props }: TFooterProps & { color: string }) => {\n  return (\n    <div>\n      <Divider />\n      <ButtonBox tag=\"button\" background={`${color}100`} padding={5} {...props}>\n        <Flex>\n          <IconBox color={color} aria-hidden background={`${color}200`}>\n            {icon}\n          </IconBox>\n          <Box paddingLeft={3}>\n            <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n              {children}\n            </Typography>\n          </Box>\n        </Flex>\n      </ButtonBox>\n    </div>\n  );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","paddingLeft","tag","type","_jsxs","Flex","aria-hidden","background","Typography","variant","fontWeight","textColor","TFooter","div","Divider","padding"],"mappings":";;;;AAKA,MAAMA,OAAAA,GAAUC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,CAAC,CAAC;;AAE9D,CAAC;AAED,MAAME,SAAAA,GAAYL,MAAOC,CAAAA,GAAAA,CAAI;AACR,qBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMI,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;AAK9F,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAA2B,EAAA,GAAA;AACnF,IAAA,qBACEC,GAACN,CAAAA,SAAAA,EAAAA;QACCO,aAAe,EAAA,CAAA;QACfC,UAAY,EAAA,CAAA;QACZC,WAAY,EAAA,MAAA;QACZC,GAAI,EAAA,QAAA;QACJC,IAAK,EAAA,QAAA;AACJ,QAAA,GAAGN,KAAK;AAET,QAAA,QAAA,gBAAAO,IAACC,CAAAA,IAAAA,EAAAA;;8BACCP,GAACZ,CAAAA,OAAAA,EAAAA;oBAAQI,KAAOA,EAAAA,KAAAA;oBAAOgB,aAAW,EAAA,IAAA;AAACC,oBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,oBAAAA,QAAAA,EAAAA;;8BAEHE,GAACV,CAAAA,GAAAA,EAAAA;oBAAIa,WAAa,EAAA,CAAA;AAChB,oBAAA,QAAA,gBAAAH,GAACU,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;AAAOC,wBAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,wBAAAA,QAAAA,EAAAA;;;;;;AAMb;AAEO,MAAMiB,OAAU,GAAA,CAAC,EAAEjB,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAAyC,EAAA,GAAA;AAC3F,IAAA,qBACEO,IAACS,CAAAA,KAAAA,EAAAA;;0BACCf,GAACgB,CAAAA,OAAAA,EAAAA,EAAAA,CAAAA;0BACDhB,GAACN,CAAAA,SAAAA,EAAAA;gBAAUU,GAAI,EAAA,QAAA;AAASK,gBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;gBAAEyB,OAAS,EAAA,CAAA;AAAI,gBAAA,GAAGlB,KAAK;AACtE,gBAAA,QAAA,gBAAAO,IAACC,CAAAA,IAAAA,EAAAA;;sCACCP,GAACZ,CAAAA,OAAAA,EAAAA;4BAAQI,KAAOA,EAAAA,KAAAA;4BAAOgB,aAAW,EAAA,IAAA;AAACC,4BAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,4BAAAA,QAAAA,EAAAA;;sCAEHE,GAACV,CAAAA,GAAAA,EAAAA;4BAAIa,WAAa,EAAA,CAAA;AAChB,4BAAA,QAAA,gBAAAH,GAACU,CAAAA,UAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,UAAW,EAAA,MAAA;AAAOC,gCAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,gCAAAA,QAAAA,EAAAA;;;;;;;;AAOf;;;;"}