@strapi/admin 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282 → 0.0.0-experimental.63624e21eb5b0713345a0cf2f68f1c40eab427bc

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

@@ -5,6 +5,15 @@ import { WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 
+const StyledWarning = styled(WarningCircle)`
+  width: 24px;
+  height: 24px;
+
+  path {
+    fill: ${({ theme })=>theme.colors.danger600};
+  }
+`;
+const DEFAULT_ICON = /*#__PURE__*/ jsx(StyledWarning, {});
 /**
  * @beta
  * @public
@@ -36,7 +45,7 @@ import { styled } from 'styled-components';
  *  )
  * }
  * ```
- */ const ConfirmDialog = ({ children, icon = /*#__PURE__*/ jsx(StyledWarning, {}), onConfirm, onCancel, variant = 'danger-light', startAction, endAction, title })=>{
+ */ const ConfirmDialog = ({ children, icon = DEFAULT_ICON, onConfirm, onCancel, variant = 'danger-light', startAction, endAction, title })=>{
     const { formatMessage } = useIntl();
     const [isConfirming, setIsConfirming] = React.useState(false);
     const content = children || formatMessage({
@@ -101,14 +110,6 @@ import { styled } from 'styled-components';
         ]
     });
 };
-const StyledWarning = styled(WarningCircle)`
-  width: 24px;
-  height: 24px;
-
-  path {
-    fill: ${({ theme })=>theme.colors.danger600};
-  }
-`;
 
 export { ConfirmDialog };
 //# sourceMappingURL=ConfirmDialog.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.mjs","sources":["../../../../../admin/src/components/ConfirmDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, ButtonProps, Dialog } from '@strapi/design-system';\nimport { WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfirmDialog\n * -----------------------------------------------------------------------------------------------*/\ninterface ConfirmDialogProps extends Pick<ButtonProps, 'variant'>, Pick<Dialog.BodyProps, 'icon'> {\n  onConfirm?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  onCancel?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  children?: React.ReactNode;\n  endAction?: React.ReactNode;\n  startAction?: React.ReactNode;\n  title?: React.ReactNode;\n}\n\n/**\n * @beta\n * @public\n * @description A simple confirm dialog that out of the box can be used to confirm an action.\n * The component can additionally be customised if required e.g. the footer actions can be\n * completely replaced, but cannot be removed. Passing a string as the children prop will render\n * the string as the body of the dialog. If you need more control over the body, you can pass a\n * custom component as the children prop.\n * @example\n * ```tsx\n * import { Dialog } from '@strapi/design-system';\n *\n * const DeleteAction = ({ id }) => {\n *  const [isOpen, setIsOpen] = React.useState(false);\n *\n *  const [delete] = useDeleteMutation()\n *  const handleConfirm = async () => {\n *    await delete(id)\n *    setIsOpen(false)\n *  }\n *\n *  return (\n *    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>\n *      <Dialog.Trigger>\n *        <Button>Delete</Button>\n *      </Dialog.Trigger>\n *      <ConfirmDialog onConfirm={handleConfirm} />\n *    </Dialog.Root>\n *  )\n * }\n * ```\n */\nconst ConfirmDialog = ({\n  children,\n  icon = <StyledWarning />,\n  onConfirm,\n  onCancel,\n  variant = 'danger-light',\n  startAction,\n  endAction,\n  title,\n}: ConfirmDialogProps) => {\n  const { formatMessage } = useIntl();\n  const [isConfirming, setIsConfirming] = React.useState(false);\n\n  const content =\n    children ||\n    formatMessage({\n      id: 'app.confirm.body',\n      defaultMessage: 'Are you sure?',\n    });\n\n  const handleConfirm = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!onConfirm) {\n      return;\n    }\n\n    try {\n      setIsConfirming(true);\n      await onConfirm(e);\n    } finally {\n      setIsConfirming(false);\n    }\n  };\n\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        {title ||\n          formatMessage({\n            id: 'app.components.ConfirmDialog.title',\n            defaultMessage: 'Confirmation',\n          })}\n      </Dialog.Header>\n      <Dialog.Body icon={icon}>{content}</Dialog.Body>\n      <Dialog.Footer>\n        {startAction || (\n          <Dialog.Cancel>\n            <Button\n              fullWidth\n              variant=\"tertiary\"\n              onClick={(e) => {\n                e.stopPropagation();\n                if (onCancel) {\n                  onCancel(e);\n                }\n              }}\n            >\n              {formatMessage({\n                id: 'app.components.Button.cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n          </Dialog.Cancel>\n        )}\n        {endAction || (\n          <Dialog.Action>\n            <Button fullWidth onClick={handleConfirm} variant={variant} loading={isConfirming}>\n              {formatMessage({\n                id: 'app.components.Button.confirm',\n                defaultMessage: 'Confirm',\n              })}\n            </Button>\n          </Dialog.Action>\n        )}\n      </Dialog.Footer>\n    </Dialog.Content>\n  );\n};\n\nconst StyledWarning = styled(WarningCircle)`\n  width: 24px;\n  height: 24px;\n\n  path {\n    fill: ${({ theme }) => theme.colors.danger600};\n  }\n`;\n\nexport { ConfirmDialog };\nexport type { ConfirmDialogProps };\n"],"names":["ConfirmDialog","children","icon","_jsx","StyledWarning","onConfirm","onCancel","variant","startAction","endAction","title","formatMessage","useIntl","isConfirming","setIsConfirming","React","useState","content","id","defaultMessage","handleConfirm","e","_jsxs","Dialog","Content","Header","Body","Footer","Cancel","Button","fullWidth","onClick","stopPropagation","Action","loading","styled","WarningCircle","theme","colors","danger600"],"mappings":";;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCA,MAAMA,gBAAgB,CAAC,EACrBC,QAAQ,EACRC,IAAAA,iBAAOC,GAAA,CAACC,aAAAA,EAAAA,EAAAA,CAAgB,EACxBC,SAAS,EACTC,QAAQ,EACRC,UAAU,cAAc,EACxBC,WAAW,EACXC,SAAS,EACTC,KAAK,EACc,GAAA;IACnB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvD,MAAMC,OAAAA,GACJhB,YACAU,aAAAA,CAAc;QACZO,EAAAA,EAAI,kBAAA;QACJC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEF,IAAA,MAAMC,gBAAgB,OAAOC,CAAAA,GAAAA;AAC3B,QAAA,IAAI,CAAChB,SAAAA,EAAW;AACd,YAAA;AACF,QAAA;QAEA,IAAI;YACFS,eAAAA,CAAgB,IAAA,CAAA;AAChB,YAAA,MAAMT,SAAAA,CAAUgB,CAAAA,CAAAA;QAClB,CAAA,QAAU;YACRP,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;IAEA,qBACEQ,IAAA,CAACC,OAAOC,OAAO,EAAA;;AACb,0BAAArB,GAAA,CAACoB,OAAOE,MAAM,EAAA;AACXf,gBAAAA,QAAAA,EAAAA,KAAAA,IACCC,aAAAA,CAAc;oBACZO,EAAAA,EAAI,oCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA;;AAEJ,0BAAAhB,GAAA,CAACoB,OAAOG,IAAI,EAAA;gBAACxB,IAAAA,EAAMA,IAAAA;AAAOe,gBAAAA,QAAAA,EAAAA;;AAC1B,0BAAAK,IAAA,CAACC,OAAOI,MAAM,EAAA;;oBACXnB,WAAAA,kBACCL,GAAA,CAACoB,OAAOK,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAAzB,GAAA,CAAC0B,MAAAA,EAAAA;4BACCC,SAAS,EAAA,IAAA;4BACTvB,OAAAA,EAAQ,UAAA;AACRwB,4BAAAA,OAAAA,EAAS,CAACV,CAAAA,GAAAA;AACRA,gCAAAA,CAAAA,CAAEW,eAAe,EAAA;AACjB,gCAAA,IAAI1B,QAAAA,EAAU;oCACZA,QAAAA,CAASe,CAAAA,CAAAA;AACX,gCAAA;AACF,4BAAA,CAAA;sCAECV,aAAAA,CAAc;gCACbO,EAAAA,EAAI,8BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;oBAILV,SAAAA,kBACCN,GAAA,CAACoB,OAAOU,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAA9B,GAAA,CAAC0B,MAAAA,EAAAA;4BAAOC,SAAS,EAAA,IAAA;4BAACC,OAAAA,EAASX,aAAAA;4BAAeb,OAAAA,EAASA,OAAAA;4BAAS2B,OAAAA,EAASrB,YAAAA;sCAClEF,aAAAA,CAAc;gCACbO,EAAAA,EAAI,+BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAOd;AAEA,MAAMf,aAAAA,GAAgB+B,MAAAA,CAAOC,aAAAA,CAAc;;;;;UAKjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,SAAS,CAAC;;AAElD,CAAC;;;;"}
+{"version":3,"file":"ConfirmDialog.mjs","sources":["../../../../../admin/src/components/ConfirmDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, ButtonProps, Dialog } from '@strapi/design-system';\nimport { WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nconst StyledWarning = styled(WarningCircle)`\n  width: 24px;\n  height: 24px;\n\n  path {\n    fill: ${({ theme }) => theme.colors.danger600};\n  }\n`;\n\nconst DEFAULT_ICON: NonNullable<ConfirmDialogProps['icon']> = <StyledWarning />;\n\n/* -------------------------------------------------------------------------------------------------\n * ConfirmDialog\n * -----------------------------------------------------------------------------------------------*/\ninterface ConfirmDialogProps extends Pick<ButtonProps, 'variant'>, Pick<Dialog.BodyProps, 'icon'> {\n  onConfirm?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  onCancel?: (e?: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  children?: React.ReactNode;\n  endAction?: React.ReactNode;\n  startAction?: React.ReactNode;\n  title?: React.ReactNode;\n}\n\n/**\n * @beta\n * @public\n * @description A simple confirm dialog that out of the box can be used to confirm an action.\n * The component can additionally be customised if required e.g. the footer actions can be\n * completely replaced, but cannot be removed. Passing a string as the children prop will render\n * the string as the body of the dialog. If you need more control over the body, you can pass a\n * custom component as the children prop.\n * @example\n * ```tsx\n * import { Dialog } from '@strapi/design-system';\n *\n * const DeleteAction = ({ id }) => {\n *  const [isOpen, setIsOpen] = React.useState(false);\n *\n *  const [delete] = useDeleteMutation()\n *  const handleConfirm = async () => {\n *    await delete(id)\n *    setIsOpen(false)\n *  }\n *\n *  return (\n *    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>\n *      <Dialog.Trigger>\n *        <Button>Delete</Button>\n *      </Dialog.Trigger>\n *      <ConfirmDialog onConfirm={handleConfirm} />\n *    </Dialog.Root>\n *  )\n * }\n * ```\n */\nconst ConfirmDialog = ({\n  children,\n  icon = DEFAULT_ICON,\n  onConfirm,\n  onCancel,\n  variant = 'danger-light',\n  startAction,\n  endAction,\n  title,\n}: ConfirmDialogProps) => {\n  const { formatMessage } = useIntl();\n  const [isConfirming, setIsConfirming] = React.useState(false);\n\n  const content =\n    children ||\n    formatMessage({\n      id: 'app.confirm.body',\n      defaultMessage: 'Are you sure?',\n    });\n\n  const handleConfirm = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!onConfirm) {\n      return;\n    }\n\n    try {\n      setIsConfirming(true);\n      await onConfirm(e);\n    } finally {\n      setIsConfirming(false);\n    }\n  };\n\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        {title ||\n          formatMessage({\n            id: 'app.components.ConfirmDialog.title',\n            defaultMessage: 'Confirmation',\n          })}\n      </Dialog.Header>\n      <Dialog.Body icon={icon}>{content}</Dialog.Body>\n      <Dialog.Footer>\n        {startAction || (\n          <Dialog.Cancel>\n            <Button\n              fullWidth\n              variant=\"tertiary\"\n              onClick={(e) => {\n                e.stopPropagation();\n                if (onCancel) {\n                  onCancel(e);\n                }\n              }}\n            >\n              {formatMessage({\n                id: 'app.components.Button.cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n          </Dialog.Cancel>\n        )}\n        {endAction || (\n          <Dialog.Action>\n            <Button fullWidth onClick={handleConfirm} variant={variant} loading={isConfirming}>\n              {formatMessage({\n                id: 'app.components.Button.confirm',\n                defaultMessage: 'Confirm',\n              })}\n            </Button>\n          </Dialog.Action>\n        )}\n      </Dialog.Footer>\n    </Dialog.Content>\n  );\n};\n\nexport { ConfirmDialog };\nexport type { ConfirmDialogProps };\n"],"names":["StyledWarning","styled","WarningCircle","theme","colors","danger600","DEFAULT_ICON","_jsx","ConfirmDialog","children","icon","onConfirm","onCancel","variant","startAction","endAction","title","formatMessage","useIntl","isConfirming","setIsConfirming","React","useState","content","id","defaultMessage","handleConfirm","e","_jsxs","Dialog","Content","Header","Body","Footer","Cancel","Button","fullWidth","onClick","stopPropagation","Action","loading"],"mappings":";;;;;;;AAOA,MAAMA,aAAAA,GAAgBC,MAAAA,CAAOC,aAAAA,CAAc;;;;;UAKjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,SAAS,CAAC;;AAElD,CAAC;AAED,MAAMC,6BAAwDC,GAAA,CAACP,aAAAA,EAAAA,EAAAA,CAAAA;AAc/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCA,MAAMQ,gBAAgB,CAAC,EACrBC,QAAQ,EACRC,IAAAA,GAAOJ,YAAY,EACnBK,SAAS,EACTC,QAAQ,EACRC,UAAU,cAAc,EACxBC,WAAW,EACXC,SAAS,EACTC,KAAK,EACc,GAAA;IACnB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvD,MAAMC,OAAAA,GACJd,YACAQ,aAAAA,CAAc;QACZO,EAAAA,EAAI,kBAAA;QACJC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEF,IAAA,MAAMC,gBAAgB,OAAOC,CAAAA,GAAAA;AAC3B,QAAA,IAAI,CAAChB,SAAAA,EAAW;AACd,YAAA;AACF,QAAA;QAEA,IAAI;YACFS,eAAAA,CAAgB,IAAA,CAAA;AAChB,YAAA,MAAMT,SAAAA,CAAUgB,CAAAA,CAAAA;QAClB,CAAA,QAAU;YACRP,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;IAEA,qBACEQ,IAAA,CAACC,OAAOC,OAAO,EAAA;;AACb,0BAAAvB,GAAA,CAACsB,OAAOE,MAAM,EAAA;AACXf,gBAAAA,QAAAA,EAAAA,KAAAA,IACCC,aAAAA,CAAc;oBACZO,EAAAA,EAAI,oCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA;;AAEJ,0BAAAlB,GAAA,CAACsB,OAAOG,IAAI,EAAA;gBAACtB,IAAAA,EAAMA,IAAAA;AAAOa,gBAAAA,QAAAA,EAAAA;;AAC1B,0BAAAK,IAAA,CAACC,OAAOI,MAAM,EAAA;;oBACXnB,WAAAA,kBACCP,GAAA,CAACsB,OAAOK,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAA3B,GAAA,CAAC4B,MAAAA,EAAAA;4BACCC,SAAS,EAAA,IAAA;4BACTvB,OAAAA,EAAQ,UAAA;AACRwB,4BAAAA,OAAAA,EAAS,CAACV,CAAAA,GAAAA;AACRA,gCAAAA,CAAAA,CAAEW,eAAe,EAAA;AACjB,gCAAA,IAAI1B,QAAAA,EAAU;oCACZA,QAAAA,CAASe,CAAAA,CAAAA;AACX,gCAAA;AACF,4BAAA,CAAA;sCAECV,aAAAA,CAAc;gCACbO,EAAAA,EAAI,8BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;oBAILV,SAAAA,kBACCR,GAAA,CAACsB,OAAOU,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAAhC,GAAA,CAAC4B,MAAAA,EAAAA;4BAAOC,SAAS,EAAA,IAAA;4BAACC,OAAAA,EAASX,aAAAA;4BAAeb,OAAAA,EAASA,OAAAA;4BAAS2B,OAAAA,EAASrB,YAAAA;sCAClEF,aAAAA,CAAc;gCACbO,EAAAA,EAAI,+BAAA;gCACJC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAOd;;;;"}

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

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 
 const ContentBox = ({ title, subtitle, icon, iconBackground, endAction, titleEllipsis = false })=>{
     if (title && title.length > 70 && titleEllipsis) {
@@ -44,7 +44,7 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction, titleEll
         ]
     });
 };
-const IconWrapper = styled.styled(designSystem.Flex)`
+const IconWrapper = styledComponents.styled(designSystem.Flex)`
   margin-right: ${({ theme })=>theme.spaces[6]};
 
   svg {
@@ -52,7 +52,7 @@ const IconWrapper = styled.styled(designSystem.Flex)`
     height: 3.2rem;
   }
 `;
-const TypographyWordBreak = styled.styled(designSystem.Typography)`
+const TypographyWordBreak = styledComponents.styled(designSystem.Typography)`
   color: ${({ theme })=>theme.colors.neutral800};
   word-break: break-all;
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"ContentBox.js","sources":["../../../../../admin/src/components/ContentBox.tsx"],"sourcesContent":["import {\n  Flex,\n  FlexComponent,\n  FlexProps,\n  Typography,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface ContentBoxProps {\n  title?: string;\n  subtitle?: string;\n  icon?: FlexProps['children'];\n  iconBackground?: FlexProps['background'];\n  endAction?: FlexProps['children'];\n  titleEllipsis?: boolean;\n}\n\nconst ContentBox = ({\n  title,\n  subtitle,\n  icon,\n  iconBackground,\n  endAction,\n  titleEllipsis = false,\n}: ContentBoxProps) => {\n  if (title && title.length > 70 && titleEllipsis) {\n    title = `${title.substring(0, 70)}...`;\n  }\n\n  return (\n    <Flex shadow=\"tableShadow\" hasRadius padding={6} background=\"neutral0\">\n      <IconWrapper background={iconBackground} hasRadius padding={3}>\n        {icon}\n      </IconWrapper>\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={endAction ? 0 : 1}>\n        <Flex>\n          <TypographyWordBreak fontWeight=\"semiBold\" variant=\"pi\">\n            {title}\n          </TypographyWordBreak>\n          {endAction}\n        </Flex>\n        <Typography textColor=\"neutral600\">{subtitle}</Typography>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst IconWrapper = styled<FlexComponent>(Flex)`\n  margin-right: ${({ theme }) => theme.spaces[6]};\n\n  svg {\n    width: 3.2rem;\n    height: 3.2rem;\n  }\n`;\n\nconst TypographyWordBreak = styled<TypographyComponent>(Typography)`\n  color: ${({ theme }) => theme.colors.neutral800};\n  word-break: break-all;\n`;\n\nexport { ContentBox };\nexport type { ContentBoxProps };\n"],"names":["ContentBox","title","subtitle","icon","iconBackground","endAction","titleEllipsis","length","substring","_jsxs","Flex","shadow","hasRadius","padding","background","_jsx","IconWrapper","direction","alignItems","gap","TypographyWordBreak","fontWeight","variant","Typography","textColor","styled","theme","spaces","colors","neutral800"],"mappings":";;;;;;AAkBA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,SAAS,EACTC,aAAAA,GAAgB,KAAK,EACL,GAAA;AAChB,IAAA,IAAIL,KAAAA,IAASA,KAAAA,CAAMM,MAAM,GAAG,MAAMD,aAAAA,EAAe;AAC/CL,QAAAA,KAAAA,GAAQ,GAAGA,KAAAA,CAAMO,SAAS,CAAC,CAAA,EAAG,EAAA,CAAA,CAAI,GAAG,CAAC;AACxC,IAAA;AAEA,IAAA,qBACEC,eAAA,CAACC,iBAAAA,EAAAA;QAAKC,MAAAA,EAAO,aAAA;QAAcC,SAAS,EAAA,IAAA;QAACC,OAAAA,EAAS,CAAA;QAAGC,UAAAA,EAAW,UAAA;;0BAC1DC,cAAA,CAACC,WAAAA,EAAAA;gBAAYF,UAAAA,EAAYV,cAAAA;gBAAgBQ,SAAS,EAAA,IAAA;gBAACC,OAAAA,EAAS,CAAA;AACzDV,gBAAAA,QAAAA,EAAAA;;0BAEHM,eAAA,CAACC,iBAAAA,EAAAA;gBAAKO,SAAAA,EAAU,QAAA;gBAASC,UAAAA,EAAW,SAAA;AAAUC,gBAAAA,GAAAA,EAAKd,YAAY,CAAA,GAAI,CAAA;;kCACjEI,eAAA,CAACC,iBAAAA,EAAAA;;0CACCK,cAAA,CAACK,mBAAAA,EAAAA;gCAAoBC,UAAAA,EAAW,UAAA;gCAAWC,OAAAA,EAAQ,IAAA;AAChDrB,gCAAAA,QAAAA,EAAAA;;AAEFI,4BAAAA;;;kCAEHU,cAAA,CAACQ,uBAAAA,EAAAA;wBAAWC,SAAAA,EAAU,YAAA;AAActB,wBAAAA,QAAAA,EAAAA;;;;;;AAI5C;AAEA,MAAMc,WAAAA,GAAcS,aAAAA,CAAsBf,iBAAAA,CAAK;gBAC/B,EAAE,CAAC,EAAEgB,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMjD,CAAC;AAED,MAAMP,mBAAAA,GAAsBK,aAAAA,CAA4BF,uBAAAA,CAAW;SAC1D,EAAE,CAAC,EAAEG,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACC,UAAU,CAAC;;AAElD,CAAC;;;;"}
+{"version":3,"file":"ContentBox.js","sources":["../../../../../admin/src/components/ContentBox.tsx"],"sourcesContent":["import {\n  Flex,\n  FlexComponent,\n  FlexProps,\n  Typography,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface ContentBoxProps {\n  title?: string;\n  subtitle?: string;\n  icon?: FlexProps['children'];\n  iconBackground?: FlexProps['background'];\n  endAction?: FlexProps['children'];\n  titleEllipsis?: boolean;\n}\n\nconst ContentBox = ({\n  title,\n  subtitle,\n  icon,\n  iconBackground,\n  endAction,\n  titleEllipsis = false,\n}: ContentBoxProps) => {\n  if (title && title.length > 70 && titleEllipsis) {\n    title = `${title.substring(0, 70)}...`;\n  }\n\n  return (\n    <Flex shadow=\"tableShadow\" hasRadius padding={6} background=\"neutral0\">\n      <IconWrapper background={iconBackground} hasRadius padding={3}>\n        {icon}\n      </IconWrapper>\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={endAction ? 0 : 1}>\n        <Flex>\n          <TypographyWordBreak fontWeight=\"semiBold\" variant=\"pi\">\n            {title}\n          </TypographyWordBreak>\n          {endAction}\n        </Flex>\n        <Typography textColor=\"neutral600\">{subtitle}</Typography>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst IconWrapper = styled<FlexComponent>(Flex)`\n  margin-right: ${({ theme }) => theme.spaces[6]};\n\n  svg {\n    width: 3.2rem;\n    height: 3.2rem;\n  }\n`;\n\nconst TypographyWordBreak = styled<TypographyComponent>(Typography)`\n  color: ${({ theme }) => theme.colors.neutral800};\n  word-break: break-all;\n`;\n\nexport { ContentBox };\nexport type { ContentBoxProps };\n"],"names":["ContentBox","title","subtitle","icon","iconBackground","endAction","titleEllipsis","length","substring","_jsxs","Flex","shadow","hasRadius","padding","background","_jsx","IconWrapper","direction","alignItems","gap","TypographyWordBreak","fontWeight","variant","Typography","textColor","styled","theme","spaces","colors","neutral800"],"mappings":";;;;;;AAkBA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,SAAS,EACTC,aAAAA,GAAgB,KAAK,EACL,GAAA;AAChB,IAAA,IAAIL,KAAAA,IAASA,KAAAA,CAAMM,MAAM,GAAG,MAAMD,aAAAA,EAAe;AAC/CL,QAAAA,KAAAA,GAAQ,GAAGA,KAAAA,CAAMO,SAAS,CAAC,CAAA,EAAG,EAAA,CAAA,CAAI,GAAG,CAAC;AACxC,IAAA;AAEA,IAAA,qBACEC,eAAA,CAACC,iBAAAA,EAAAA;QAAKC,MAAAA,EAAO,aAAA;QAAcC,SAAS,EAAA,IAAA;QAACC,OAAAA,EAAS,CAAA;QAAGC,UAAAA,EAAW,UAAA;;0BAC1DC,cAAA,CAACC,WAAAA,EAAAA;gBAAYF,UAAAA,EAAYV,cAAAA;gBAAgBQ,SAAS,EAAA,IAAA;gBAACC,OAAAA,EAAS,CAAA;AACzDV,gBAAAA,QAAAA,EAAAA;;0BAEHM,eAAA,CAACC,iBAAAA,EAAAA;gBAAKO,SAAAA,EAAU,QAAA;gBAASC,UAAAA,EAAW,SAAA;AAAUC,gBAAAA,GAAAA,EAAKd,YAAY,CAAA,GAAI,CAAA;;kCACjEI,eAAA,CAACC,iBAAAA,EAAAA;;0CACCK,cAAA,CAACK,mBAAAA,EAAAA;gCAAoBC,UAAAA,EAAW,UAAA;gCAAWC,OAAAA,EAAQ,IAAA;AAChDrB,gCAAAA,QAAAA,EAAAA;;AAEFI,4BAAAA;;;kCAEHU,cAAA,CAACQ,uBAAAA,EAAAA;wBAAWC,SAAAA,EAAU,YAAA;AAActB,wBAAAA,QAAAA,EAAAA;;;;;;AAI5C;AAEA,MAAMc,WAAAA,GAAcS,uBAAAA,CAAsBf,iBAAAA,CAAK;gBAC/B,EAAE,CAAC,EAAEgB,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMjD,CAAC;AAED,MAAMP,mBAAAA,GAAsBK,uBAAAA,CAA4BF,uBAAAA,CAAW;SAC1D,EAAE,CAAC,EAAEG,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACC,UAAU,CAAC;;AAElD,CAAC;;;;"}

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

@@ -93,7 +93,7 @@ var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
         children: [
             descriptions.map((description)=>{
                 const key = getCompId(description);
-                return /*#__PURE__*/ jsxRuntime.jsx(Description, {
+                return /*#__PURE__*/ jsxRuntime.jsx(MemoizedDescription, {
                     id: key,
                     description: description,
                     props: props,
@@ -109,7 +109,7 @@ var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
  * this means they can use react hooks in them. It also means we need to render them
  * within a component, however because they return an object of data we can't add that
  * to the react tree, instead we push it back out to the parent.
- */ const Description = /*#__PURE__*/ React__namespace.memo(({ description, id, props, update })=>{
+ */ const Description = ({ description, id, props, update })=>{
     const comp = description(props);
     useShallowCompareEffect(()=>{
         update(id, comp);
@@ -118,16 +118,16 @@ var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
         };
     }, comp);
     return null;
-}, (prev, next)=>isEqual__default.default(prev.props, next.props));
-/* -------------------------------------------------------------------------------------------------
- * Helpers
- * -----------------------------------------------------------------------------------------------*/ const ids = new WeakMap();
+};
+const MemoizedDescription = /*#__PURE__*/ React__namespace.memo(Description, (prev, next)=>isEqual__default.default(prev.props, next.props));
+const ids = new WeakMap();
 let counter = 0;
 function getCompId(comp) {
-    const cachedId = ids.get(comp);
+    const cachedComponent = comp;
+    const cachedId = ids.get(cachedComponent);
     if (cachedId) return cachedId;
     const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;
-    ids.set(comp, id);
+    ids.set(cachedComponent, id);
     return id;
 }
 const useShallowCompareMemoize = (value)=>{

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

@@ -1 +1 @@
-{"version":3,"file":"DescriptionComponentRenderer.js","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = any, Description = any> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <Description key={key} id={key} description={description} props={props} update={update} />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = React.memo(\n  ({ description, id, props, update }: DescriptionProps<any, any>) => {\n    const comp = description(props);\n\n    useShallowCompareEffect(() => {\n      update(id, comp);\n\n      return () => {\n        update(id, null);\n      };\n    }, comp);\n\n    return null;\n  },\n  (prev, next) => isEqual(prev.props, next.props)\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\nconst ids = new WeakMap<DescriptionComponent<any, any>, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedId = ids.get(comp);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || (comp as any).displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(comp, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","Description","memo","comp","useShallowCompareEffect","prev","next","isEqual","WeakMap","counter","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}
+{"version":3,"file":"DescriptionComponentRenderer.js","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n  displayName?: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = unknown, Description = unknown> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <MemoizedDescription\n            key={key}\n            id={key}\n            description={description}\n            props={props}\n            update={update}\n          />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = <Props, Description>({\n  description,\n  id,\n  props,\n  update,\n}: DescriptionProps<Props, Description>) => {\n  const comp = description(props);\n\n  useShallowCompareEffect(() => {\n    update(id, comp);\n\n    return () => {\n      update(id, null);\n    };\n  }, comp);\n\n  return null;\n};\n\nconst MemoizedDescription = React.memo(Description, (prev, next) =>\n  isEqual(prev.props, next.props)\n) as typeof Description;\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\ntype CachedDescriptionComponent = DescriptionComponent<unknown, unknown>;\n\nconst ids = new WeakMap<CachedDescriptionComponent, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedComponent = comp as CachedDescriptionComponent;\n  const cachedId = ids.get(cachedComponent);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(cachedComponent, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","MemoizedDescription","Description","comp","useShallowCompareEffect","memo","prev","next","isEqual","WeakMap","counter","cachedComponent","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}

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

@@ -68,7 +68,7 @@ import { cancelIdleCallback as _cancelIdleCallback, requestIdleCallback as _requ
         children: [
             descriptions.map((description)=>{
                 const key = getCompId(description);
-                return /*#__PURE__*/ jsx(Description, {
+                return /*#__PURE__*/ jsx(MemoizedDescription, {
                     id: key,
                     description: description,
                     props: props,
@@ -84,7 +84,7 @@ import { cancelIdleCallback as _cancelIdleCallback, requestIdleCallback as _requ
  * this means they can use react hooks in them. It also means we need to render them
  * within a component, however because they return an object of data we can't add that
  * to the react tree, instead we push it back out to the parent.
- */ const Description = /*#__PURE__*/ React.memo(({ description, id, props, update })=>{
+ */ const Description = ({ description, id, props, update })=>{
     const comp = description(props);
     useShallowCompareEffect(()=>{
         update(id, comp);
@@ -93,16 +93,16 @@ import { cancelIdleCallback as _cancelIdleCallback, requestIdleCallback as _requ
         };
     }, comp);
     return null;
-}, (prev, next)=>isEqual(prev.props, next.props));
-/* -------------------------------------------------------------------------------------------------
- * Helpers
- * -----------------------------------------------------------------------------------------------*/ const ids = new WeakMap();
+};
+const MemoizedDescription = /*#__PURE__*/ React.memo(Description, (prev, next)=>isEqual(prev.props, next.props));
+const ids = new WeakMap();
 let counter = 0;
 function getCompId(comp) {
-    const cachedId = ids.get(comp);
+    const cachedComponent = comp;
+    const cachedId = ids.get(cachedComponent);
     if (cachedId) return cachedId;
     const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;
-    ids.set(comp, id);
+    ids.set(cachedComponent, id);
     return id;
 }
 const useShallowCompareMemoize = (value)=>{

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

@@ -1 +1 @@
-{"version":3,"file":"DescriptionComponentRenderer.mjs","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = any, Description = any> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <Description key={key} id={key} description={description} props={props} update={update} />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = React.memo(\n  ({ description, id, props, update }: DescriptionProps<any, any>) => {\n    const comp = description(props);\n\n    useShallowCompareEffect(() => {\n      update(id, comp);\n\n      return () => {\n        update(id, null);\n      };\n    }, comp);\n\n    return null;\n  },\n  (prev, next) => isEqual(prev.props, next.props)\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\nconst ids = new WeakMap<DescriptionComponent<any, any>, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedId = ids.get(comp);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || (comp as any).displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(comp, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","Description","memo","comp","useShallowCompareEffect","prev","next","isEqual","WeakMap","counter","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}
+{"version":3,"file":"DescriptionComponentRenderer.mjs","sources":["../../../../../admin/src/components/DescriptionComponentRenderer.tsx"],"sourcesContent":["/**\n * This component will render DescriptionComponents that return objects e.g. `cm.apis.addEditViewPanel`\n * these descriptions are still treated like components because users can use react hooks in them.\n *\n * Rendering them normally by mapping etc. causes mutliple render issues.\n */\n\nimport * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\n\nimport { useForceUpdate } from '../hooks/useForceUpdate';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { cancelIdleCallback, requestIdleCallback } from '../utils/shims';\n\ninterface DescriptionComponent<Props, Description> {\n  (props: Props): Description | null;\n  displayName?: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * DescriptionComponentRenderer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionComponentRendererProps<Props = unknown, Description = unknown> {\n  children: (descriptions: Array<Description & { id: string }>) => React.ReactNode;\n  descriptions: DescriptionComponent<Props, Description>[];\n  props: Props;\n}\n\n/**\n * @internal\n *\n * @description This component takes an array of DescriptionComponents, which are react components that return objects as opposed to JSX.\n * We render these in their own isolated memoized component and use an update function to push the data back out to the parent.\n * Saving it in a ref, and then \"forcing\" an update of the parent component to render the children of this component with the new data.\n *\n * The DescriptionCompoonents can take props and use react hooks hence why we render them as if they were a component. The update\n * function is throttled and managed to avoid erroneous updates where we could wait a single tick to update the entire UI, which\n * creates less \"popping\" from functions being called in rapid succession.\n */\nconst DescriptionComponentRenderer = <Props, Description>({\n  children,\n  props,\n  descriptions,\n}: DescriptionComponentRendererProps<Props, Description>) => {\n  const statesRef = React.useRef<Record<string, { value: Description & { id: string } }>>({});\n  const [tick, forceUpdate] = useForceUpdate();\n\n  const requestHandle = React.useRef<number | null>(null);\n  const requestUpdate = React.useCallback(() => {\n    if (requestHandle.current) {\n      cancelIdleCallback(requestHandle.current);\n    }\n\n    requestHandle.current = requestIdleCallback(() => {\n      requestHandle.current = null;\n\n      forceUpdate();\n    });\n  }, [forceUpdate]);\n\n  /**\n   * This will avoid us calling too many react updates in a short space of time.\n   */\n  const throttledRequestUpdate = useThrottledCallback(requestUpdate, 60, { trailing: true });\n\n  const update = React.useCallback<DescriptionProps<Props, Description>['update']>(\n    (id, description) => {\n      if (description === null) {\n        delete statesRef.current[id];\n      } else {\n        const current = statesRef.current[id];\n        statesRef.current[id] = { ...current, value: { ...description, id } };\n      }\n\n      throttledRequestUpdate();\n    },\n    [throttledRequestUpdate]\n  );\n\n  const ids = React.useMemo(\n    () => descriptions.map((description) => getCompId(description)),\n    [descriptions]\n  );\n\n  const states = React.useMemo(\n    () =>\n      ids\n        .map((id) => statesRef.current[id]?.value)\n        .filter((state) => state !== null && state !== undefined),\n    /**\n     * we leave tick in the deps to ensure the memo is recalculated when the `update` function  is called.\n     * the `ids` will most likely be stable unless we get new actions, but we can't respond to the Description\n     * Component changing the ref data in any other way.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ids, tick]\n  );\n\n  return (\n    <>\n      {descriptions.map((description) => {\n        const key = getCompId(description);\n        return (\n          <MemoizedDescription\n            key={key}\n            id={key}\n            description={description}\n            props={props}\n            update={update}\n          />\n        );\n      })}\n      {children(states)}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Description\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DescriptionProps<Props, Description> {\n  description: DescriptionComponent<Props, Description>;\n  id: string;\n  props: Props;\n  update: (id: string, value: Description | null) => void;\n}\n\n/**\n * Descriptions are objects, but to create the object, we allow users to create components,\n * this means they can use react hooks in them. It also means we need to render them\n * within a component, however because they return an object of data we can't add that\n * to the react tree, instead we push it back out to the parent.\n */\nconst Description = <Props, Description>({\n  description,\n  id,\n  props,\n  update,\n}: DescriptionProps<Props, Description>) => {\n  const comp = description(props);\n\n  useShallowCompareEffect(() => {\n    update(id, comp);\n\n    return () => {\n      update(id, null);\n    };\n  }, comp);\n\n  return null;\n};\n\nconst MemoizedDescription = React.memo(Description, (prev, next) =>\n  isEqual(prev.props, next.props)\n) as typeof Description;\n\n/* -------------------------------------------------------------------------------------------------\n * Helpers\n * -----------------------------------------------------------------------------------------------*/\n\ntype CachedDescriptionComponent = DescriptionComponent<unknown, unknown>;\n\nconst ids = new WeakMap<CachedDescriptionComponent, string>();\n\nlet counter = 0;\n\nfunction getCompId<T, K>(comp: DescriptionComponent<T, K>): string {\n  const cachedComponent = comp as CachedDescriptionComponent;\n  const cachedId = ids.get(cachedComponent);\n\n  if (cachedId) return cachedId;\n\n  const id = `${comp.name || comp.displayName || '<anonymous>'}-${counter++}`;\n\n  ids.set(cachedComponent, id);\n\n  return id;\n}\n\nconst useShallowCompareMemoize = <T,>(value: T): Array<T | undefined> => {\n  const ref = React.useRef<T | undefined>(undefined);\n\n  if (!isEqual(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return [ref.current];\n};\n\nconst useShallowCompareEffect = (callback: React.EffectCallback, dependencies?: unknown) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- the linter isn't able to see that deps are properly handled here\n  React.useEffect(callback, useShallowCompareMemoize(dependencies));\n};\n\nexport { DescriptionComponentRenderer };\nexport type { DescriptionComponentRendererProps, DescriptionComponent };\n"],"names":["DescriptionComponentRenderer","children","props","descriptions","statesRef","React","useRef","tick","forceUpdate","useForceUpdate","requestHandle","requestUpdate","useCallback","current","cancelIdleCallback","requestIdleCallback","throttledRequestUpdate","useThrottledCallback","trailing","update","id","description","value","ids","useMemo","map","getCompId","states","filter","state","undefined","_jsxs","_Fragment","key","_jsx","MemoizedDescription","Description","comp","useShallowCompareEffect","memo","prev","next","isEqual","WeakMap","counter","cachedComponent","cachedId","get","name","displayName","set","useShallowCompareMemoize","ref","callback","dependencies","useEffect"],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+var theme = require('../constants/theme.js');
+
+const BannerBackground = styledComponents.styled(designSystem.Flex)`
+  background: linear-gradient(
+    90deg,
+    ${({ theme })=>theme.colors.primary600} 0%,
+    ${({ theme })=>theme.colors.alternative600} 121.48%
+  );
+`;
+const DismissibleBanner = ({ message, action, closeLabel, onDismiss })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(BannerBackground, {
+        width: "100%",
+        justifyContent: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    justifyContent: "center",
+                    alignItems: "center",
+                    wrap: "wrap",
+                    gap: 2,
+                    flex: 1,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            children: message
+                        }),
+                        action ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            children: action
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    shrink: 0,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        withTooltip: false,
+                        label: closeLabel,
+                        onClick: onDismiss,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.DismissibleBanner = DismissibleBanner;
+//# sourceMappingURL=DismissibleBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DismissibleBanner.js","sources":["../../../../../admin/src/components/DismissibleBanner.tsx"],"sourcesContent":["import { Box, Flex, IconButton } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\n\nconst BannerBackground = styled(Flex)`\n  background: linear-gradient(\n    90deg,\n    ${({ theme }) => theme.colors.primary600} 0%,\n    ${({ theme }) => theme.colors.alternative600} 121.48%\n  );\n`;\n\ninterface DismissibleBannerProps {\n  message: React.ReactNode;\n  action?: React.ReactNode;\n  closeLabel: string;\n  onDismiss: () => void;\n}\n\nconst DismissibleBanner = ({ message, action, closeLabel, onDismiss }: DismissibleBannerProps) => {\n  return (\n    <BannerBackground width=\"100%\" justifyContent=\"center\">\n      <Flex\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        width=\"100%\"\n        paddingTop={2}\n        paddingBottom={2}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        gap={2}\n      >\n        <Flex justifyContent=\"center\" alignItems=\"center\" wrap=\"wrap\" gap={2} flex={1}>\n          <Box>{message}</Box>\n          {action ? <Box>{action}</Box> : null}\n        </Flex>\n        <Box shrink={0}>\n          <IconButton withTooltip={false} label={closeLabel} onClick={onDismiss}>\n            <Cross />\n          </IconButton>\n        </Box>\n      </Flex>\n    </BannerBackground>\n  );\n};\n\nexport { DismissibleBanner };\n"],"names":["BannerBackground","styled","Flex","theme","colors","primary600","alternative600","DismissibleBanner","message","action","closeLabel","onDismiss","_jsx","width","justifyContent","_jsxs","alignItems","paddingTop","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","gap","wrap","flex","Box","shrink","IconButton","withTooltip","label","onClick","Cross"],"mappings":";;;;;;;;AAMA,MAAMA,gBAAAA,GAAmBC,uBAAAA,CAAOC,iBAAAA,CAAK;;;IAGjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;IACzC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACE,cAAc,CAAC;;AAEjD,CAAC;AASD,MAAMC,iBAAAA,GAAoB,CAAC,EAAEC,OAAO,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAA0B,GAAA;AAC3F,IAAA,qBACEC,cAAA,CAACZ,gBAAAA,EAAAA;QAAiBa,KAAAA,EAAM,MAAA;QAAOC,cAAAA,EAAe,QAAA;AAC5C,QAAA,QAAA,gBAAAC,eAAA,CAACb,iBAAAA,EAAAA;YACCY,cAAAA,EAAe,QAAA;YACfE,UAAAA,EAAW,QAAA;YACXH,KAAAA,EAAM,MAAA;YACNI,UAAAA,EAAY,CAAA;YACZC,aAAAA,EAAe,CAAA;YACfC,WAAAA,EAAaC,gCAAAA;YACbC,YAAAA,EAAcD,gCAAAA;YACdE,GAAAA,EAAK,CAAA;;8BAELP,eAAA,CAACb,iBAAAA,EAAAA;oBAAKY,cAAAA,EAAe,QAAA;oBAASE,UAAAA,EAAW,QAAA;oBAASO,IAAAA,EAAK,MAAA;oBAAOD,GAAAA,EAAK,CAAA;oBAAGE,IAAAA,EAAM,CAAA;;sCAC1EZ,cAAA,CAACa,gBAAAA,EAAAA;AAAKjB,4BAAAA,QAAAA,EAAAA;;AACLC,wBAAAA,MAAAA,iBAASG,cAAA,CAACa,gBAAAA,EAAAA;AAAKhB,4BAAAA,QAAAA,EAAAA;AAAgB,yBAAA,CAAA,GAAA;;;8BAElCG,cAAA,CAACa,gBAAAA,EAAAA;oBAAIC,MAAAA,EAAQ,CAAA;AACX,oBAAA,QAAA,gBAAAd,cAAA,CAACe,uBAAAA,EAAAA;wBAAWC,WAAAA,EAAa,KAAA;wBAAOC,KAAAA,EAAOnB,UAAAA;wBAAYoB,OAAAA,EAASnB,SAAAA;AAC1D,wBAAA,QAAA,gBAAAC,cAAA,CAACmB,WAAAA,EAAAA,EAAAA;;;;;;AAMb;;;;"}

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

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Flex, Box, IconButton } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
+import { styled } from 'styled-components';
+import { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme.mjs';
+
+const BannerBackground = styled(Flex)`
+  background: linear-gradient(
+    90deg,
+    ${({ theme })=>theme.colors.primary600} 0%,
+    ${({ theme })=>theme.colors.alternative600} 121.48%
+  );
+`;
+const DismissibleBanner = ({ message, action, closeLabel, onDismiss })=>{
+    return /*#__PURE__*/ jsx(BannerBackground, {
+        width: "100%",
+        justifyContent: "center",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: RESPONSIVE_DEFAULT_SPACING,
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsxs(Flex, {
+                    justifyContent: "center",
+                    alignItems: "center",
+                    wrap: "wrap",
+                    gap: 2,
+                    flex: 1,
+                    children: [
+                        /*#__PURE__*/ jsx(Box, {
+                            children: message
+                        }),
+                        action ? /*#__PURE__*/ jsx(Box, {
+                            children: action
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    shrink: 0,
+                    children: /*#__PURE__*/ jsx(IconButton, {
+                        withTooltip: false,
+                        label: closeLabel,
+                        onClick: onDismiss,
+                        children: /*#__PURE__*/ jsx(Cross, {})
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { DismissibleBanner };
+//# sourceMappingURL=DismissibleBanner.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DismissibleBanner.mjs","sources":["../../../../../admin/src/components/DismissibleBanner.tsx"],"sourcesContent":["import { Box, Flex, IconButton } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\n\nconst BannerBackground = styled(Flex)`\n  background: linear-gradient(\n    90deg,\n    ${({ theme }) => theme.colors.primary600} 0%,\n    ${({ theme }) => theme.colors.alternative600} 121.48%\n  );\n`;\n\ninterface DismissibleBannerProps {\n  message: React.ReactNode;\n  action?: React.ReactNode;\n  closeLabel: string;\n  onDismiss: () => void;\n}\n\nconst DismissibleBanner = ({ message, action, closeLabel, onDismiss }: DismissibleBannerProps) => {\n  return (\n    <BannerBackground width=\"100%\" justifyContent=\"center\">\n      <Flex\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        width=\"100%\"\n        paddingTop={2}\n        paddingBottom={2}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        gap={2}\n      >\n        <Flex justifyContent=\"center\" alignItems=\"center\" wrap=\"wrap\" gap={2} flex={1}>\n          <Box>{message}</Box>\n          {action ? <Box>{action}</Box> : null}\n        </Flex>\n        <Box shrink={0}>\n          <IconButton withTooltip={false} label={closeLabel} onClick={onDismiss}>\n            <Cross />\n          </IconButton>\n        </Box>\n      </Flex>\n    </BannerBackground>\n  );\n};\n\nexport { DismissibleBanner };\n"],"names":["BannerBackground","styled","Flex","theme","colors","primary600","alternative600","DismissibleBanner","message","action","closeLabel","onDismiss","_jsx","width","justifyContent","_jsxs","alignItems","paddingTop","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","gap","wrap","flex","Box","shrink","IconButton","withTooltip","label","onClick","Cross"],"mappings":";;;;;;AAMA,MAAMA,gBAAAA,GAAmBC,MAAAA,CAAOC,IAAAA,CAAK;;;IAGjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;IACzC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACE,cAAc,CAAC;;AAEjD,CAAC;AASD,MAAMC,iBAAAA,GAAoB,CAAC,EAAEC,OAAO,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAA0B,GAAA;AAC3F,IAAA,qBACEC,GAAA,CAACZ,gBAAAA,EAAAA;QAAiBa,KAAAA,EAAM,MAAA;QAAOC,cAAAA,EAAe,QAAA;AAC5C,QAAA,QAAA,gBAAAC,IAAA,CAACb,IAAAA,EAAAA;YACCY,cAAAA,EAAe,QAAA;YACfE,UAAAA,EAAW,QAAA;YACXH,KAAAA,EAAM,MAAA;YACNI,UAAAA,EAAY,CAAA;YACZC,aAAAA,EAAe,CAAA;YACfC,WAAAA,EAAaC,0BAAAA;YACbC,YAAAA,EAAcD,0BAAAA;YACdE,GAAAA,EAAK,CAAA;;8BAELP,IAAA,CAACb,IAAAA,EAAAA;oBAAKY,cAAAA,EAAe,QAAA;oBAASE,UAAAA,EAAW,QAAA;oBAASO,IAAAA,EAAK,MAAA;oBAAOD,GAAAA,EAAK,CAAA;oBAAGE,IAAAA,EAAM,CAAA;;sCAC1EZ,GAAA,CAACa,GAAAA,EAAAA;AAAKjB,4BAAAA,QAAAA,EAAAA;;AACLC,wBAAAA,MAAAA,iBAASG,GAAA,CAACa,GAAAA,EAAAA;AAAKhB,4BAAAA,QAAAA,EAAAA;AAAgB,yBAAA,CAAA,GAAA;;;8BAElCG,GAAA,CAACa,GAAAA,EAAAA;oBAAIC,MAAAA,EAAQ,CAAA;AACX,oBAAA,QAAA,gBAAAd,GAAA,CAACe,UAAAA,EAAAA;wBAAWC,WAAAA,EAAa,KAAA;wBAAOC,KAAAA,EAAOnB,UAAAA;wBAAYoB,OAAAA,EAASnB,SAAAA;AAC1D,wBAAA,QAAA,gBAAAC,GAAA,CAACmB,KAAAA,EAAAA,EAAAA;;;;;;AAMb;;;;"}

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

@@ -5,7 +5,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../constants/theme.js');
 var useClipboard = require('../hooks/useClipboard.js');
 var retryDynamicImport = require('../utils/retryDynamicImport.js');
@@ -207,7 +207,7 @@ ${error.stack}
     }
     throw error;
 };
-const StyledAlert = styled.styled(designSystem.Alert)`
+const StyledAlert = styledComponents.styled(designSystem.Alert)`
   & > div:first-child {
     display: none;
   }
@@ -216,11 +216,11 @@ const StyledAlert = styled.styled(designSystem.Alert)`
     display: none;
   }
 `;
-const ErrorType = styled.styled(designSystem.Typography)`
+const ErrorType = styledComponents.styled(designSystem.Typography)`
   word-break: break-all;
   color: ${({ theme })=>theme.colors.danger600};
 `;
-const ChunkErrorType = styled.styled(designSystem.Typography)`
+const ChunkErrorType = styledComponents.styled(designSystem.Typography)`
   word-break: break-all;
   color: ${({ theme })=>theme.colors.warning600};
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorElement.js","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Clock, Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isChunkLoadError } from '../utils/retryDynamicImport';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleCopy = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    if (isChunkLoadError(error)) {\n      return (\n        <Main height=\"100%\">\n          <Flex\n            alignItems=\"center\"\n            height=\"100%\"\n            justifyContent=\"center\"\n            paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n            paddingRight={RESPONSIVE_DEFAULT_SPACING}\n          >\n            <Flex\n              gap={7}\n              padding={{\n                initial: 6,\n                small: 7,\n                medium: 8,\n              }}\n              direction=\"column\"\n              width=\"100%\"\n              maxWidth=\"512px\"\n              shadow=\"tableShadow\"\n              borderColor=\"neutral150\"\n              background=\"neutral0\"\n              hasRadius\n            >\n              <Flex direction=\"column\" gap={2}>\n                <Clock width=\"32px\" height=\"32px\" fill=\"primary600\" />\n                <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.title',\n                    defaultMessage: \"This screen couldn't be loaded\",\n                  })}\n                </Typography>\n                <Typography variant=\"omega\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.message',\n                    defaultMessage:\n                      'The admin could not load a screen. This often happens when the server is starting or the connection was interrupted. Reload the page to try again. If you recently deployed, you may need a full refresh to load the latest version.',\n                  })}\n                </Typography>\n              </Flex>\n              <Flex gap={4} direction=\"column\" width=\"100%\">\n                <Button onClick={() => window.location.reload()} fullWidth>\n                  {formatMessage({\n                    id: 'app.error.chunk.reload',\n                    defaultMessage: 'Reload the page',\n                  })}\n                </Button>\n                <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"warning\">\n                  <ChunkErrorType>{error.message}</ChunkErrorType>\n                </StyledAlert>\n                <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                  {formatMessage({\n                    id: 'app.error.copy',\n                    defaultMessage: 'Copy to clipboard',\n                  })}\n                </Button>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Main>\n      );\n    }\n\n    return (\n      <Main height=\"100%\">\n        <Flex\n          alignItems=\"center\"\n          height=\"100%\"\n          justifyContent=\"center\"\n          paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n          paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        >\n          <Flex\n            gap={7}\n            padding={{\n              initial: 6,\n              small: 7,\n              medium: 8,\n            }}\n            direction=\"column\"\n            width=\"100%\"\n            maxWidth=\"512px\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nconst ChunkErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.warning600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleCopy","stack","isChunkLoadError","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","Clock","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","Button","onClick","window","location","reload","fullWidth","StyledAlert","onClose","closeLabel","ChunkErrorType","message","startIcon","Duplicate","WarningCircle","link","Link","isExternal","endIcon","href","ErrorType","styled","Alert","theme","colors","danger600","warning600"],"mappings":"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"}
+{"version":3,"file":"ErrorElement.js","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Clock, Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isChunkLoadError } from '../utils/retryDynamicImport';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleCopy = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    if (isChunkLoadError(error)) {\n      return (\n        <Main height=\"100%\">\n          <Flex\n            alignItems=\"center\"\n            height=\"100%\"\n            justifyContent=\"center\"\n            paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n            paddingRight={RESPONSIVE_DEFAULT_SPACING}\n          >\n            <Flex\n              gap={7}\n              padding={{\n                initial: 6,\n                small: 7,\n                medium: 8,\n              }}\n              direction=\"column\"\n              width=\"100%\"\n              maxWidth=\"512px\"\n              shadow=\"tableShadow\"\n              borderColor=\"neutral150\"\n              background=\"neutral0\"\n              hasRadius\n            >\n              <Flex direction=\"column\" gap={2}>\n                <Clock width=\"32px\" height=\"32px\" fill=\"primary600\" />\n                <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.title',\n                    defaultMessage: \"This screen couldn't be loaded\",\n                  })}\n                </Typography>\n                <Typography variant=\"omega\" textAlign=\"center\">\n                  {formatMessage({\n                    id: 'app.error.chunk.message',\n                    defaultMessage:\n                      'The admin could not load a screen. This often happens when the server is starting or the connection was interrupted. Reload the page to try again. If you recently deployed, you may need a full refresh to load the latest version.',\n                  })}\n                </Typography>\n              </Flex>\n              <Flex gap={4} direction=\"column\" width=\"100%\">\n                <Button onClick={() => window.location.reload()} fullWidth>\n                  {formatMessage({\n                    id: 'app.error.chunk.reload',\n                    defaultMessage: 'Reload the page',\n                  })}\n                </Button>\n                <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"warning\">\n                  <ChunkErrorType>{error.message}</ChunkErrorType>\n                </StyledAlert>\n                <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                  {formatMessage({\n                    id: 'app.error.copy',\n                    defaultMessage: 'Copy to clipboard',\n                  })}\n                </Button>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Main>\n      );\n    }\n\n    return (\n      <Main height=\"100%\">\n        <Flex\n          alignItems=\"center\"\n          height=\"100%\"\n          justifyContent=\"center\"\n          paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n          paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        >\n          <Flex\n            gap={7}\n            padding={{\n              initial: 6,\n              small: 7,\n              medium: 8,\n            }}\n            direction=\"column\"\n            width=\"100%\"\n            maxWidth=\"512px\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleCopy} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nconst ChunkErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.warning600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleCopy","stack","isChunkLoadError","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","Clock","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","Button","onClick","window","location","reload","fullWidth","StyledAlert","onClose","closeLabel","ChunkErrorType","message","startIcon","Duplicate","WarningCircle","link","Link","isExternal","endIcon","href","ErrorType","styled","Alert","theme","colors","danger600","warning600"],"mappings":"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"}