npm - @strapi/admin - Versions diffs - 5.14.0 → 5.15.0 - Mend

@strapi/admin 5.14.0 → 5.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (282) hide show

package/dist/admin/admin/src/components/ConfirmDialog.js CHANGED Viewed

@@ -5,7 +5,7 @@ var React = require('react');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -122,7 +122,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
         ]
     });
 };
-const StyledWarning = styledComponents.styled(icons.WarningCircle)`
+const StyledWarning = styled.styled(icons.WarningCircle)`
   width: 24px;
   height: 24px;

package/dist/admin/admin/src/components/ConfirmDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfirmDialog.js","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,cAACC,CAAAA,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,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,YAAcC,EAAAA,eAAAA,CAAgB,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvD,MAAMC,OAAAA,GACJhB,YACAU,aAAc,CAAA;QACZO,EAAI,EAAA,kBAAA;QACJC,cAAgB,EAAA;AAClB,KAAA,CAAA;AAEF,IAAA,MAAMC,gBAAgB,OAAOC,CAAAA,GAAAA;AAC3B,QAAA,IAAI,CAAChB,SAAW,EAAA;AACd,YAAA;AACF;QAEA,IAAI;YACFS,eAAgB,CAAA,IAAA,CAAA;AAChB,YAAA,MAAMT,SAAUgB,CAAAA,CAAAA,CAAAA;SACR,QAAA;YACRP,eAAgB,CAAA,KAAA,CAAA;AAClB;AACF,KAAA;IAEA,qBACEQ,eAAA,CAACC,oBAAOC,OAAO,EAAA;;AACb,0BAAArB,cAAA,CAACoB,oBAAOE,MAAM,EAAA;AACXf,gBAAAA,QAAAA,EAAAA,KAAAA,IACCC,aAAc,CAAA;oBACZO,EAAI,EAAA,oCAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA;;AAEJ,0BAAAhB,cAAA,CAACoB,oBAAOG,IAAI,EAAA;gBAACxB,IAAMA,EAAAA,IAAAA;AAAOe,gBAAAA,QAAAA,EAAAA;;AAC1B,0BAAAK,eAAA,CAACC,oBAAOI,MAAM,EAAA;;oBACXnB,WACC,kBAAAL,cAAA,CAACoB,oBAAOK,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAAzB,cAAC0B,CAAAA,mBAAAA,EAAAA;4BACCC,SAAS,EAAA,IAAA;4BACTvB,OAAQ,EAAA,UAAA;AACRwB,4BAAAA,OAAAA,EAAS,CAACV,CAAAA,GAAAA;AACRA,gCAAAA,CAAAA,CAAEW,eAAe,EAAA;AACjB,gCAAA,IAAI1B,QAAU,EAAA;oCACZA,QAASe,CAAAA,CAAAA,CAAAA;AACX;AACF,6BAAA;sCAECV,aAAc,CAAA;gCACbO,EAAI,EAAA,8BAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;;oBAILV,SACC,kBAAAN,cAAA,CAACoB,oBAAOU,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAA9B,cAAC0B,CAAAA,mBAAAA,EAAAA;4BAAOC,SAAS,EAAA,IAAA;4BAACC,OAASX,EAAAA,aAAAA;4BAAeb,OAASA,EAAAA,OAAAA;4BAAS2B,OAASrB,EAAAA,YAAAA;sCAClEF,aAAc,CAAA;gCACbO,EAAI,EAAA,+BAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;;;;;;AAOd;AAEA,MAAMf,aAAAA,GAAgB+B,~~uBAAOC~~,CAAAA,mBAAAA,CAAc;;;;;UAKjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,SAAS,CAAC;;AAElD,CAAC;;;;"}
1	+ {"version":3,"file":"ConfirmDialog.js","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,cAACC,CAAAA,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,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,YAAcC,EAAAA,eAAAA,CAAgB,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvD,MAAMC,OAAAA,GACJhB,YACAU,aAAc,CAAA;QACZO,EAAI,EAAA,kBAAA;QACJC,cAAgB,EAAA;AAClB,KAAA,CAAA;AAEF,IAAA,MAAMC,gBAAgB,OAAOC,CAAAA,GAAAA;AAC3B,QAAA,IAAI,CAAChB,SAAW,EAAA;AACd,YAAA;AACF;QAEA,IAAI;YACFS,eAAgB,CAAA,IAAA,CAAA;AAChB,YAAA,MAAMT,SAAUgB,CAAAA,CAAAA,CAAAA;SACR,QAAA;YACRP,eAAgB,CAAA,KAAA,CAAA;AAClB;AACF,KAAA;IAEA,qBACEQ,eAAA,CAACC,oBAAOC,OAAO,EAAA;;AACb,0BAAArB,cAAA,CAACoB,oBAAOE,MAAM,EAAA;AACXf,gBAAAA,QAAAA,EAAAA,KAAAA,IACCC,aAAc,CAAA;oBACZO,EAAI,EAAA,oCAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA;;AAEJ,0BAAAhB,cAAA,CAACoB,oBAAOG,IAAI,EAAA;gBAACxB,IAAMA,EAAAA,IAAAA;AAAOe,gBAAAA,QAAAA,EAAAA;;AAC1B,0BAAAK,eAAA,CAACC,oBAAOI,MAAM,EAAA;;oBACXnB,WACC,kBAAAL,cAAA,CAACoB,oBAAOK,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAAzB,cAAC0B,CAAAA,mBAAAA,EAAAA;4BACCC,SAAS,EAAA,IAAA;4BACTvB,OAAQ,EAAA,UAAA;AACRwB,4BAAAA,OAAAA,EAAS,CAACV,CAAAA,GAAAA;AACRA,gCAAAA,CAAAA,CAAEW,eAAe,EAAA;AACjB,gCAAA,IAAI1B,QAAU,EAAA;oCACZA,QAASe,CAAAA,CAAAA,CAAAA;AACX;AACF,6BAAA;sCAECV,aAAc,CAAA;gCACbO,EAAI,EAAA,8BAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;;oBAILV,SACC,kBAAAN,cAAA,CAACoB,oBAAOU,MAAM,EAAA;AACZ,wBAAA,QAAA,gBAAA9B,cAAC0B,CAAAA,mBAAAA,EAAAA;4BAAOC,SAAS,EAAA,IAAA;4BAACC,OAASX,EAAAA,aAAAA;4BAAeb,OAASA,EAAAA,OAAAA;4BAAS2B,OAASrB,EAAAA,YAAAA;sCAClEF,aAAc,CAAA;gCACbO,EAAI,EAAA,+BAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;;;;;;AAOd;AAEA,MAAMf,aAAAA,GAAgB+B,aAAOC,CAAAA,mBAAAA,CAAc;;;;;UAKjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,SAAS,CAAC;;AAElD,CAAC;;;;"}

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

@@ -2,7 +2,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
-var styledComponents = require('styled-components');
+var styled = 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 = styledComponents.styled(designSystem.Flex)`
+const IconWrapper = styled.styled(designSystem.Flex)`
   margin-right: ${({ theme })=>theme.spaces[6]};
   svg {
@@ -52,7 +52,7 @@ const IconWrapper = styledComponents.styled(designSystem.Flex)`
     height: 3.2rem;
   }
 `;
-const TypographyWordBreak = styledComponents.styled(designSystem.Typography)`
+const TypographyWordBreak = styled.styled(designSystem.Typography)`
   color: ${({ theme })=>theme.colors.neutral800};
   word-break: break-all;
 `;

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

	@@ -1 +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,UAAa,GAAA,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,SAAS,EACTC,aAAAA,GAAgB,KAAK,EACL,GAAA;AAChB,IAAA,IAAIL,KAASA,IAAAA,KAAAA,CAAMM,MAAM,GAAG,MAAMD,aAAe,EAAA;QAC/CL,KAAQ,GAAA,CAAC,EAAEA,KAAMO,CAAAA,SAAS,CAAC,CAAG,EAAA,EAAA,CAAA,CAAI,GAAG,CAAC;AACxC;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QAAKC,MAAO,EAAA,aAAA;QAAcC,SAAS,EAAA,IAAA;QAACC,OAAS,EAAA,CAAA;QAAGC,UAAW,EAAA,UAAA;;0BAC1DC,cAACC,CAAAA,WAAAA,EAAAA;gBAAYF,UAAYV,EAAAA,cAAAA;gBAAgBQ,SAAS,EAAA,IAAA;gBAACC,OAAS,EAAA,CAAA;AACzDV,gBAAAA,QAAAA,EAAAA;;0BAEHM,eAACC,CAAAA,iBAAAA,EAAAA;gBAAKO,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,SAAA;AAAUC,gBAAAA,GAAAA,EAAKd,YAAY,CAAI,GAAA,CAAA;;kCACjEI,eAACC,CAAAA,iBAAAA,EAAAA;;0CACCK,cAACK,CAAAA,mBAAAA,EAAAA;gCAAoBC,UAAW,EAAA,UAAA;gCAAWC,OAAQ,EAAA,IAAA;AAChDrB,gCAAAA,QAAAA,EAAAA;;AAEFI,4BAAAA;;;kCAEHU,cAACQ,CAAAA,uBAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;AAActB,wBAAAA,QAAAA,EAAAA;;;;;;AAI5C;AAEA,MAAMc,WAAAA,GAAcS,~~uBAAsBf~~,CAAAA,iBAAAA,CAAK;gBAC/B,EAAE,CAAC,EAAEgB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMjD,CAAC;AAED,MAAMP,mBAAAA,GAAsBK,~~uBAA4BF~~,CAAAA,uBAAAA,CAAW;SAC1D,EAAE,CAAC,EAAEG,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAElD,CAAC;;;;"}
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,UAAa,GAAA,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,SAAS,EACTC,aAAAA,GAAgB,KAAK,EACL,GAAA;AAChB,IAAA,IAAIL,KAASA,IAAAA,KAAAA,CAAMM,MAAM,GAAG,MAAMD,aAAe,EAAA;QAC/CL,KAAQ,GAAA,CAAC,EAAEA,KAAMO,CAAAA,SAAS,CAAC,CAAG,EAAA,EAAA,CAAA,CAAI,GAAG,CAAC;AACxC;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QAAKC,MAAO,EAAA,aAAA;QAAcC,SAAS,EAAA,IAAA;QAACC,OAAS,EAAA,CAAA;QAAGC,UAAW,EAAA,UAAA;;0BAC1DC,cAACC,CAAAA,WAAAA,EAAAA;gBAAYF,UAAYV,EAAAA,cAAAA;gBAAgBQ,SAAS,EAAA,IAAA;gBAACC,OAAS,EAAA,CAAA;AACzDV,gBAAAA,QAAAA,EAAAA;;0BAEHM,eAACC,CAAAA,iBAAAA,EAAAA;gBAAKO,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,SAAA;AAAUC,gBAAAA,GAAAA,EAAKd,YAAY,CAAI,GAAA,CAAA;;kCACjEI,eAACC,CAAAA,iBAAAA,EAAAA;;0CACCK,cAACK,CAAAA,mBAAAA,EAAAA;gCAAoBC,UAAW,EAAA,UAAA;gCAAWC,OAAQ,EAAA,IAAA;AAChDrB,gCAAAA,QAAAA,EAAAA;;AAEFI,4BAAAA;;;kCAEHU,cAACQ,CAAAA,uBAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;AAActB,wBAAAA,QAAAA,EAAAA;;;;;;AAI5C;AAEA,MAAMc,WAAAA,GAAcS,aAAsBf,CAAAA,iBAAAA,CAAK;gBAC/B,EAAE,CAAC,EAAEgB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;AAMjD,CAAC;AAED,MAAMP,mBAAAA,GAAsBK,aAA4BF,CAAAA,uBAAAA,CAAW;SAC1D,EAAE,CAAC,EAAEG,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAElD,CAAC;;;;"}

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

@@ -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 styledComponents = require('styled-components');
+var styled = require('styled-components');
 var useClipboard = require('../hooks/useClipboard.js');
 /**
@@ -109,7 +109,7 @@ ${error.stack}
     }
     throw error;
 };
-const StyledAlert = styledComponents.styled(designSystem.Alert)`
+const StyledAlert = styled.styled(designSystem.Alert)`
   & > div:first-child {
     display: none;
   }
@@ -118,7 +118,7 @@ const StyledAlert = styledComponents.styled(designSystem.Alert)`
     display: none;
   }
 `;
-const ErrorType = styledComponents.styled(designSystem.Typography)`
+const ErrorType = styled.styled(designSystem.Typography)`
   word-break: break-all;
   color: ${({ theme })=>theme.colors.danger600};
 `;

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

	@@ -1 +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 { Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useClipboard } from '../hooks/useClipboard';\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 handleClick = async () => {\n await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n `);\n };\n\n return (\n <Main height=\"100%\">\n <Flex alignItems=\"center\" height=\"100%\" justifyContent=\"center\">\n <Flex\n gap={7}\n padding={7}\n direction=\"column\"\n width=\"35%\"\n shadow=\"tableShadow\"\n borderColor=\"neutral150\"\n background=\"neutral0\"\n hasRadius\n maxWidth=\"512px\"\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={handleClick} 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\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","_jsxs","gap","padding","direction","width","shadow","borderColor","background","hasRadius","maxWidth","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"mappings":"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~~uBAAOC~~,CAAAA,kBAAAA,CAAM;;;;;;;;AAQjC,CAAC;AAED,MAAMP,SAAAA,GAAYM,~~uBAA4BrB~~,CAAAA,uBAAAA,CAAW;;SAEhD,EAAE,CAAC,EAAEuB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,SAAS,CAAC;AACjD,CAAC;;;;"}
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 { Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useClipboard } from '../hooks/useClipboard';\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 handleClick = async () => {\n await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n `);\n };\n\n return (\n <Main height=\"100%\">\n <Flex alignItems=\"center\" height=\"100%\" justifyContent=\"center\">\n <Flex\n gap={7}\n padding={7}\n direction=\"column\"\n width=\"35%\"\n shadow=\"tableShadow\"\n borderColor=\"neutral150\"\n background=\"neutral0\"\n hasRadius\n maxWidth=\"512px\"\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={handleClick} 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\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","_jsxs","gap","padding","direction","width","shadow","borderColor","background","hasRadius","maxWidth","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"mappings":"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"}

package/dist/admin/admin/src/components/GradientBadge.js ADDED Viewed

@@ -0,0 +1,37 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var styled = require('styled-components');
+const GradientBadge = styled.styled(designSystem.Badge)`
+  background: linear-gradient(
+    90deg,
+    ${({ theme })=>theme.colors.primary600} 0%,
+    ${({ theme })=>theme.colors.alternative600} 121.48%
+  );
+  padding: 0.4rem 1rem;
+`;
+const GradientBadgeWithIcon = ({ label })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(GradientBadge, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            gap: 1,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(icons.Lightning, {
+                    width: 16,
+                    height: 16,
+                    fill: "neutral0"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    textColor: "neutral0",
+                    children: label
+                })
+            ]
+        })
+    });
+};
+exports.GradientBadge = GradientBadgeWithIcon;
+//# sourceMappingURL=GradientBadge.js.map

package/dist/admin/admin/src/components/GradientBadge.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GradientBadge.js","sources":["../../../../../admin/src/components/GradientBadge.tsx"],"sourcesContent":["import { Badge, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst GradientBadge = styled(Badge)`\n background: linear-gradient(\n 90deg,\n ${({ theme }) => theme.colors.primary600} 0%,\n ${({ theme }) => theme.colors.alternative600} 121.48%\n );\n padding: 0.4rem 1rem;\n`;\n\nconst GradientBadgeWithIcon = ({ label }: { label: string }) => {\n return (\n <GradientBadge>\n <Flex gap={1} alignItems=\"center\">\n <Lightning width={16} height={16} fill=\"neutral0\" />\n <Typography textColor=\"neutral0\">{label}</Typography>\n </Flex>\n </GradientBadge>\n );\n};\n\nexport { GradientBadgeWithIcon as GradientBadge };\n"],"names":["GradientBadge","styled","Badge","theme","colors","primary600","alternative600","GradientBadgeWithIcon","label","_jsx","_jsxs","Flex","gap","alignItems","Lightning","width","height","fill","Typography","textColor"],"mappings":";;;;;;;AAIA,MAAMA,aAAAA,GAAgBC,aAAOC,CAAAA,kBAAAA,CAAM;;;IAG/B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;IACzC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,cAAc,CAAC;;;AAGjD,CAAC;AAED,MAAMC,qBAAwB,GAAA,CAAC,EAAEC,KAAK,EAAqB,GAAA;AACzD,IAAA,qBACEC,cAACT,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAU,eAACC,CAAAA,iBAAAA,EAAAA;YAAKC,GAAK,EAAA,CAAA;YAAGC,UAAW,EAAA,QAAA;;8BACvBJ,cAACK,CAAAA,eAAAA,EAAAA;oBAAUC,KAAO,EAAA,EAAA;oBAAIC,MAAQ,EAAA,EAAA;oBAAIC,IAAK,EAAA;;8BACvCR,cAACS,CAAAA,uBAAAA,EAAAA;oBAAWC,SAAU,EAAA,UAAA;AAAYX,oBAAAA,QAAAA,EAAAA;;;;;AAI1C;;;;"}

package/dist/admin/admin/src/components/GradientBadge.mjs ADDED Viewed

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Badge, Flex, Typography } from '@strapi/design-system';
+import { Lightning } from '@strapi/icons';
+import { styled } from 'styled-components';
+const GradientBadge = styled(Badge)`
+  background: linear-gradient(
+    90deg,
+    ${({ theme })=>theme.colors.primary600} 0%,
+    ${({ theme })=>theme.colors.alternative600} 121.48%
+  );
+  padding: 0.4rem 1rem;
+`;
+const GradientBadgeWithIcon = ({ label })=>{
+    return /*#__PURE__*/ jsx(GradientBadge, {
+        children: /*#__PURE__*/ jsxs(Flex, {
+            gap: 1,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ jsx(Lightning, {
+                    width: 16,
+                    height: 16,
+                    fill: "neutral0"
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    textColor: "neutral0",
+                    children: label
+                })
+            ]
+        })
+    });
+};
+export { GradientBadgeWithIcon as GradientBadge };
+//# sourceMappingURL=GradientBadge.mjs.map

package/dist/admin/admin/src/components/GradientBadge.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GradientBadge.mjs","sources":["../../../../../admin/src/components/GradientBadge.tsx"],"sourcesContent":["import { Badge, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst GradientBadge = styled(Badge)`\n background: linear-gradient(\n 90deg,\n ${({ theme }) => theme.colors.primary600} 0%,\n ${({ theme }) => theme.colors.alternative600} 121.48%\n );\n padding: 0.4rem 1rem;\n`;\n\nconst GradientBadgeWithIcon = ({ label }: { label: string }) => {\n return (\n <GradientBadge>\n <Flex gap={1} alignItems=\"center\">\n <Lightning width={16} height={16} fill=\"neutral0\" />\n <Typography textColor=\"neutral0\">{label}</Typography>\n </Flex>\n </GradientBadge>\n );\n};\n\nexport { GradientBadgeWithIcon as GradientBadge };\n"],"names":["GradientBadge","styled","Badge","theme","colors","primary600","alternative600","GradientBadgeWithIcon","label","_jsx","_jsxs","Flex","gap","alignItems","Lightning","width","height","fill","Typography","textColor"],"mappings":";;;;;AAIA,MAAMA,aAAAA,GAAgBC,MAAOC,CAAAA,KAAAA,CAAM;;;IAG/B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;IACzC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,cAAc,CAAC;;;AAGjD,CAAC;AAED,MAAMC,qBAAwB,GAAA,CAAC,EAAEC,KAAK,EAAqB,GAAA;AACzD,IAAA,qBACEC,GAACT,CAAAA,aAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAU,IAACC,CAAAA,IAAAA,EAAAA;YAAKC,GAAK,EAAA,CAAA;YAAGC,UAAW,EAAA,QAAA;;8BACvBJ,GAACK,CAAAA,SAAAA,EAAAA;oBAAUC,KAAO,EAAA,EAAA;oBAAIC,MAAQ,EAAA,EAAA;oBAAIC,IAAK,EAAA;;8BACvCR,GAACS,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,UAAA;AAAYX,oBAAAA,QAAAA,EAAAA;;;;;AAI1C;;;;"}

package/dist/admin/admin/src/components/GuidedTour/Modal.js CHANGED Viewed

@@ -7,7 +7,7 @@ var icons = require('@strapi/icons');
 var get = require('lodash/get');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var Tracking = require('../../features/Tracking.js');
 var constants = require('./constants.js');
 var Ornaments = require('./Ornaments.js');
@@ -107,7 +107,7 @@ var Provider = require('./Provider.js');
         })
     });
 };
-const ModalWrapper = styledComponents.styled(designSystem.Flex)`
+const ModalWrapper = styled.styled(designSystem.Flex)`
   position: fixed;
   z-index: 4;
   inset: 0;
@@ -264,7 +264,7 @@ const List = (children)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
             children: children
         })
     });
-const LiStyled = styledComponents.styled.li`
+const LiStyled = styled.styled.li`
   list-style: disc;
   &::marker {
     color: ${({ theme })=>theme.colors.neutral800};

package/dist/admin/admin/src/components/GuidedTour/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../../../../../../admin/src/components/GuidedTour/Modal.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Box,\n Button,\n Flex,\n FlexComponent,\n FocusTrap,\n IconButton,\n Portal,\n Typography,\n LinkButton,\n} from '@strapi/design-system';\nimport { ArrowRight, Cross } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../features/Tracking';\n\nimport { LAYOUT_DATA, STATES } from './constants';\nimport { Number, VerticalDivider } from './Ornaments';\nimport { GuidedTourContextValue, useGuidedTour } from './Provider';\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourModal\n * -----------------------------------------------------------------------------------------------/\n\nconst GuidedTourModal = () => {\n const guidedTour = useGuidedTour('GuidedTourModal', (state) => state);\n\n const {\n currentStep,\n guidedTourState,\n setCurrentStep,\n setStepState,\n isGuidedTourVisible,\n setSkipped,\n } = guidedTour;\n\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n if (!currentStep \|\| !isGuidedTourVisible) {\n return null;\n }\n\n const stepData = get(LAYOUT_DATA, currentStep);\n const sectionKeys = Object.keys(guidedTourState);\n const [sectionName, stepName] = currentStep.split('.') as [\n keyof GuidedTourContextValue['guidedTourState'],\n string,\n ];\n const sectionIndex = sectionKeys.indexOf(sectionName);\n const stepIndex = Object.keys(guidedTourState[sectionName]).indexOf(stepName);\n const hasSectionAfter = sectionIndex < sectionKeys.length - 1;\n const hasStepAfter = stepIndex < Object.keys(guidedTourState[sectionName]).length - 1;\n\n const handleCtaClick = () => {\n setStepState(currentStep, true);\n\n if (stepData) {\n trackUsage(stepData.trackingEvent);\n }\n\n setCurrentStep(null);\n };\n\n const handleSkip = () => {\n setSkipped(true);\n setCurrentStep(null);\n trackUsage('didSkipGuidedtour');\n };\n\n return (\n <Portal>\n <ModalWrapper onClick={handleCtaClick} padding={8} justifyContent=\"center\">\n <FocusTrap onEscape={handleCtaClick}>\n <Flex\n direction=\"column\"\n alignItems=\"stretch\"\n background=\"neutral0\"\n width={`66rem`}\n shadow=\"popupShadow\"\n hasRadius\n padding={4}\n gap={8}\n role=\"dialog\"\n aria-modal\n onClick={(e) => e.stopPropagation()}\n >\n <Flex justifyContent=\"flex-end\">\n <IconButton\n onClick={handleCtaClick}\n withTooltip={false}\n label={formatMessage({\n id: 'app.utils.close-label',\n defaultMessage: 'Close',\n })}\n >\n <Cross />\n </IconButton>\n </Flex>\n <Box\n paddingLeft={7}\n paddingRight={7}\n paddingBottom={!hasStepAfter && !hasSectionAfter ? 8 : 0}\n >\n <GuidedTourStepper\n title={stepData && 'title' in stepData ? stepData.title : undefined}\n cta={stepData && 'cta' in stepData ? stepData.cta : undefined}\n onCtaClick={handleCtaClick}\n sectionIndex={sectionIndex}\n stepIndex={stepIndex}\n hasSectionAfter={hasSectionAfter}\n >\n {stepData && 'content' in stepData && <GuidedTourContent {...stepData.content} />}\n </GuidedTourStepper>\n </Box>\n {!(!hasStepAfter && !hasSectionAfter) && (\n <Flex justifyContent=\"flex-end\">\n <Button variant=\"tertiary\" onClick={handleSkip}>\n {formatMessage({\n id: 'app.components.GuidedTour.skip',\n defaultMessage: 'Skip the tour',\n })}\n </Button>\n </Flex>\n )}\n </Flex>\n </FocusTrap>\n </ModalWrapper>\n </Portal>\n );\n};\n\nconst ModalWrapper = styled<FlexComponent>(Flex)`\n position: fixed;\n z-index: 4;\n inset: 0;\n / this is theme.colors.neutral800 with opacity /\n background: ${({ theme }) => `${theme.colors.neutral800}1F`};\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * GuidedTourStepper\n * -----------------------------------------------------------------------------------------------/\n\ninterface GuidedTourStepperProps {\n title: MessageDescriptor \| undefined;\n children: React.ReactNode;\n cta?: {\n title: MessageDescriptor;\n target?: string;\n };\n onCtaClick: () => void;\n sectionIndex: number;\n stepIndex: number;\n hasSectionAfter: boolean;\n}\n\nconst GuidedTourStepper = ({\n title,\n children,\n cta,\n onCtaClick,\n sectionIndex,\n stepIndex,\n hasSectionAfter,\n}: GuidedTourStepperProps) => {\n const { formatMessage } = useIntl();\n\n const hasSectionBefore = sectionIndex > 0;\n const hasStepsBefore = stepIndex > 0;\n const nextSectionIndex = sectionIndex + 1;\n\n return (\n <>\n <Flex alignItems=\"stretch\">\n <Flex marginRight={8} justifyContent=\"center\" minWidth={`3rem`}>\n {hasSectionBefore && <VerticalDivider state={STATES.IS_DONE} minHeight={`2.4rem`} />}\n </Flex>\n <Typography variant=\"sigma\" textColor=\"primary600\">\n {formatMessage({\n id: 'app.components.GuidedTour.title',\n defaultMessage: '3 steps to get started',\n })}\n </Typography>\n </Flex>\n <Flex>\n <Flex marginRight={8} minWidth={`3rem`}>\n <Number\n state={hasStepsBefore ? STATES.IS_DONE : STATES.IS_ACTIVE}\n paddingTop={3}\n paddingBottom={3}\n >\n {sectionIndex + 1}\n </Number>\n </Flex>\n {title && (\n <Typography variant=\"alpha\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"h3\" id=\"title\">\n {formatMessage(title)}\n </Typography>\n )}\n </Flex>\n <Flex alignItems=\"stretch\">\n <Flex marginRight={8} direction=\"column\" justifyContent=\"center\" minWidth={`3rem`}>\n {hasSectionAfter && (\n <>\n <VerticalDivider state={STATES.IS_DONE} />\n {hasStepsBefore && (\n <Number state={STATES.IS_ACTIVE} paddingTop={3}>\n {nextSectionIndex + 1}\n </Number>\n )}\n </>\n )}\n </Flex>\n <Box>\n {children}\n {cta &&\n (cta.target ? (\n <LinkButton\n tag={NavLink}\n endIcon={<ArrowRight />}\n onClick={onCtaClick}\n to={cta.target}\n >\n {formatMessage(cta.title)}\n </LinkButton>\n ) : (\n <Button endIcon={<ArrowRight />} onClick={onCtaClick}>\n {formatMessage(cta.title)}\n </Button>\n ))}\n </Box>\n </Flex>\n {hasStepsBefore && hasSectionAfter && (\n <Box paddingTop={3}>\n <Flex marginRight={8} justifyContent=\"center\" width={`3rem`}>\n <VerticalDivider state={STATES.IS_DONE} minHeight={`2.4rem`} />\n </Flex>\n </Box>\n )}\n </>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * GuidedTourContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface GuidedTourContentProps\n extends Required<Pick<MessageDescriptor, 'defaultMessage' \| 'id'>> {}\n\nconst GuidedTourContent = ({ id, defaultMessage }: GuidedTourContentProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={4} paddingBottom={6}>\n {formatMessage(\n { id, defaultMessage },\n {\n documentationLink: DocumentationLink,\n b: Bold,\n p: Paragraph,\n light: Light,\n ul: List,\n li: ListItem,\n }\n )}\n </Flex>\n );\n};\n\nconst DocumentationLink = (children: React.ReactNode) => (\n <Typography\n tag=\"a\"\n textColor=\"primary600\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n href=\"https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters\"\n >\n {children}\n </Typography>\n);\n\nconst Bold = (children: React.ReactNode) => (\n <Typography fontWeight=\"semiBold\">{children}</Typography>\n);\n\nconst Paragraph = (children: React.ReactNode) => <Typography>{children}</Typography>;\n\nconst Light = (children: React.ReactNode) => (\n <Typography textColor=\"neutral600\">{children}</Typography>\n);\n\nconst List = (children: React.ReactNode) => (\n <Box paddingLeft={6}>\n <ul>{children}</ul>\n </Box>\n);\n\nconst LiStyled = styled.li`\n list-style: disc;\n &::marker {\n color: ${({ theme }) => theme.colors.neutral800};\n }\n`;\n\nconst ListItem = (children: React.ReactNode) => <LiStyled>{children}</LiStyled>;\n\nexport { GuidedTourModal };\n"],"names":["GuidedTourModal","guidedTour","useGuidedTour","state","currentStep","guidedTourState","setCurrentStep","setStepState","isGuidedTourVisible","setSkipped","formatMessage","useIntl","trackUsage","useTracking","stepData","get","LAYOUT_DATA","sectionKeys","Object","keys","sectionName","stepName","split","sectionIndex","indexOf","stepIndex","hasSectionAfter","length","hasStepAfter","handleCtaClick","trackingEvent","handleSkip","_jsx","Portal","ModalWrapper","onClick","padding","justifyContent","FocusTrap","onEscape","_jsxs","Flex","direction","alignItems","background","width","shadow","hasRadius","gap","role","aria-modal","e","stopPropagation","IconButton","withTooltip","label","id","defaultMessage","Cross","Box","paddingLeft","paddingRight","paddingBottom","GuidedTourStepper","title","undefined","cta","onCtaClick","GuidedTourContent","content","Button","variant","styled","theme","colors","neutral800","children","hasSectionBefore","hasStepsBefore","nextSectionIndex","_Fragment","marginRight","minWidth","VerticalDivider","STATES","IS_DONE","minHeight","Typography","textColor","Number","IS_ACTIVE","paddingTop","fontWeight","tag","target","LinkButton","NavLink","endIcon","ArrowRight","to","documentationLink","DocumentationLink","b","Bold","p","Paragraph","light","Light","ul","List","li","ListItem","rel","href","LiStyled"],"mappings":"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"}
1	+ {"version":3,"file":"Modal.js","sources":["../../../../../../admin/src/components/GuidedTour/Modal.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Box,\n Button,\n Flex,\n FlexComponent,\n FocusTrap,\n IconButton,\n Portal,\n Typography,\n LinkButton,\n} from '@strapi/design-system';\nimport { ArrowRight, Cross } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../features/Tracking';\n\nimport { LAYOUT_DATA, STATES } from './constants';\nimport { Number, VerticalDivider } from './Ornaments';\nimport { GuidedTourContextValue, useGuidedTour } from './Provider';\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourModal\n * -----------------------------------------------------------------------------------------------/\n\nconst GuidedTourModal = () => {\n const guidedTour = useGuidedTour('GuidedTourModal', (state) => state);\n\n const {\n currentStep,\n guidedTourState,\n setCurrentStep,\n setStepState,\n isGuidedTourVisible,\n setSkipped,\n } = guidedTour;\n\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n if (!currentStep \|\| !isGuidedTourVisible) {\n return null;\n }\n\n const stepData = get(LAYOUT_DATA, currentStep);\n const sectionKeys = Object.keys(guidedTourState);\n const [sectionName, stepName] = currentStep.split('.') as [\n keyof GuidedTourContextValue['guidedTourState'],\n string,\n ];\n const sectionIndex = sectionKeys.indexOf(sectionName);\n const stepIndex = Object.keys(guidedTourState[sectionName]).indexOf(stepName);\n const hasSectionAfter = sectionIndex < sectionKeys.length - 1;\n const hasStepAfter = stepIndex < Object.keys(guidedTourState[sectionName]).length - 1;\n\n const handleCtaClick = () => {\n setStepState(currentStep, true);\n\n if (stepData) {\n trackUsage(stepData.trackingEvent);\n }\n\n setCurrentStep(null);\n };\n\n const handleSkip = () => {\n setSkipped(true);\n setCurrentStep(null);\n trackUsage('didSkipGuidedtour');\n };\n\n return (\n <Portal>\n <ModalWrapper onClick={handleCtaClick} padding={8} justifyContent=\"center\">\n <FocusTrap onEscape={handleCtaClick}>\n <Flex\n direction=\"column\"\n alignItems=\"stretch\"\n background=\"neutral0\"\n width={`66rem`}\n shadow=\"popupShadow\"\n hasRadius\n padding={4}\n gap={8}\n role=\"dialog\"\n aria-modal\n onClick={(e) => e.stopPropagation()}\n >\n <Flex justifyContent=\"flex-end\">\n <IconButton\n onClick={handleCtaClick}\n withTooltip={false}\n label={formatMessage({\n id: 'app.utils.close-label',\n defaultMessage: 'Close',\n })}\n >\n <Cross />\n </IconButton>\n </Flex>\n <Box\n paddingLeft={7}\n paddingRight={7}\n paddingBottom={!hasStepAfter && !hasSectionAfter ? 8 : 0}\n >\n <GuidedTourStepper\n title={stepData && 'title' in stepData ? stepData.title : undefined}\n cta={stepData && 'cta' in stepData ? stepData.cta : undefined}\n onCtaClick={handleCtaClick}\n sectionIndex={sectionIndex}\n stepIndex={stepIndex}\n hasSectionAfter={hasSectionAfter}\n >\n {stepData && 'content' in stepData && <GuidedTourContent {...stepData.content} />}\n </GuidedTourStepper>\n </Box>\n {!(!hasStepAfter && !hasSectionAfter) && (\n <Flex justifyContent=\"flex-end\">\n <Button variant=\"tertiary\" onClick={handleSkip}>\n {formatMessage({\n id: 'app.components.GuidedTour.skip',\n defaultMessage: 'Skip the tour',\n })}\n </Button>\n </Flex>\n )}\n </Flex>\n </FocusTrap>\n </ModalWrapper>\n </Portal>\n );\n};\n\nconst ModalWrapper = styled<FlexComponent>(Flex)`\n position: fixed;\n z-index: 4;\n inset: 0;\n / this is theme.colors.neutral800 with opacity /\n background: ${({ theme }) => `${theme.colors.neutral800}1F`};\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * GuidedTourStepper\n * -----------------------------------------------------------------------------------------------/\n\ninterface GuidedTourStepperProps {\n title: MessageDescriptor \| undefined;\n children: React.ReactNode;\n cta?: {\n title: MessageDescriptor;\n target?: string;\n };\n onCtaClick: () => void;\n sectionIndex: number;\n stepIndex: number;\n hasSectionAfter: boolean;\n}\n\nconst GuidedTourStepper = ({\n title,\n children,\n cta,\n onCtaClick,\n sectionIndex,\n stepIndex,\n hasSectionAfter,\n}: GuidedTourStepperProps) => {\n const { formatMessage } = useIntl();\n\n const hasSectionBefore = sectionIndex > 0;\n const hasStepsBefore = stepIndex > 0;\n const nextSectionIndex = sectionIndex + 1;\n\n return (\n <>\n <Flex alignItems=\"stretch\">\n <Flex marginRight={8} justifyContent=\"center\" minWidth={`3rem`}>\n {hasSectionBefore && <VerticalDivider state={STATES.IS_DONE} minHeight={`2.4rem`} />}\n </Flex>\n <Typography variant=\"sigma\" textColor=\"primary600\">\n {formatMessage({\n id: 'app.components.GuidedTour.title',\n defaultMessage: '3 steps to get started',\n })}\n </Typography>\n </Flex>\n <Flex>\n <Flex marginRight={8} minWidth={`3rem`}>\n <Number\n state={hasStepsBefore ? STATES.IS_DONE : STATES.IS_ACTIVE}\n paddingTop={3}\n paddingBottom={3}\n >\n {sectionIndex + 1}\n </Number>\n </Flex>\n {title && (\n <Typography variant=\"alpha\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"h3\" id=\"title\">\n {formatMessage(title)}\n </Typography>\n )}\n </Flex>\n <Flex alignItems=\"stretch\">\n <Flex marginRight={8} direction=\"column\" justifyContent=\"center\" minWidth={`3rem`}>\n {hasSectionAfter && (\n <>\n <VerticalDivider state={STATES.IS_DONE} />\n {hasStepsBefore && (\n <Number state={STATES.IS_ACTIVE} paddingTop={3}>\n {nextSectionIndex + 1}\n </Number>\n )}\n </>\n )}\n </Flex>\n <Box>\n {children}\n {cta &&\n (cta.target ? (\n <LinkButton\n tag={NavLink}\n endIcon={<ArrowRight />}\n onClick={onCtaClick}\n to={cta.target}\n >\n {formatMessage(cta.title)}\n </LinkButton>\n ) : (\n <Button endIcon={<ArrowRight />} onClick={onCtaClick}>\n {formatMessage(cta.title)}\n </Button>\n ))}\n </Box>\n </Flex>\n {hasStepsBefore && hasSectionAfter && (\n <Box paddingTop={3}>\n <Flex marginRight={8} justifyContent=\"center\" width={`3rem`}>\n <VerticalDivider state={STATES.IS_DONE} minHeight={`2.4rem`} />\n </Flex>\n </Box>\n )}\n </>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * GuidedTourContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface GuidedTourContentProps\n extends Required<Pick<MessageDescriptor, 'defaultMessage' \| 'id'>> {}\n\nconst GuidedTourContent = ({ id, defaultMessage }: GuidedTourContentProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={4} paddingBottom={6}>\n {formatMessage(\n { id, defaultMessage },\n {\n documentationLink: DocumentationLink,\n b: Bold,\n p: Paragraph,\n light: Light,\n ul: List,\n li: ListItem,\n }\n )}\n </Flex>\n );\n};\n\nconst DocumentationLink = (children: React.ReactNode) => (\n <Typography\n tag=\"a\"\n textColor=\"primary600\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n href=\"https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters\"\n >\n {children}\n </Typography>\n);\n\nconst Bold = (children: React.ReactNode) => (\n <Typography fontWeight=\"semiBold\">{children}</Typography>\n);\n\nconst Paragraph = (children: React.ReactNode) => <Typography>{children}</Typography>;\n\nconst Light = (children: React.ReactNode) => (\n <Typography textColor=\"neutral600\">{children}</Typography>\n);\n\nconst List = (children: React.ReactNode) => (\n <Box paddingLeft={6}>\n <ul>{children}</ul>\n </Box>\n);\n\nconst LiStyled = styled.li`\n list-style: disc;\n &::marker {\n color: ${({ theme }) => theme.colors.neutral800};\n }\n`;\n\nconst ListItem = (children: React.ReactNode) => <LiStyled>{children}</LiStyled>;\n\nexport { GuidedTourModal };\n"],"names":["GuidedTourModal","guidedTour","useGuidedTour","state","currentStep","guidedTourState","setCurrentStep","setStepState","isGuidedTourVisible","setSkipped","formatMessage","useIntl","trackUsage","useTracking","stepData","get","LAYOUT_DATA","sectionKeys","Object","keys","sectionName","stepName","split","sectionIndex","indexOf","stepIndex","hasSectionAfter","length","hasStepAfter","handleCtaClick","trackingEvent","handleSkip","_jsx","Portal","ModalWrapper","onClick","padding","justifyContent","FocusTrap","onEscape","_jsxs","Flex","direction","alignItems","background","width","shadow","hasRadius","gap","role","aria-modal","e","stopPropagation","IconButton","withTooltip","label","id","defaultMessage","Cross","Box","paddingLeft","paddingRight","paddingBottom","GuidedTourStepper","title","undefined","cta","onCtaClick","GuidedTourContent","content","Button","variant","styled","theme","colors","neutral800","children","hasSectionBefore","hasStepsBefore","nextSectionIndex","_Fragment","marginRight","minWidth","VerticalDivider","STATES","IS_DONE","minHeight","Typography","textColor","Number","IS_ACTIVE","paddingTop","fontWeight","tag","target","LinkButton","NavLink","endIcon","ArrowRight","to","documentationLink","DocumentationLink","b","Bold","p","Paragraph","light","Light","ul","List","li","ListItem","rel","href","LiStyled"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/GridLayout.js CHANGED Viewed

@@ -3,13 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 const GridColSize = {
     S: 180,
     M: 250
 };
-const StyledGrid = styledComponents.styled(designSystem.Box)`
+const StyledGrid = styled.styled(designSystem.Box)`
   display: grid;
   grid-template-columns: repeat(
     auto-fit,

package/dist/admin/admin/src/components/Layouts/GridLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridLayout.js","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n S: number;\n M: number;\n}\n\nconst GridColSize = {\n S: 180,\n M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n );\n grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n size: Size;\n children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;;;AAUA,MAAMA,WAAc,GAAA;IAClBC,CAAG,EAAA,GAAA;IACHC,CAAG,EAAA;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,~~uBAAOC~~,CAAAA,gBAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAC,EAAEN,WAAW,CAACM,KAAAA,CAAM,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,cAACT,CAAAA,UAAAA,EAAAA;QAAWG,KAAOI,EAAAA,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}
1	+ {"version":3,"file":"GridLayout.js","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n S: number;\n M: number;\n}\n\nconst GridColSize = {\n S: 180,\n M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n );\n grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n size: Size;\n children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;;;AAUA,MAAMA,WAAc,GAAA;IAClBC,CAAG,EAAA,GAAA;IACHC,CAAG,EAAA;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,aAAOC,CAAAA,gBAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAC,EAAEN,WAAW,CAACM,KAAAA,CAAM,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,cAACT,CAAAA,UAAAA,EAAAA;QAAWG,KAAOI,EAAAA,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js CHANGED Viewed

@@ -38,7 +38,7 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
             background: "neutral0",
             shadow: "tableShadow",
             width: `${width}px`,
-            zIndex: 1,
+            zIndex: 3,
             "data-strapi-header-sticky": true,
             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 justifyContent: "space-between",

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n navigationAction?: React.ReactNode;\n primaryAction?: React.ReactNode;\n secondaryAction?: React.ReactNode;\n subtitle?: React.ReactNode;\n sticky?: boolean;\n width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n (\n { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n ref\n ) => {\n const isSubtitleString = typeof subtitle === 'string';\n\n if (sticky) {\n return (\n <Box\n paddingLeft={6}\n paddingRight={6}\n paddingTop={3}\n paddingBottom={3}\n position=\"fixed\"\n top={0}\n right={0}\n background=\"neutral0\"\n shadow=\"tableShadow\"\n width={`${width}px`}\n zIndex={1}\n data-strapi-header-sticky\n >\n <Flex justifyContent=\"space-between\">\n <Flex>\n {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n <Box>\n <Typography variant=\"beta\" tag=\"h1\" {...props}>\n {title}\n </Typography>\n {isSubtitleString ? (\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n </Flex>\n </Box>\n );\n }\n\n return (\n <Box\n ref={ref}\n paddingLeft={10}\n paddingRight={10}\n paddingBottom={8}\n paddingTop={navigationAction ? 6 : 8}\n background=\"neutral100\"\n data-strapi-header\n >\n {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}\n <Flex justifyContent=\"space-between\">\n <Flex minWidth={0}>\n <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n {title}\n </Typography>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n {primaryAction}\n </Flex>\n {isSubtitleString ? (\n <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n );\n }\n);\n\n/ -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n const [headerSize, setHeaderSize] = React.useState<DOMRect \| null>(null);\n const [isVisible, setIsVisible] = React.useState(true);\n\n const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n root: null,\n rootMargin: '0px',\n threshold: 0,\n });\n\n useResizeObserver(containerRef, () => {\n if (containerRef.current) {\n setHeaderSize(containerRef.current.getBoundingClientRect());\n }\n });\n\n React.useEffect(() => {\n if (baseHeaderLayoutRef.current) {\n setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());\n }\n }, [baseHeaderLayoutRef]);\n\n return (\n <>\n <div style={{ height: headerSize?.height }} ref={containerRef}>\n {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n </div>\n\n {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n </>\n );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/\n useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n sources: React.RefObject<HTMLElement> \| React.RefObject<HTMLElement>[],\n onResize: ResizeObserverCallback\n) => {\n const handleResize = useCallbackRef(onResize);\n\n React.useLayoutEffect(() => {\n const resizeObs = new ResizeObserver(handleResize);\n\n if (Array.isArray(sources)) {\n sources.forEach((source) => {\n if (source.current) {\n resizeObs.observe(source.current);\n }\n });\n } else if (sources.current) {\n resizeObs.observe(sources.current);\n }\n\n return () => {\n resizeObs.disconnect();\n };\n }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","right","background","shadow","zIndex","data-strapi-header-sticky","_jsxs","Flex","justifyContent","Typography","variant","tag","textColor","undefined","data-strapi-header","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","getBoundingClientRect","useEffect","_Fragment","div","style","height","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
1	+ {"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n navigationAction?: React.ReactNode;\n primaryAction?: React.ReactNode;\n secondaryAction?: React.ReactNode;\n subtitle?: React.ReactNode;\n sticky?: boolean;\n width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n (\n { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n ref\n ) => {\n const isSubtitleString = typeof subtitle === 'string';\n\n if (sticky) {\n return (\n <Box\n paddingLeft={6}\n paddingRight={6}\n paddingTop={3}\n paddingBottom={3}\n position=\"fixed\"\n top={0}\n right={0}\n background=\"neutral0\"\n shadow=\"tableShadow\"\n width={`${width}px`}\n zIndex={3}\n data-strapi-header-sticky\n >\n <Flex justifyContent=\"space-between\">\n <Flex>\n {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n <Box>\n <Typography variant=\"beta\" tag=\"h1\" {...props}>\n {title}\n </Typography>\n {isSubtitleString ? (\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n </Flex>\n </Box>\n );\n }\n\n return (\n <Box\n ref={ref}\n paddingLeft={10}\n paddingRight={10}\n paddingBottom={8}\n paddingTop={navigationAction ? 6 : 8}\n background=\"neutral100\"\n data-strapi-header\n >\n {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}\n <Flex justifyContent=\"space-between\">\n <Flex minWidth={0}>\n <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n {title}\n </Typography>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n {primaryAction}\n </Flex>\n {isSubtitleString ? (\n <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n );\n }\n);\n\n/ -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n const [headerSize, setHeaderSize] = React.useState<DOMRect \| null>(null);\n const [isVisible, setIsVisible] = React.useState(true);\n\n const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n root: null,\n rootMargin: '0px',\n threshold: 0,\n });\n\n useResizeObserver(containerRef, () => {\n if (containerRef.current) {\n setHeaderSize(containerRef.current.getBoundingClientRect());\n }\n });\n\n React.useEffect(() => {\n if (baseHeaderLayoutRef.current) {\n setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());\n }\n }, [baseHeaderLayoutRef]);\n\n return (\n <>\n <div style={{ height: headerSize?.height }} ref={containerRef}>\n {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n </div>\n\n {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n </>\n );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/\n useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n sources: React.RefObject<HTMLElement> \| React.RefObject<HTMLElement>[],\n onResize: ResizeObserverCallback\n) => {\n const handleResize = useCallbackRef(onResize);\n\n React.useLayoutEffect(() => {\n const resizeObs = new ResizeObserver(handleResize);\n\n if (Array.isArray(sources)) {\n sources.forEach((source) => {\n if (source.current) {\n resizeObs.observe(source.current);\n }\n });\n } else if (sources.current) {\n resizeObs.observe(sources.current);\n }\n\n return () => {\n resizeObs.disconnect();\n };\n }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","right","background","shadow","zIndex","data-strapi-header-sticky","_jsxs","Flex","justifyContent","Typography","variant","tag","textColor","undefined","data-strapi-header","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","getBoundingClientRect","useEffect","_Fragment","div","style","height","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs CHANGED Viewed

@@ -17,7 +17,7 @@ const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, pri
             background: "neutral0",
             shadow: "tableShadow",
             width: `${width}px`,
-            zIndex: 1,
+            zIndex: 3,
             "data-strapi-header-sticky": true,
             children: /*#__PURE__*/ jsxs(Flex, {
                 justifyContent: "space-between",

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n navigationAction?: React.ReactNode;\n primaryAction?: React.ReactNode;\n secondaryAction?: React.ReactNode;\n subtitle?: React.ReactNode;\n sticky?: boolean;\n width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n (\n { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n ref\n ) => {\n const isSubtitleString = typeof subtitle === 'string';\n\n if (sticky) {\n return (\n <Box\n paddingLeft={6}\n paddingRight={6}\n paddingTop={3}\n paddingBottom={3}\n position=\"fixed\"\n top={0}\n right={0}\n background=\"neutral0\"\n shadow=\"tableShadow\"\n width={`${width}px`}\n zIndex={1}\n data-strapi-header-sticky\n >\n <Flex justifyContent=\"space-between\">\n <Flex>\n {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n <Box>\n <Typography variant=\"beta\" tag=\"h1\" {...props}>\n {title}\n </Typography>\n {isSubtitleString ? (\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n </Flex>\n </Box>\n );\n }\n\n return (\n <Box\n ref={ref}\n paddingLeft={10}\n paddingRight={10}\n paddingBottom={8}\n paddingTop={navigationAction ? 6 : 8}\n background=\"neutral100\"\n data-strapi-header\n >\n {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}\n <Flex justifyContent=\"space-between\">\n <Flex minWidth={0}>\n <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n {title}\n </Typography>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n {primaryAction}\n </Flex>\n {isSubtitleString ? (\n <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n );\n }\n);\n\n/ -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n const [headerSize, setHeaderSize] = React.useState<DOMRect \| null>(null);\n const [isVisible, setIsVisible] = React.useState(true);\n\n const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n root: null,\n rootMargin: '0px',\n threshold: 0,\n });\n\n useResizeObserver(containerRef, () => {\n if (containerRef.current) {\n setHeaderSize(containerRef.current.getBoundingClientRect());\n }\n });\n\n React.useEffect(() => {\n if (baseHeaderLayoutRef.current) {\n setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());\n }\n }, [baseHeaderLayoutRef]);\n\n return (\n <>\n <div style={{ height: headerSize?.height }} ref={containerRef}>\n {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n </div>\n\n {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n </>\n );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/\n useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n sources: React.RefObject<HTMLElement> \| React.RefObject<HTMLElement>[],\n onResize: ResizeObserverCallback\n) => {\n const handleResize = useCallbackRef(onResize);\n\n React.useLayoutEffect(() => {\n const resizeObs = new ResizeObserver(handleResize);\n\n if (Array.isArray(sources)) {\n sources.forEach((source) => {\n if (source.current) {\n resizeObs.observe(source.current);\n }\n });\n } else if (sources.current) {\n resizeObs.observe(sources.current);\n }\n\n return () => {\n resizeObs.disconnect();\n };\n }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","right","background","shadow","zIndex","data-strapi-header-sticky","_jsxs","Flex","justifyContent","Typography","variant","tag","textColor","undefined","data-strapi-header","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","getBoundingClientRect","useEffect","_Fragment","div","style","height","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
1	+ {"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n navigationAction?: React.ReactNode;\n primaryAction?: React.ReactNode;\n secondaryAction?: React.ReactNode;\n subtitle?: React.ReactNode;\n sticky?: boolean;\n width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n (\n { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n ref\n ) => {\n const isSubtitleString = typeof subtitle === 'string';\n\n if (sticky) {\n return (\n <Box\n paddingLeft={6}\n paddingRight={6}\n paddingTop={3}\n paddingBottom={3}\n position=\"fixed\"\n top={0}\n right={0}\n background=\"neutral0\"\n shadow=\"tableShadow\"\n width={`${width}px`}\n zIndex={3}\n data-strapi-header-sticky\n >\n <Flex justifyContent=\"space-between\">\n <Flex>\n {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n <Box>\n <Typography variant=\"beta\" tag=\"h1\" {...props}>\n {title}\n </Typography>\n {isSubtitleString ? (\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n </Flex>\n </Box>\n );\n }\n\n return (\n <Box\n ref={ref}\n paddingLeft={10}\n paddingRight={10}\n paddingBottom={8}\n paddingTop={navigationAction ? 6 : 8}\n background=\"neutral100\"\n data-strapi-header\n >\n {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}\n <Flex justifyContent=\"space-between\">\n <Flex minWidth={0}>\n <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n {title}\n </Typography>\n {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n </Flex>\n {primaryAction}\n </Flex>\n {isSubtitleString ? (\n <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n {subtitle}\n </Typography>\n ) : (\n subtitle\n )}\n </Box>\n );\n }\n);\n\n/ -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n const [headerSize, setHeaderSize] = React.useState<DOMRect \| null>(null);\n const [isVisible, setIsVisible] = React.useState(true);\n\n const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n root: null,\n rootMargin: '0px',\n threshold: 0,\n });\n\n useResizeObserver(containerRef, () => {\n if (containerRef.current) {\n setHeaderSize(containerRef.current.getBoundingClientRect());\n }\n });\n\n React.useEffect(() => {\n if (baseHeaderLayoutRef.current) {\n setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());\n }\n }, [baseHeaderLayoutRef]);\n\n return (\n <>\n <div style={{ height: headerSize?.height }} ref={containerRef}>\n {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n </div>\n\n {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n </>\n );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/\n useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n sources: React.RefObject<HTMLElement> \| React.RefObject<HTMLElement>[],\n onResize: ResizeObserverCallback\n) => {\n const handleResize = useCallbackRef(onResize);\n\n React.useLayoutEffect(() => {\n const resizeObs = new ResizeObserver(handleResize);\n\n if (Array.isArray(sources)) {\n sources.forEach((source) => {\n if (source.current) {\n resizeObs.observe(source.current);\n }\n });\n } else if (sources.current) {\n resizeObs.observe(sources.current);\n }\n\n return () => {\n resizeObs.disconnect();\n };\n }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","right","background","shadow","zIndex","data-strapi-header-sticky","_jsxs","Flex","justifyContent","Typography","variant","tag","textColor","undefined","data-strapi-header","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","getBoundingClientRect","useEffect","_Fragment","div","style","height","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/Layout.js CHANGED Viewed

@@ -3,17 +3,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
-var styledComponents = require('styled-components');
+var styled = require('styled-components');
 var ActionLayout = require('./ActionLayout.js');
 var ContentLayout = require('./ContentLayout.js');
 var GridLayout = require('./GridLayout.js');
 var HeaderLayout = require('./HeaderLayout.js');
-const GridContainer = styledComponents.styled(designSystem.Box)`
+const GridContainer = styled.styled(designSystem.Box)`
   display: grid;
   grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
 `;
-const OverflowingItem = styledComponents.styled(designSystem.Box)`
+const OverflowingItem = styled.styled(designSystem.Box)`
   overflow-x: hidden;
 `;
 const RootLayout = ({ sideNav, children })=>{

package/dist/admin/admin/src/components/Layouts/Layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Layout.js","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { ActionLayout } from './ActionLayout';\nimport { ContentLayout } from './ContentLayout';\nimport { GridLayout, GridLayoutProps } from './GridLayout';\nimport { HeaderLayout, BaseHeaderLayout } from './HeaderLayout';\n\ninterface LayoutProps {\n children: React.ReactNode;\n sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n display: grid;\n grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n`;\n\nconst OverflowingItem = styled(Box)`\n overflow-x: hidden;\n`;\n\nconst RootLayout = ({ sideNav, children }: LayoutProps) => {\n return (\n <GridContainer $hasSideNav={Boolean(sideNav)}>\n {sideNav}\n <OverflowingItem paddingBottom={10}>{children}</OverflowingItem>\n </GridContainer>\n );\n};\n\nconst Layouts = {\n Root: RootLayout,\n Header: HeaderLayout,\n BaseHeader: BaseHeaderLayout,\n Grid: GridLayout,\n Action: ActionLayout,\n Content: ContentLayout,\n};\n\nexport { Layouts, type LayoutProps, type GridLayoutProps };\n"],"names":["GridContainer","styled","Box","$hasSideNav","OverflowingItem","RootLayout","sideNav","children","_jsxs","Boolean","_jsx","paddingBottom","Layouts","Root","Header","HeaderLayout","BaseHeader","BaseHeaderLayout","Grid","GridLayout","Action","ActionLayout","Content","ContentLayout"],"mappings":";;;;;;;;;;;AAeA,MAAMA,aAAAA,GAAgBC,~~uBAAOC~~,CAAAA,gBAAAA,CAA8B;;yBAElC,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAO,CAAA;AACnF,CAAC;AAED,MAAMC,eAAAA,GAAkBH,~~uBAAOC~~,CAAAA,gBAAAA,CAAI;;AAEnC,CAAC;AAED,MAAMG,aAAa,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAe,GAAA;AACpD,IAAA,qBACEC,eAACR,CAAAA,aAAAA,EAAAA;AAAcG,QAAAA,WAAAA,EAAaM,OAAQH,CAAAA,OAAAA,CAAAA;;AACjCA,YAAAA,OAAAA;0BACDI,cAACN,CAAAA,eAAAA,EAAAA;gBAAgBO,aAAe,EAAA,EAAA;AAAKJ,gBAAAA,QAAAA,EAAAA;;;;AAG3C,CAAA;AAEA,MAAMK,OAAU,GAAA;IACdC,IAAMR,EAAAA,UAAAA;IACNS,MAAQC,EAAAA,yBAAAA;IACRC,UAAYC,EAAAA,6BAAAA;IACZC,IAAMC,EAAAA,qBAAAA;IACNC,MAAQC,EAAAA,yBAAAA;IACRC,OAASC,EAAAA;AACX;;;;"}
1	+ {"version":3,"file":"Layout.js","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { ActionLayout } from './ActionLayout';\nimport { ContentLayout } from './ContentLayout';\nimport { GridLayout, GridLayoutProps } from './GridLayout';\nimport { HeaderLayout, BaseHeaderLayout } from './HeaderLayout';\n\ninterface LayoutProps {\n children: React.ReactNode;\n sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n display: grid;\n grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n`;\n\nconst OverflowingItem = styled(Box)`\n overflow-x: hidden;\n`;\n\nconst RootLayout = ({ sideNav, children }: LayoutProps) => {\n return (\n <GridContainer $hasSideNav={Boolean(sideNav)}>\n {sideNav}\n <OverflowingItem paddingBottom={10}>{children}</OverflowingItem>\n </GridContainer>\n );\n};\n\nconst Layouts = {\n Root: RootLayout,\n Header: HeaderLayout,\n BaseHeader: BaseHeaderLayout,\n Grid: GridLayout,\n Action: ActionLayout,\n Content: ContentLayout,\n};\n\nexport { Layouts, type LayoutProps, type GridLayoutProps };\n"],"names":["GridContainer","styled","Box","$hasSideNav","OverflowingItem","RootLayout","sideNav","children","_jsxs","Boolean","_jsx","paddingBottom","Layouts","Root","Header","HeaderLayout","BaseHeader","BaseHeaderLayout","Grid","GridLayout","Action","ActionLayout","Content","ContentLayout"],"mappings":";;;;;;;;;;;AAeA,MAAMA,aAAAA,GAAgBC,aAAOC,CAAAA,gBAAAA,CAA8B;;yBAElC,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAO,CAAA;AACnF,CAAC;AAED,MAAMC,eAAAA,GAAkBH,aAAOC,CAAAA,gBAAAA,CAAI;;AAEnC,CAAC;AAED,MAAMG,aAAa,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAe,GAAA;AACpD,IAAA,qBACEC,eAACR,CAAAA,aAAAA,EAAAA;AAAcG,QAAAA,WAAAA,EAAaM,OAAQH,CAAAA,OAAAA,CAAAA;;AACjCA,YAAAA,OAAAA;0BACDI,cAACN,CAAAA,eAAAA,EAAAA;gBAAgBO,aAAe,EAAA,EAAA;AAAKJ,gBAAAA,QAAAA,EAAAA;;;;AAG3C,CAAA;AAEA,MAAMK,OAAU,GAAA;IACdC,IAAMR,EAAAA,UAAAA;IACNS,MAAQC,EAAAA,yBAAAA;IACRC,UAAYC,EAAAA,6BAAAA;IACZC,IAAMC,EAAAA,qBAAAA;IACNC,MAAQC,EAAAA,yBAAAA;IACRC,OAASC,EAAAA;AACX;;;;"}