@strapi/upload 5.58.0 → 5.59.0

package/dist/admin/components/MediaLibraryInput/AssetRow.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var enums = require('../../enums.js');
+var files = require('../../utils/files.js');
+var getAssetIcon = require('../../utils/getAssetIcon.js');
+var translations = require('../../utils/translations.js');
+
+const Row = styledComponents.styled(designSystem.Flex)`
+  background: ${({ theme })=>theme.colors.neutral0};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Thumbnail = styledComponents.styled(designSystem.Flex)`
+  width: 3.2rem;
+  height: 3.2rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 4px;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral100};
+`;
+const ThumbnailImage = styledComponents.styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const Name = styledComponents.styled(designSystem.Typography)`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const AssetThumbnail = ({ asset })=>{
+    const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;
+    if (mime?.includes(enums.ASSET_TYPES.Image)) {
+        // Same two rules the grid preview applies: a `updatedAt` cache-buster so a
+        // replaced asset stops serving its old thumbnail, skipped on signed URLs
+        // because an extra param invalidates the signature (#26581).
+        const rawUrl = files.prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? files.prefixFileUrlWithBackendUrl(url);
+        const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;
+        const src = rawUrl && cacheKey !== undefined ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}` : rawUrl;
+        if (src) {
+            return /*#__PURE__*/ jsxRuntime.jsx(Thumbnail, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(ThumbnailImage, {
+                    src: src,
+                    alt: alternativeText || '',
+                    crossOrigin: !isLocal && isUrlSigned ? 'anonymous' : undefined,
+                    draggable: false
+                })
+            });
+        }
+    }
+    const DocIcon = getAssetIcon.getAssetIcon(mime, ext);
+    return /*#__PURE__*/ jsxRuntime.jsx(Thumbnail, {
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(DocIcon, {
+            width: 20,
+            height: 20
+        })
+    });
+};
+/**
+ * One asset already held by the field. The uploading and failed variants the
+ * design also specifies are not here yet — while an upload runs, the global
+ * progress dialog is what reports it.
+ */ const AssetRow = ({ asset, disabled = false, onCopyLink, onEdit, onRemove })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(Row, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 3,
+        paddingLeft: 3,
+        paddingRight: 3,
+        paddingTop: 2,
+        paddingBottom: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                alignItems: "center",
+                gap: 3,
+                minWidth: 0,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(AssetThumbnail, {
+                        asset: asset
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Name, {
+                        textColor: "neutral800",
+                        children: asset.name
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                tag: "span",
+                gap: 1,
+                shrink: 0,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        variant: "ghost",
+                        onClick: ()=>onCopyLink(asset),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.copy-link'),
+                            defaultMessage: 'Copy link to {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {})
+                    }),
+                    onEdit && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        variant: "ghost",
+                        disabled: disabled,
+                        onClick: ()=>onEdit(asset),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.edit'),
+                            defaultMessage: 'Edit {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        variant: "ghost",
+                        disabled: disabled,
+                        onClick: ()=>onRemove(asset),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.remove'),
+                            defaultMessage: 'Remove {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.AssetRow = AssetRow;
+//# sourceMappingURL=AssetRow.js.map

package/dist/admin/components/MediaLibraryInput/AssetRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetRow.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetRow.tsx"],"sourcesContent":["import { Flex, IconButton, Typography } from '@strapi/design-system';\nimport { Link, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../utils/files';\nimport { getAssetIcon } from '../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport type { File } from '../../../../shared/contracts/files';\n\nconst Row = styled(Flex)`\n  background: ${({ theme }) => theme.colors.neutral0};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Thumbnail = styled(Flex)`\n  width: 3.2rem;\n  height: 3.2rem;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 4px;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral100};\n`;\n\nconst ThumbnailImage = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\ninterface AssetThumbnailProps {\n  asset: File;\n}\n\nconst AssetThumbnail = ({ asset }: AssetThumbnailProps) => {\n  const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n  if (mime?.includes(ASSET_TYPES.Image)) {\n    // Same two rules the grid preview applies: a `updatedAt` cache-buster so a\n    // replaced asset stops serving its old thumbnail, skipped on signed URLs\n    // because an extra param invalidates the signature (#26581).\n    const rawUrl =\n      prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);\n    const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;\n    const src =\n      rawUrl && cacheKey !== undefined\n        ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}`\n        : rawUrl;\n\n    if (src) {\n      return (\n        <Thumbnail>\n          <ThumbnailImage\n            src={src}\n            alt={alternativeText || ''}\n            crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n            draggable={false}\n          />\n        </Thumbnail>\n      );\n    }\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <Thumbnail justifyContent=\"center\" alignItems=\"center\">\n      <DocIcon width={20} height={20} />\n    </Thumbnail>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n  disabled?: boolean;\n  onCopyLink: (asset: File) => void;\n  onEdit?: (asset: File) => void;\n  onRemove: (asset: File) => void;\n}\n\n/**\n * One asset already held by the field. The uploading and failed variants the\n * design also specifies are not here yet — while an upload runs, the global\n * progress dialog is what reports it.\n */\nexport const AssetRow = ({\n  asset,\n  disabled = false,\n  onCopyLink,\n  onEdit,\n  onRemove,\n}: AssetRowProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Row\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      gap={3}\n      paddingLeft={3}\n      paddingRight={3}\n      paddingTop={2}\n      paddingBottom={2}\n    >\n      <Flex alignItems=\"center\" gap={3} minWidth={0}>\n        <AssetThumbnail asset={asset} />\n        <Name textColor=\"neutral800\">{asset.name}</Name>\n      </Flex>\n      <Flex tag=\"span\" gap={1} shrink={0}>\n        <IconButton\n          variant=\"ghost\"\n          onClick={() => onCopyLink(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.copy-link'),\n              defaultMessage: 'Copy link to {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Link />\n        </IconButton>\n        {onEdit && (\n          <IconButton\n            variant=\"ghost\"\n            disabled={disabled}\n            onClick={() => onEdit(asset)}\n            label={formatMessage(\n              {\n                id: getTranslationKey('content-manager.input.actions.edit'),\n                defaultMessage: 'Edit {name}',\n              },\n              { name: asset.name }\n            )}\n          >\n            <Pencil />\n          </IconButton>\n        )}\n        <IconButton\n          variant=\"ghost\"\n          disabled={disabled}\n          onClick={() => onRemove(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.remove'),\n              defaultMessage: 'Remove {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Trash />\n        </IconButton>\n      </Flex>\n    </Row>\n  );\n};\n"],"names":["Row","styled","Flex","theme","colors","neutral0","neutral200","borderRadius","Thumbnail","neutral500","neutral100","ThumbnailImage","img","Name","Typography","AssetThumbnail","asset","alternativeText","ext","formats","mime","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","rawUrl","prefixFileUrlWithBackendUrl","thumbnail","cacheKey","Date","getTime","undefined","src","_jsx","alt","crossOrigin","draggable","DocIcon","getAssetIcon","justifyContent","alignItems","width","height","AssetRow","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","_jsxs","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","minWidth","textColor","name","tag","shrink","IconButton","variant","onClick","label","id","getTranslationKey","defaultMessage","Link","Pencil","Trash"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetRow.mjs

@@ -0,0 +1,142 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex, Typography, IconButton } from '@strapi/design-system';
+import { Link, Pencil, Trash } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { ASSET_TYPES } from '../../enums.mjs';
+import { prefixFileUrlWithBackendUrl } from '../../utils/files.mjs';
+import { getAssetIcon } from '../../utils/getAssetIcon.mjs';
+import { getTranslationKey } from '../../utils/translations.mjs';
+
+const Row = styled(Flex)`
+  background: ${({ theme })=>theme.colors.neutral0};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Thumbnail = styled(Flex)`
+  width: 3.2rem;
+  height: 3.2rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 4px;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral100};
+`;
+const ThumbnailImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const Name = styled(Typography)`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const AssetThumbnail = ({ asset })=>{
+    const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;
+    if (mime?.includes(ASSET_TYPES.Image)) {
+        // Same two rules the grid preview applies: a `updatedAt` cache-buster so a
+        // replaced asset stops serving its old thumbnail, skipped on signed URLs
+        // because an extra param invalidates the signature (#26581).
+        const rawUrl = prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
+        const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;
+        const src = rawUrl && cacheKey !== undefined ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}` : rawUrl;
+        if (src) {
+            return /*#__PURE__*/ jsx(Thumbnail, {
+                children: /*#__PURE__*/ jsx(ThumbnailImage, {
+                    src: src,
+                    alt: alternativeText || '',
+                    crossOrigin: !isLocal && isUrlSigned ? 'anonymous' : undefined,
+                    draggable: false
+                })
+            });
+        }
+    }
+    const DocIcon = getAssetIcon(mime, ext);
+    return /*#__PURE__*/ jsx(Thumbnail, {
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsx(DocIcon, {
+            width: 20,
+            height: 20
+        })
+    });
+};
+/**
+ * One asset already held by the field. The uploading and failed variants the
+ * design also specifies are not here yet — while an upload runs, the global
+ * progress dialog is what reports it.
+ */ const AssetRow = ({ asset, disabled = false, onCopyLink, onEdit, onRemove })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Row, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 3,
+        paddingLeft: 3,
+        paddingRight: 3,
+        paddingTop: 2,
+        paddingBottom: 2,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                alignItems: "center",
+                gap: 3,
+                minWidth: 0,
+                children: [
+                    /*#__PURE__*/ jsx(AssetThumbnail, {
+                        asset: asset
+                    }),
+                    /*#__PURE__*/ jsx(Name, {
+                        textColor: "neutral800",
+                        children: asset.name
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                tag: "span",
+                gap: 1,
+                shrink: 0,
+                children: [
+                    /*#__PURE__*/ jsx(IconButton, {
+                        variant: "ghost",
+                        onClick: ()=>onCopyLink(asset),
+                        label: formatMessage({
+                            id: getTranslationKey('content-manager.input.actions.copy-link'),
+                            defaultMessage: 'Copy link to {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsx(Link, {})
+                    }),
+                    onEdit && /*#__PURE__*/ jsx(IconButton, {
+                        variant: "ghost",
+                        disabled: disabled,
+                        onClick: ()=>onEdit(asset),
+                        label: formatMessage({
+                            id: getTranslationKey('content-manager.input.actions.edit'),
+                            defaultMessage: 'Edit {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsx(Pencil, {})
+                    }),
+                    /*#__PURE__*/ jsx(IconButton, {
+                        variant: "ghost",
+                        disabled: disabled,
+                        onClick: ()=>onRemove(asset),
+                        label: formatMessage({
+                            id: getTranslationKey('content-manager.input.actions.remove'),
+                            defaultMessage: 'Remove {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsx(Trash, {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { AssetRow };
+//# sourceMappingURL=AssetRow.mjs.map

package/dist/admin/components/MediaLibraryInput/AssetRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetRow.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetRow.tsx"],"sourcesContent":["import { Flex, IconButton, Typography } from '@strapi/design-system';\nimport { Link, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../utils/files';\nimport { getAssetIcon } from '../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport type { File } from '../../../../shared/contracts/files';\n\nconst Row = styled(Flex)`\n  background: ${({ theme }) => theme.colors.neutral0};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Thumbnail = styled(Flex)`\n  width: 3.2rem;\n  height: 3.2rem;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 4px;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral100};\n`;\n\nconst ThumbnailImage = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\ninterface AssetThumbnailProps {\n  asset: File;\n}\n\nconst AssetThumbnail = ({ asset }: AssetThumbnailProps) => {\n  const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n  if (mime?.includes(ASSET_TYPES.Image)) {\n    // Same two rules the grid preview applies: a `updatedAt` cache-buster so a\n    // replaced asset stops serving its old thumbnail, skipped on signed URLs\n    // because an extra param invalidates the signature (#26581).\n    const rawUrl =\n      prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);\n    const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;\n    const src =\n      rawUrl && cacheKey !== undefined\n        ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}`\n        : rawUrl;\n\n    if (src) {\n      return (\n        <Thumbnail>\n          <ThumbnailImage\n            src={src}\n            alt={alternativeText || ''}\n            crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n            draggable={false}\n          />\n        </Thumbnail>\n      );\n    }\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <Thumbnail justifyContent=\"center\" alignItems=\"center\">\n      <DocIcon width={20} height={20} />\n    </Thumbnail>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n  disabled?: boolean;\n  onCopyLink: (asset: File) => void;\n  onEdit?: (asset: File) => void;\n  onRemove: (asset: File) => void;\n}\n\n/**\n * One asset already held by the field. The uploading and failed variants the\n * design also specifies are not here yet — while an upload runs, the global\n * progress dialog is what reports it.\n */\nexport const AssetRow = ({\n  asset,\n  disabled = false,\n  onCopyLink,\n  onEdit,\n  onRemove,\n}: AssetRowProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Row\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      gap={3}\n      paddingLeft={3}\n      paddingRight={3}\n      paddingTop={2}\n      paddingBottom={2}\n    >\n      <Flex alignItems=\"center\" gap={3} minWidth={0}>\n        <AssetThumbnail asset={asset} />\n        <Name textColor=\"neutral800\">{asset.name}</Name>\n      </Flex>\n      <Flex tag=\"span\" gap={1} shrink={0}>\n        <IconButton\n          variant=\"ghost\"\n          onClick={() => onCopyLink(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.copy-link'),\n              defaultMessage: 'Copy link to {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Link />\n        </IconButton>\n        {onEdit && (\n          <IconButton\n            variant=\"ghost\"\n            disabled={disabled}\n            onClick={() => onEdit(asset)}\n            label={formatMessage(\n              {\n                id: getTranslationKey('content-manager.input.actions.edit'),\n                defaultMessage: 'Edit {name}',\n              },\n              { name: asset.name }\n            )}\n          >\n            <Pencil />\n          </IconButton>\n        )}\n        <IconButton\n          variant=\"ghost\"\n          disabled={disabled}\n          onClick={() => onRemove(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.remove'),\n              defaultMessage: 'Remove {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Trash />\n        </IconButton>\n      </Flex>\n    </Row>\n  );\n};\n"],"names":["Row","styled","Flex","theme","colors","neutral0","neutral200","borderRadius","Thumbnail","neutral500","neutral100","ThumbnailImage","img","Name","Typography","AssetThumbnail","asset","alternativeText","ext","formats","mime","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","rawUrl","prefixFileUrlWithBackendUrl","thumbnail","cacheKey","Date","getTime","undefined","src","_jsx","alt","crossOrigin","draggable","DocIcon","getAssetIcon","justifyContent","alignItems","width","height","AssetRow","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","_jsxs","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","minWidth","textColor","name","tag","shrink","IconButton","variant","onClick","label","id","getTranslationKey","defaultMessage","Link","Pencil","Trash"],"mappings":"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"}