@strapi/upload 5.58.0 → 5.60.0

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 { Box, Button, Flex, Typography } from '@strapi/design-system';\nimport { ArrowClockwise, Cross, Link, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetPreview, UploadPreview } from './AssetPreview';\nimport { GhostIconButton } from './FieldControls';\nimport { UploadProgressBar } from './UploadProgressBar';\n\nimport type { FieldUpload } from './useFieldUploads';\nimport type { File } from '../../../../shared/contracts/files';\n\ntype RowTone = 'neutral' | 'primary' | 'danger';\n\nconst ROW_COLORS = {\n  neutral: { background: 'neutral100', border: 'neutral200' },\n  primary: { background: 'primary100', border: 'primary200' },\n  danger: { background: 'danger100', border: 'danger200' },\n} as const;\n\nconst Row = styled(Flex)<{ $tone: RowTone }>`\n  min-height: 7.2rem;\n  background: ${({ theme, $tone }) => theme.colors[ROW_COLORS[$tone].background]};\n  border: 1px solid ${({ theme, $tone }) => theme.colors[ROW_COLORS[$tone].border]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\ninterface RowFrameProps {\n  tone: RowTone;\n  children: React.ReactNode;\n}\n\nconst RowFrame = ({ tone, children }: RowFrameProps) => (\n  <Row $tone={tone} alignItems=\"center\" gap={4} padding={4}>\n    {children}\n  </Row>\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 * The asset a single-value field holds.\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    <RowFrame tone=\"neutral\">\n      <AssetPreview asset={asset} size=\"S\" />\n      <Name textColor=\"neutral800\" flex={1}>\n        {asset.name}\n      </Name>\n      <Flex gap={2} shrink={0}>\n        <GhostIconButton\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        </GhostIconButton>\n        {onEdit && (\n          <GhostIconButton\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          </GhostIconButton>\n        )}\n        <GhostIconButton\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        </GhostIconButton>\n      </Flex>\n    </RowFrame>\n  );\n};\n\ninterface UploadRowProps {\n  upload: FieldUpload;\n  disabled?: boolean;\n  onCancel: (upload: FieldUpload) => void;\n  onRetry: (upload: FieldUpload) => void;\n  onRemove: (upload: FieldUpload) => void;\n}\n\n/**\n * A file a single-value field is uploading, or failed to upload.\n */\nexport const UploadRow = ({\n  upload,\n  disabled = false,\n  onCancel,\n  onRetry,\n  onRemove,\n}: UploadRowProps) => {\n  const { formatMessage } = useIntl();\n  const canRetry = upload.isInStore || upload.sourceFile !== undefined;\n\n  if (upload.status === 'failed') {\n    return (\n      <RowFrame tone=\"danger\">\n        <UploadPreview file={upload.sourceFile} size=\"S\" />\n        <Name textColor=\"danger600\" flex={1}>\n          {upload.name}\n        </Name>\n        <Flex gap={2} shrink={0}>\n          {canRetry && (\n            <Button\n              variant=\"ghost\"\n              startIcon={<ArrowClockwise />}\n              disabled={disabled}\n              onClick={() => onRetry(upload)}\n            >\n              {formatMessage({\n                id: getTranslationKey('upload.progress.retry'),\n                defaultMessage: 'Retry',\n              })}\n            </Button>\n          )}\n          <Button\n            variant=\"danger-light\"\n            startIcon={<Trash />}\n            disabled={disabled}\n            onClick={() => onRemove(upload)}\n          >\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.actions.remove-failed'),\n              defaultMessage: 'Remove',\n            })}\n          </Button>\n        </Flex>\n      </RowFrame>\n    );\n  }\n\n  const uploadingLabel = formatMessage({\n    id: getTranslationKey('upload.progress.file.uploading'),\n    defaultMessage: 'Uploading...',\n  });\n\n  return (\n    <RowFrame tone=\"primary\">\n      <UploadPreview file={upload.sourceFile} size=\"S\" />\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={2} flex={1} minWidth={0}>\n        <Flex justifyContent=\"space-between\" gap={4}>\n          <Name textColor=\"neutral800\">{upload.name}</Name>\n          <Box shrink={0}>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {uploadingLabel}\n            </Typography>\n          </Box>\n        </Flex>\n        <UploadProgressBar progress={upload.progress} label={uploadingLabel} />\n      </Flex>\n      <Box shrink={0}>\n        <GhostIconButton\n          onClick={() => onCancel(upload)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.cancel'),\n              defaultMessage: 'Cancel upload of {name}',\n            },\n            { name: upload.name }\n          )}\n        >\n          <Cross />\n        </GhostIconButton>\n      </Box>\n    </RowFrame>\n  );\n};\n"],"names":["ROW_COLORS","neutral","background","border","primary","danger","Row","styled","Flex","theme","$tone","colors","borderRadius","Name","Typography","RowFrame","tone","children","_jsx","alignItems","gap","padding","AssetRow","asset","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","_jsxs","AssetPreview","size","textColor","flex","name","shrink","GhostIconButton","onClick","label","id","getTranslationKey","defaultMessage","Link","Pencil","Trash","UploadRow","upload","onCancel","onRetry","canRetry","isInStore","sourceFile","undefined","status","UploadPreview","file","Button","variant","startIcon","ArrowClockwise","uploadingLabel","direction","minWidth","justifyContent","Box","UploadProgressBar","progress","Cross"],"mappings":"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"}

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

@@ -0,0 +1,208 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex, Typography, Button, Box } from '@strapi/design-system';
+import { ArrowClockwise, Trash, Cross, Link, Pencil } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey } from '../../utils/translations.mjs';
+import { UploadPreview, AssetPreview } from './AssetPreview.mjs';
+import { GhostIconButton } from './FieldControls.mjs';
+import { UploadProgressBar } from './UploadProgressBar.mjs';
+
+const ROW_COLORS = {
+    neutral: {
+        background: 'neutral100',
+        border: 'neutral200'
+    },
+    primary: {
+        background: 'primary100',
+        border: 'primary200'
+    },
+    danger: {
+        background: 'danger100',
+        border: 'danger200'
+    }
+};
+const Row = styled(Flex)`
+  min-height: 7.2rem;
+  background: ${({ theme, $tone })=>theme.colors[ROW_COLORS[$tone].background]};
+  border: 1px solid ${({ theme, $tone })=>theme.colors[ROW_COLORS[$tone].border]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Name = styled(Typography)`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const RowFrame = ({ tone, children })=>/*#__PURE__*/ jsx(Row, {
+        $tone: tone,
+        alignItems: "center",
+        gap: 4,
+        padding: 4,
+        children: children
+    });
+/**
+ * The asset a single-value field holds.
+ */ const AssetRow = ({ asset, disabled = false, onCopyLink, onEdit, onRemove })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(RowFrame, {
+        tone: "neutral",
+        children: [
+            /*#__PURE__*/ jsx(AssetPreview, {
+                asset: asset,
+                size: "S"
+            }),
+            /*#__PURE__*/ jsx(Name, {
+                textColor: "neutral800",
+                flex: 1,
+                children: asset.name
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                shrink: 0,
+                children: [
+                    /*#__PURE__*/ jsx(GhostIconButton, {
+                        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(GhostIconButton, {
+                        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(GhostIconButton, {
+                        disabled: disabled,
+                        onClick: ()=>onRemove(asset),
+                        label: formatMessage({
+                            id: getTranslationKey('content-manager.input.actions.remove'),
+                            defaultMessage: 'Remove {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsx(Trash, {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+/**
+ * A file a single-value field is uploading, or failed to upload.
+ */ const UploadRow = ({ upload, disabled = false, onCancel, onRetry, onRemove })=>{
+    const { formatMessage } = useIntl();
+    const canRetry = upload.isInStore || upload.sourceFile !== undefined;
+    if (upload.status === 'failed') {
+        return /*#__PURE__*/ jsxs(RowFrame, {
+            tone: "danger",
+            children: [
+                /*#__PURE__*/ jsx(UploadPreview, {
+                    file: upload.sourceFile,
+                    size: "S"
+                }),
+                /*#__PURE__*/ jsx(Name, {
+                    textColor: "danger600",
+                    flex: 1,
+                    children: upload.name
+                }),
+                /*#__PURE__*/ jsxs(Flex, {
+                    gap: 2,
+                    shrink: 0,
+                    children: [
+                        canRetry && /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            startIcon: /*#__PURE__*/ jsx(ArrowClockwise, {}),
+                            disabled: disabled,
+                            onClick: ()=>onRetry(upload),
+                            children: formatMessage({
+                                id: getTranslationKey('upload.progress.retry'),
+                                defaultMessage: 'Retry'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "danger-light",
+                            startIcon: /*#__PURE__*/ jsx(Trash, {}),
+                            disabled: disabled,
+                            onClick: ()=>onRemove(upload),
+                            children: formatMessage({
+                                id: getTranslationKey('content-manager.input.actions.remove-failed'),
+                                defaultMessage: 'Remove'
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    const uploadingLabel = formatMessage({
+        id: getTranslationKey('upload.progress.file.uploading'),
+        defaultMessage: 'Uploading...'
+    });
+    return /*#__PURE__*/ jsxs(RowFrame, {
+        tone: "primary",
+        children: [
+            /*#__PURE__*/ jsx(UploadPreview, {
+                file: upload.sourceFile,
+                size: "S"
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 2,
+                flex: 1,
+                minWidth: 0,
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        justifyContent: "space-between",
+                        gap: 4,
+                        children: [
+                            /*#__PURE__*/ jsx(Name, {
+                                textColor: "neutral800",
+                                children: upload.name
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                shrink: 0,
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "pi",
+                                    textColor: "neutral600",
+                                    children: uploadingLabel
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(UploadProgressBar, {
+                        progress: upload.progress,
+                        label: uploadingLabel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                shrink: 0,
+                children: /*#__PURE__*/ jsx(GhostIconButton, {
+                    onClick: ()=>onCancel(upload),
+                    label: formatMessage({
+                        id: getTranslationKey('content-manager.input.actions.cancel'),
+                        defaultMessage: 'Cancel upload of {name}'
+                    }, {
+                        name: upload.name
+                    }),
+                    children: /*#__PURE__*/ jsx(Cross, {})
+                })
+            })
+        ]
+    });
+};
+
+export { AssetRow, UploadRow };
+//# 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 { Box, Button, Flex, Typography } from '@strapi/design-system';\nimport { ArrowClockwise, Cross, Link, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetPreview, UploadPreview } from './AssetPreview';\nimport { GhostIconButton } from './FieldControls';\nimport { UploadProgressBar } from './UploadProgressBar';\n\nimport type { FieldUpload } from './useFieldUploads';\nimport type { File } from '../../../../shared/contracts/files';\n\ntype RowTone = 'neutral' | 'primary' | 'danger';\n\nconst ROW_COLORS = {\n  neutral: { background: 'neutral100', border: 'neutral200' },\n  primary: { background: 'primary100', border: 'primary200' },\n  danger: { background: 'danger100', border: 'danger200' },\n} as const;\n\nconst Row = styled(Flex)<{ $tone: RowTone }>`\n  min-height: 7.2rem;\n  background: ${({ theme, $tone }) => theme.colors[ROW_COLORS[$tone].background]};\n  border: 1px solid ${({ theme, $tone }) => theme.colors[ROW_COLORS[$tone].border]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\ninterface RowFrameProps {\n  tone: RowTone;\n  children: React.ReactNode;\n}\n\nconst RowFrame = ({ tone, children }: RowFrameProps) => (\n  <Row $tone={tone} alignItems=\"center\" gap={4} padding={4}>\n    {children}\n  </Row>\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 * The asset a single-value field holds.\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    <RowFrame tone=\"neutral\">\n      <AssetPreview asset={asset} size=\"S\" />\n      <Name textColor=\"neutral800\" flex={1}>\n        {asset.name}\n      </Name>\n      <Flex gap={2} shrink={0}>\n        <GhostIconButton\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        </GhostIconButton>\n        {onEdit && (\n          <GhostIconButton\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          </GhostIconButton>\n        )}\n        <GhostIconButton\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        </GhostIconButton>\n      </Flex>\n    </RowFrame>\n  );\n};\n\ninterface UploadRowProps {\n  upload: FieldUpload;\n  disabled?: boolean;\n  onCancel: (upload: FieldUpload) => void;\n  onRetry: (upload: FieldUpload) => void;\n  onRemove: (upload: FieldUpload) => void;\n}\n\n/**\n * A file a single-value field is uploading, or failed to upload.\n */\nexport const UploadRow = ({\n  upload,\n  disabled = false,\n  onCancel,\n  onRetry,\n  onRemove,\n}: UploadRowProps) => {\n  const { formatMessage } = useIntl();\n  const canRetry = upload.isInStore || upload.sourceFile !== undefined;\n\n  if (upload.status === 'failed') {\n    return (\n      <RowFrame tone=\"danger\">\n        <UploadPreview file={upload.sourceFile} size=\"S\" />\n        <Name textColor=\"danger600\" flex={1}>\n          {upload.name}\n        </Name>\n        <Flex gap={2} shrink={0}>\n          {canRetry && (\n            <Button\n              variant=\"ghost\"\n              startIcon={<ArrowClockwise />}\n              disabled={disabled}\n              onClick={() => onRetry(upload)}\n            >\n              {formatMessage({\n                id: getTranslationKey('upload.progress.retry'),\n                defaultMessage: 'Retry',\n              })}\n            </Button>\n          )}\n          <Button\n            variant=\"danger-light\"\n            startIcon={<Trash />}\n            disabled={disabled}\n            onClick={() => onRemove(upload)}\n          >\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.actions.remove-failed'),\n              defaultMessage: 'Remove',\n            })}\n          </Button>\n        </Flex>\n      </RowFrame>\n    );\n  }\n\n  const uploadingLabel = formatMessage({\n    id: getTranslationKey('upload.progress.file.uploading'),\n    defaultMessage: 'Uploading...',\n  });\n\n  return (\n    <RowFrame tone=\"primary\">\n      <UploadPreview file={upload.sourceFile} size=\"S\" />\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={2} flex={1} minWidth={0}>\n        <Flex justifyContent=\"space-between\" gap={4}>\n          <Name textColor=\"neutral800\">{upload.name}</Name>\n          <Box shrink={0}>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {uploadingLabel}\n            </Typography>\n          </Box>\n        </Flex>\n        <UploadProgressBar progress={upload.progress} label={uploadingLabel} />\n      </Flex>\n      <Box shrink={0}>\n        <GhostIconButton\n          onClick={() => onCancel(upload)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.cancel'),\n              defaultMessage: 'Cancel upload of {name}',\n            },\n            { name: upload.name }\n          )}\n        >\n          <Cross />\n        </GhostIconButton>\n      </Box>\n    </RowFrame>\n  );\n};\n"],"names":["ROW_COLORS","neutral","background","border","primary","danger","Row","styled","Flex","theme","$tone","colors","borderRadius","Name","Typography","RowFrame","tone","children","_jsx","alignItems","gap","padding","AssetRow","asset","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","_jsxs","AssetPreview","size","textColor","flex","name","shrink","GhostIconButton","onClick","label","id","getTranslationKey","defaultMessage","Link","Pencil","Trash","UploadRow","upload","onCancel","onRetry","canRetry","isInStore","sourceFile","undefined","status","UploadPreview","file","Button","variant","startIcon","ArrowClockwise","uploadingLabel","direction","minWidth","justifyContent","Box","UploadProgressBar","progress","Cross"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+/**
+ * A ghost `IconButton` that stays a bare icon when disabled. The design system
+ * paints every disabled button, ghost included, as a bordered grey plate.
+ */ const GhostIconButton = styledComponents.styled(designSystem.IconButton).attrs({
+    variant: 'ghost'
+})`
+  &&[aria-disabled='true'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &&[aria-disabled='true'] svg path {
+    fill: ${({ theme })=>theme.colors.neutral300};
+  }
+`;
+/**
+ * A `Menu.Item` whose label greys out with its icon when disabled. The design
+ * system computes a disabled text colour, then its own stylesheet overrides it.
+ */ const FieldMenuItem = styledComponents.styled(designSystem.Menu.Item)`
+  &&[aria-disabled='true'] {
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+`;
+
+exports.FieldMenuItem = FieldMenuItem;
+exports.GhostIconButton = GhostIconButton;
+//# sourceMappingURL=FieldControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControls.js","sources":["../../../../admin/src/components/MediaLibraryInput/FieldControls.tsx"],"sourcesContent":["import { IconButton, Menu } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\n/**\n * A ghost `IconButton` that stays a bare icon when disabled. The design system\n * paints every disabled button, ghost included, as a bordered grey plate.\n */\nexport const GhostIconButton = styled(IconButton).attrs({ variant: 'ghost' })`\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral300};\n  }\n`;\n\n/**\n * A `Menu.Item` whose label greys out with its icon when disabled. The design\n * system computes a disabled text colour, then its own stylesheet overrides it.\n */\nexport const FieldMenuItem = styled(Menu.Item)`\n  &&[aria-disabled='true'] {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n"],"names":["GhostIconButton","styled","IconButton","attrs","variant","theme","colors","neutral300","FieldMenuItem","Menu","Item","neutral500"],"mappings":";;;;;AAGA;;;AAGC,IACM,MAAMA,eAAAA,GAAkBC,uBAAAA,CAAOC,uBAAAA,CAAAA,CAAYC,KAAK,CAAC;IAAEC,OAAAA,EAAS;AAAQ,CAAA,CAAE;;;;;;;UAOnE,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;AAEnD;AAEA;;;AAGC,IACM,MAAMC,aAAAA,GAAgBP,wBAAOQ,iBAAAA,CAAKC,IAAI,CAAC;;WAEnC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACK,UAAU,CAAC;;AAEpD;;;;;"}

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

@@ -0,0 +1,29 @@
+import { IconButton, Menu } from '@strapi/design-system';
+import { styled } from 'styled-components';
+
+/**
+ * A ghost `IconButton` that stays a bare icon when disabled. The design system
+ * paints every disabled button, ghost included, as a bordered grey plate.
+ */ const GhostIconButton = styled(IconButton).attrs({
+    variant: 'ghost'
+})`
+  &&[aria-disabled='true'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &&[aria-disabled='true'] svg path {
+    fill: ${({ theme })=>theme.colors.neutral300};
+  }
+`;
+/**
+ * A `Menu.Item` whose label greys out with its icon when disabled. The design
+ * system computes a disabled text colour, then its own stylesheet overrides it.
+ */ const FieldMenuItem = styled(Menu.Item)`
+  &&[aria-disabled='true'] {
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+`;
+
+export { FieldMenuItem, GhostIconButton };
+//# sourceMappingURL=FieldControls.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControls.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/FieldControls.tsx"],"sourcesContent":["import { IconButton, Menu } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\n/**\n * A ghost `IconButton` that stays a bare icon when disabled. The design system\n * paints every disabled button, ghost included, as a bordered grey plate.\n */\nexport const GhostIconButton = styled(IconButton).attrs({ variant: 'ghost' })`\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral300};\n  }\n`;\n\n/**\n * A `Menu.Item` whose label greys out with its icon when disabled. The design\n * system computes a disabled text colour, then its own stylesheet overrides it.\n */\nexport const FieldMenuItem = styled(Menu.Item)`\n  &&[aria-disabled='true'] {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n"],"names":["GhostIconButton","styled","IconButton","attrs","variant","theme","colors","neutral300","FieldMenuItem","Menu","Item","neutral500"],"mappings":";;;AAGA;;;AAGC,IACM,MAAMA,eAAAA,GAAkBC,MAAAA,CAAOC,UAAAA,CAAAA,CAAYC,KAAK,CAAC;IAAEC,OAAAA,EAAS;AAAQ,CAAA,CAAE;;;;;;;UAOnE,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;AAEnD;AAEA;;;AAGC,IACM,MAAMC,aAAAA,GAAgBP,OAAOQ,IAAAA,CAAKC,IAAI,CAAC;;WAEnC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACK,UAAU,CAAC;;AAEpD;;;;"}