@strapi/upload 5.58.0 → 5.59.0

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

@@ -0,0 +1,141 @@
+'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 useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
+var ActionsMenuContent = require('../../pages/Assets/components/ActionsMenuContent.js');
+var translations = require('../../utils/translations.js');
+
+// The trigger reads as a link on the label row, not as a button: no padding, no
+// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the
+// colour is set here and forced past the design system's own span rule.
+const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
+  padding: 0;
+
+  // No hover treatment at all: this reads as a link on the label row, and the
+  // design system's ghost button paints a primary100 plate behind it (also while
+  // the menu is open, via data-state).
+  &,
+  &:hover,
+  &[data-state='open'] {
+    background: transparent;
+    background-color: transparent;
+  }
+
+  &,
+  & span,
+  &:hover span {
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+
+  & span {
+    font-weight: ${({ theme })=>theme.fontWeights.regular};
+  }
+
+  // The chevron needs the fill, not the colour: the design system paints button
+  // icons with its own "svg path { fill }" rule per variant, and repaints them
+  // again on hover — both beat an inherited color and the icon's own
+  // fill="currentColor". Doubled specificity so these land after those rules
+  // whatever order they are injected in.
+  && svg path,
+  &&:hover svg path {
+    fill: ${({ theme })=>theme.colors.primary600};
+  }
+
+  // The design system's disabled button is a bordered grey plate; this stays a
+  // greyed-out link instead.
+  &&[aria-disabled='true'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &[aria-disabled='true'],
+  &[aria-disabled='true'] span {
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+
+  &&[aria-disabled='true'] svg path {
+    fill: ${({ theme })=>theme.colors.neutral500};
+  }
+`;
+/**
+ * The field's "Add asset" menu, on the label row.
+ *
+ * Browsing needs the Media Library's read permission, the two upload entries
+ * `assets.create`; each entry disappears without its permission, and the
+ * trigger itself goes when nothing is left to offer, rather than opening an
+ * empty menu.
+ *
+ * The drop zone below keeps working whatever this shows — it is a second way
+ * in, not the only one.
+ */ const AddAssetMenu = ({ disabled = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { canRead, canCreate, isLoading } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    // `useRBAC` starts every instance at `isLoading: true` with the flags false.
+    // Until it settles, every entry shows but none can be picked: hiding them
+    // would flash a smaller menu, enabling them would lead to a 403.
+    const canBrowse = isLoading || canRead;
+    const canUpload = isLoading || canCreate;
+    if (!canBrowse && !canUpload) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(AddAssetTrigger, {
+                variant: "ghost",
+                disabled: disabled,
+                endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {
+                    "aria-hidden": true
+                }),
+                children: formatMessage({
+                    id: translations.getTranslationKey('content-manager.input.add-asset'),
+                    defaultMessage: 'Add asset'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(ActionsMenuContent.ActionsMenuContent, {
+                popoverPlacement: "bottom-end",
+                zIndex: 2,
+                minWidth: "22rem",
+                children: [
+                    canBrowse && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Images, {}),
+                        disabled: isLoading,
+                        onSelect: onBrowseLibrary,
+                        children: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.add-asset.browse'),
+                            defaultMessage: 'Browse library'
+                        })
+                    }),
+                    canUpload && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Upload, {}),
+                                disabled: isLoading,
+                                onSelect: onUploadFromDevice,
+                                children: formatMessage({
+                                    id: translations.getTranslationKey('content-manager.input.add-asset.device'),
+                                    defaultMessage: 'Upload from device'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
+                                disabled: isLoading,
+                                onSelect: onUploadFromUrl,
+                                children: formatMessage({
+                                    id: translations.getTranslationKey('content-manager.input.add-asset.url'),
+                                    defaultMessage: 'Upload from URL'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.AddAssetMenu = AddAssetMenu;
+//# sourceMappingURL=AddAssetMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddAssetMenu.js","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <Menu.Item startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </Menu.Item>\n        )}\n\n        {canUpload && (\n          <>\n            <Menu.Item startIcon={<Upload />} disabled={isLoading} onSelect={onUploadFromDevice}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </Menu.Item>\n\n            <Menu.Item startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </Menu.Item>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","canBrowse","canUpload","_jsxs","Root","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","Item","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}

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

@@ -0,0 +1,139 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Menu } from '@strapi/design-system';
+import { ChevronDown, Images, Upload, Link } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
+import { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent.mjs';
+import { getTranslationKey } from '../../utils/translations.mjs';
+
+// The trigger reads as a link on the label row, not as a button: no padding, no
+// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the
+// colour is set here and forced past the design system's own span rule.
+const AddAssetTrigger = styled(Menu.Trigger)`
+  padding: 0;
+
+  // No hover treatment at all: this reads as a link on the label row, and the
+  // design system's ghost button paints a primary100 plate behind it (also while
+  // the menu is open, via data-state).
+  &,
+  &:hover,
+  &[data-state='open'] {
+    background: transparent;
+    background-color: transparent;
+  }
+
+  &,
+  & span,
+  &:hover span {
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+
+  & span {
+    font-weight: ${({ theme })=>theme.fontWeights.regular};
+  }
+
+  // The chevron needs the fill, not the colour: the design system paints button
+  // icons with its own "svg path { fill }" rule per variant, and repaints them
+  // again on hover — both beat an inherited color and the icon's own
+  // fill="currentColor". Doubled specificity so these land after those rules
+  // whatever order they are injected in.
+  && svg path,
+  &&:hover svg path {
+    fill: ${({ theme })=>theme.colors.primary600};
+  }
+
+  // The design system's disabled button is a bordered grey plate; this stays a
+  // greyed-out link instead.
+  &&[aria-disabled='true'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &[aria-disabled='true'],
+  &[aria-disabled='true'] span {
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+
+  &&[aria-disabled='true'] svg path {
+    fill: ${({ theme })=>theme.colors.neutral500};
+  }
+`;
+/**
+ * The field's "Add asset" menu, on the label row.
+ *
+ * Browsing needs the Media Library's read permission, the two upload entries
+ * `assets.create`; each entry disappears without its permission, and the
+ * trigger itself goes when nothing is left to offer, rather than opening an
+ * empty menu.
+ *
+ * The drop zone below keeps working whatever this shows — it is a second way
+ * in, not the only one.
+ */ const AddAssetMenu = ({ disabled = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
+    const { formatMessage } = useIntl();
+    const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();
+    // `useRBAC` starts every instance at `isLoading: true` with the flags false.
+    // Until it settles, every entry shows but none can be picked: hiding them
+    // would flash a smaller menu, enabling them would lead to a 403.
+    const canBrowse = isLoading || canRead;
+    const canUpload = isLoading || canCreate;
+    if (!canBrowse && !canUpload) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxs(Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsx(AddAssetTrigger, {
+                variant: "ghost",
+                disabled: disabled,
+                endIcon: /*#__PURE__*/ jsx(ChevronDown, {
+                    "aria-hidden": true
+                }),
+                children: formatMessage({
+                    id: getTranslationKey('content-manager.input.add-asset'),
+                    defaultMessage: 'Add asset'
+                })
+            }),
+            /*#__PURE__*/ jsxs(ActionsMenuContent, {
+                popoverPlacement: "bottom-end",
+                zIndex: 2,
+                minWidth: "22rem",
+                children: [
+                    canBrowse && /*#__PURE__*/ jsx(Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsx(Images, {}),
+                        disabled: isLoading,
+                        onSelect: onBrowseLibrary,
+                        children: formatMessage({
+                            id: getTranslationKey('content-manager.input.add-asset.browse'),
+                            defaultMessage: 'Browse library'
+                        })
+                    }),
+                    canUpload && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Menu.Item, {
+                                startIcon: /*#__PURE__*/ jsx(Upload, {}),
+                                disabled: isLoading,
+                                onSelect: onUploadFromDevice,
+                                children: formatMessage({
+                                    id: getTranslationKey('content-manager.input.add-asset.device'),
+                                    defaultMessage: 'Upload from device'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Menu.Item, {
+                                startIcon: /*#__PURE__*/ jsx(Link, {}),
+                                disabled: isLoading,
+                                onSelect: onUploadFromUrl,
+                                children: formatMessage({
+                                    id: getTranslationKey('content-manager.input.add-asset.url'),
+                                    defaultMessage: 'Upload from URL'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { AddAssetMenu };
+//# sourceMappingURL=AddAssetMenu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddAssetMenu.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <Menu.Item startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </Menu.Item>\n        )}\n\n        {canUpload && (\n          <>\n            <Menu.Item startIcon={<Upload />} disabled={isLoading} onSelect={onUploadFromDevice}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </Menu.Item>\n\n            <Menu.Item startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </Menu.Item>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","canBrowse","canUpload","_jsxs","Root","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","Item","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}

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

@@ -0,0 +1,129 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 translations = require('../../utils/translations.js');
+
+const Zone = styledComponents.styled.button`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  width: 100%;
+  min-height: 12rem;
+  padding: ${({ theme })=>theme.spaces[6]};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral100};
+  cursor: pointer;
+
+  // Only while a file is dragged over the zone: it marks where the file will
+  // land, so it has nothing to say to a pointer that is merely passing through.
+  // Drawn inside rather than on the box itself, so the field keeps its own
+  // outline and the invitation reads as an area to drop into.
+  &::after {
+    content: '';
+    position: absolute;
+    inset: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[4]};
+    border: 1px dashed ${({ theme })=>theme.colors.primary600};
+    border-radius: ${({ theme })=>theme.borderRadius};
+    opacity: ${({ $isDragging })=>$isDragging ? 1 : 0};
+    pointer-events: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: 2px;
+  }
+`;
+/**
+ * The field's own drop target. Deliberately not the Media Library page's
+ * `UploadDropZoneProvider`: that one covers a whole route and paints a
+ * full-surface overlay, where this has to stay inside one field on a form that
+ * may hold several of them.
+ */ const AssetDropZone = ({ disabled = false, onClick, onDropFiles })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [isDragging, setIsDragging] = React.useState(false);
+    // Drag events fire on descendants too, so a plain boolean flickers as the
+    // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.
+    const dragDepth = React.useRef(0);
+    const handleDragEnter = React.useCallback((event)=>{
+        event.preventDefault();
+        if (disabled || !event.dataTransfer.types.includes('Files')) {
+            return;
+        }
+        dragDepth.current += 1;
+        setIsDragging(true);
+    }, [
+        disabled
+    ]);
+    const handleDragLeave = React.useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setIsDragging(false);
+        }
+    }, []);
+    const handleDragOver = React.useCallback((event)=>{
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+    }, []);
+    const handleDrop = React.useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current = 0;
+        setIsDragging(false);
+        if (disabled) {
+            return;
+        }
+        const files = Array.from(event.dataTransfer.files ?? []);
+        if (files.length > 0) {
+            onDropFiles(files);
+        }
+    }, [
+        disabled,
+        onDropFiles
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(Zone, {
+        type: "button",
+        $isDragging: isDragging,
+        "aria-disabled": disabled,
+        onClick: ()=>!disabled && onClick(),
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                justifyContent: "center",
+                color: disabled ? 'neutral500' : 'primary600',
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.PlusCircle, {
+                    width: "3.2rem",
+                    height: "3.2rem"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                textColor: "neutral600",
+                fontWeight: "bold",
+                variant: "pi",
+                children: formatMessage({
+                    id: translations.getTranslationKey('mediaLibraryInput.placeholder'),
+                    defaultMessage: 'Click to add an asset or drag and drop one in this area'
+                })
+            })
+        ]
+    });
+};
+
+exports.AssetDropZone = AssetDropZone;
+//# sourceMappingURL=AssetDropZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetDropZone.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetDropZone.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type DragEvent } from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { PlusCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nconst Zone = styled.button<{ $isDragging: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  width: 100%;\n  min-height: 12rem;\n  padding: ${({ theme }) => theme.spaces[6]};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral100};\n  cursor: pointer;\n\n  // Only while a file is dragged over the zone: it marks where the file will\n  // land, so it has nothing to say to a pointer that is merely passing through.\n  // Drawn inside rather than on the box itself, so the field keeps its own\n  // outline and the invitation reads as an area to drop into.\n  &::after {\n    content: '';\n    position: absolute;\n    inset: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};\n    border: 1px dashed ${({ theme }) => theme.colors.primary600};\n    border-radius: ${({ theme }) => theme.borderRadius};\n    opacity: ${({ $isDragging }) => ($isDragging ? 1 : 0)};\n    pointer-events: none;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.primary600};\n    outline-offset: 2px;\n  }\n`;\n\ninterface AssetDropZoneProps {\n  disabled?: boolean;\n  onClick: () => void;\n  onDropFiles: (files: globalThis.File[]) => void;\n}\n\n/**\n * The field's own drop target. Deliberately not the Media Library page's\n * `UploadDropZoneProvider`: that one covers a whole route and paints a\n * full-surface overlay, where this has to stay inside one field on a form that\n * may hold several of them.\n */\nexport const AssetDropZone = ({ disabled = false, onClick, onDropFiles }: AssetDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const [isDragging, setIsDragging] = useState(false);\n  // Drag events fire on descendants too, so a plain boolean flickers as the\n  // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.\n  const dragDepth = useRef(0);\n\n  const handleDragEnter = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      if (disabled || !event.dataTransfer.types.includes('Files')) {\n        return;\n      }\n      dragDepth.current += 1;\n      setIsDragging(true);\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    dragDepth.current -= 1;\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setIsDragging(false);\n    }\n  }, []);\n\n  const handleDragOver = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'copy';\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      dragDepth.current = 0;\n      setIsDragging(false);\n\n      if (disabled) {\n        return;\n      }\n\n      const files = Array.from(event.dataTransfer.files ?? []);\n      if (files.length > 0) {\n        onDropFiles(files);\n      }\n    },\n    [disabled, onDropFiles]\n  );\n\n  return (\n    <Zone\n      type=\"button\"\n      $isDragging={isDragging}\n      aria-disabled={disabled}\n      onClick={() => !disabled && onClick()}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      {/* Same treatment as the repeatable-component initializer, so the two\n          empty states in a form read as one affordance. */}\n      <Flex justifyContent=\"center\" color={disabled ? 'neutral500' : 'primary600'}>\n        <PlusCircle width=\"3.2rem\" height=\"3.2rem\" />\n      </Flex>\n      <Typography textColor=\"neutral600\" fontWeight=\"bold\" variant=\"pi\">\n        {/* The legacy field's own key: identical wording, already translated in\n            every locale, where a new key would ship English to all of them. */}\n        {formatMessage({\n          id: getTranslationKey('mediaLibraryInput.placeholder'),\n          defaultMessage: 'Click to add an asset or drag and drop one in this area',\n        })}\n      </Typography>\n    </Zone>\n  );\n};\n"],"names":["Zone","styled","button","theme","spaces","colors","neutral200","borderRadius","neutral100","primary600","$isDragging","AssetDropZone","disabled","onClick","onDropFiles","formatMessage","useIntl","isDragging","setIsDragging","useState","dragDepth","useRef","handleDragEnter","useCallback","event","preventDefault","dataTransfer","types","includes","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","length","_jsxs","type","aria-disabled","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","Flex","justifyContent","color","PlusCircle","width","height","Typography","textColor","fontWeight","variant","id","getTranslationKey","defaultMessage"],"mappings":"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"}

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

@@ -0,0 +1,127 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+import { Flex, Typography } from '@strapi/design-system';
+import { PlusCircle } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey } from '../../utils/translations.mjs';
+
+const Zone = styled.button`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  width: 100%;
+  min-height: 12rem;
+  padding: ${({ theme })=>theme.spaces[6]};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral100};
+  cursor: pointer;
+
+  // Only while a file is dragged over the zone: it marks where the file will
+  // land, so it has nothing to say to a pointer that is merely passing through.
+  // Drawn inside rather than on the box itself, so the field keeps its own
+  // outline and the invitation reads as an area to drop into.
+  &::after {
+    content: '';
+    position: absolute;
+    inset: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[4]};
+    border: 1px dashed ${({ theme })=>theme.colors.primary600};
+    border-radius: ${({ theme })=>theme.borderRadius};
+    opacity: ${({ $isDragging })=>$isDragging ? 1 : 0};
+    pointer-events: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: 2px;
+  }
+`;
+/**
+ * The field's own drop target. Deliberately not the Media Library page's
+ * `UploadDropZoneProvider`: that one covers a whole route and paints a
+ * full-surface overlay, where this has to stay inside one field on a form that
+ * may hold several of them.
+ */ const AssetDropZone = ({ disabled = false, onClick, onDropFiles })=>{
+    const { formatMessage } = useIntl();
+    const [isDragging, setIsDragging] = useState(false);
+    // Drag events fire on descendants too, so a plain boolean flickers as the
+    // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.
+    const dragDepth = useRef(0);
+    const handleDragEnter = useCallback((event)=>{
+        event.preventDefault();
+        if (disabled || !event.dataTransfer.types.includes('Files')) {
+            return;
+        }
+        dragDepth.current += 1;
+        setIsDragging(true);
+    }, [
+        disabled
+    ]);
+    const handleDragLeave = useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setIsDragging(false);
+        }
+    }, []);
+    const handleDragOver = useCallback((event)=>{
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+    }, []);
+    const handleDrop = useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current = 0;
+        setIsDragging(false);
+        if (disabled) {
+            return;
+        }
+        const files = Array.from(event.dataTransfer.files ?? []);
+        if (files.length > 0) {
+            onDropFiles(files);
+        }
+    }, [
+        disabled,
+        onDropFiles
+    ]);
+    return /*#__PURE__*/ jsxs(Zone, {
+        type: "button",
+        $isDragging: isDragging,
+        "aria-disabled": disabled,
+        onClick: ()=>!disabled && onClick(),
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+            /*#__PURE__*/ jsx(Flex, {
+                justifyContent: "center",
+                color: disabled ? 'neutral500' : 'primary600',
+                children: /*#__PURE__*/ jsx(PlusCircle, {
+                    width: "3.2rem",
+                    height: "3.2rem"
+                })
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral600",
+                fontWeight: "bold",
+                variant: "pi",
+                children: formatMessage({
+                    id: getTranslationKey('mediaLibraryInput.placeholder'),
+                    defaultMessage: 'Click to add an asset or drag and drop one in this area'
+                })
+            })
+        ]
+    });
+};
+
+export { AssetDropZone };
+//# sourceMappingURL=AssetDropZone.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetDropZone.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetDropZone.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type DragEvent } from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { PlusCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nconst Zone = styled.button<{ $isDragging: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  width: 100%;\n  min-height: 12rem;\n  padding: ${({ theme }) => theme.spaces[6]};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral100};\n  cursor: pointer;\n\n  // Only while a file is dragged over the zone: it marks where the file will\n  // land, so it has nothing to say to a pointer that is merely passing through.\n  // Drawn inside rather than on the box itself, so the field keeps its own\n  // outline and the invitation reads as an area to drop into.\n  &::after {\n    content: '';\n    position: absolute;\n    inset: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};\n    border: 1px dashed ${({ theme }) => theme.colors.primary600};\n    border-radius: ${({ theme }) => theme.borderRadius};\n    opacity: ${({ $isDragging }) => ($isDragging ? 1 : 0)};\n    pointer-events: none;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.primary600};\n    outline-offset: 2px;\n  }\n`;\n\ninterface AssetDropZoneProps {\n  disabled?: boolean;\n  onClick: () => void;\n  onDropFiles: (files: globalThis.File[]) => void;\n}\n\n/**\n * The field's own drop target. Deliberately not the Media Library page's\n * `UploadDropZoneProvider`: that one covers a whole route and paints a\n * full-surface overlay, where this has to stay inside one field on a form that\n * may hold several of them.\n */\nexport const AssetDropZone = ({ disabled = false, onClick, onDropFiles }: AssetDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const [isDragging, setIsDragging] = useState(false);\n  // Drag events fire on descendants too, so a plain boolean flickers as the\n  // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.\n  const dragDepth = useRef(0);\n\n  const handleDragEnter = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      if (disabled || !event.dataTransfer.types.includes('Files')) {\n        return;\n      }\n      dragDepth.current += 1;\n      setIsDragging(true);\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    dragDepth.current -= 1;\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setIsDragging(false);\n    }\n  }, []);\n\n  const handleDragOver = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'copy';\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      dragDepth.current = 0;\n      setIsDragging(false);\n\n      if (disabled) {\n        return;\n      }\n\n      const files = Array.from(event.dataTransfer.files ?? []);\n      if (files.length > 0) {\n        onDropFiles(files);\n      }\n    },\n    [disabled, onDropFiles]\n  );\n\n  return (\n    <Zone\n      type=\"button\"\n      $isDragging={isDragging}\n      aria-disabled={disabled}\n      onClick={() => !disabled && onClick()}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      {/* Same treatment as the repeatable-component initializer, so the two\n          empty states in a form read as one affordance. */}\n      <Flex justifyContent=\"center\" color={disabled ? 'neutral500' : 'primary600'}>\n        <PlusCircle width=\"3.2rem\" height=\"3.2rem\" />\n      </Flex>\n      <Typography textColor=\"neutral600\" fontWeight=\"bold\" variant=\"pi\">\n        {/* The legacy field's own key: identical wording, already translated in\n            every locale, where a new key would ship English to all of them. */}\n        {formatMessage({\n          id: getTranslationKey('mediaLibraryInput.placeholder'),\n          defaultMessage: 'Click to add an asset or drag and drop one in this area',\n        })}\n      </Typography>\n    </Zone>\n  );\n};\n"],"names":["Zone","styled","button","theme","spaces","colors","neutral200","borderRadius","neutral100","primary600","$isDragging","AssetDropZone","disabled","onClick","onDropFiles","formatMessage","useIntl","isDragging","setIsDragging","useState","dragDepth","useRef","handleDragEnter","useCallback","event","preventDefault","dataTransfer","types","includes","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","length","_jsxs","type","aria-disabled","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","Flex","justifyContent","color","PlusCircle","width","height","Typography","textColor","fontWeight","variant","id","getTranslationKey","defaultMessage"],"mappings":";;;;;;;;AASA,MAAMA,IAAAA,GAAOC,MAAAA,CAAOC,MAAgC;;;;;;OAM7C,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;WAG7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;oBACxB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACC,UAAU,CAAC;AAC5C,iBAAA,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACG,UAAU,CAAC;;;;;;;;;;WAU5C,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;uBACvD,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACI,UAAU,CAAC;AAC7C,mBAAA,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;AAC1C,aAAA,EAAE,CAAC,EAAEG,WAAW,EAAE,GAAMA,WAAAA,GAAc,IAAI,CAAA,CAAG;;;;;;;;;uBASnC,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACI,UAAU,CAAC;;;AAGhE,CAAC;AAQD;;;;;IAMO,MAAME,aAAAA,GAAgB,CAAC,EAAEC,QAAAA,GAAW,KAAK,EAAEC,OAAO,EAAEC,WAAW,EAAsB,GAAA;IAC1F,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,CAAS,KAAA,CAAA;;;AAG7C,IAAA,MAAMC,YAAYC,MAAAA,CAAO,CAAA,CAAA;IAEzB,MAAMC,eAAAA,GAAkBC,YACtB,CAACC,KAAAA,GAAAA;AACCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;QACpB,IAAIb,QAAAA,IAAY,CAACY,KAAAA,CAAME,YAAY,CAACC,KAAK,CAACC,QAAQ,CAAC,OAAA,CAAA,EAAU;AAC3D,YAAA;AACF,QAAA;AACAR,QAAAA,SAAAA,CAAUS,OAAO,IAAI,CAAA;QACrBX,aAAAA,CAAc,IAAA,CAAA;IAChB,CAAA,EACA;AAACN,QAAAA;AAAS,KAAA,CAAA;IAGZ,MAAMkB,eAAAA,GAAkBP,YAAY,CAACC,KAAAA,GAAAA;AACnCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBL,QAAAA,SAAAA,CAAUS,OAAO,IAAI,CAAA;QACrB,IAAIT,SAAAA,CAAUS,OAAO,IAAI,CAAA,EAAG;AAC1BT,YAAAA,SAAAA,CAAUS,OAAO,GAAG,CAAA;YACpBX,aAAAA,CAAc,KAAA,CAAA;AAChB,QAAA;AACF,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,MAAMa,cAAAA,GAAiBR,YAAY,CAACC,KAAAA,GAAAA;AAClCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;QACpBD,KAAAA,CAAME,YAAY,CAACM,UAAU,GAAG,MAAA;AAClC,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,MAAMC,UAAAA,GAAaV,YACjB,CAACC,KAAAA,GAAAA;AACCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBL,QAAAA,SAAAA,CAAUS,OAAO,GAAG,CAAA;QACpBX,aAAAA,CAAc,KAAA,CAAA;AAEd,QAAA,IAAIN,QAAAA,EAAU;AACZ,YAAA;AACF,QAAA;QAEA,MAAMsB,KAAAA,GAAQC,MAAMC,IAAI,CAACZ,MAAME,YAAY,CAACQ,KAAK,IAAI,EAAE,CAAA;QACvD,IAAIA,KAAAA,CAAMG,MAAM,GAAG,CAAA,EAAG;YACpBvB,WAAAA,CAAYoB,KAAAA,CAAAA;AACd,QAAA;IACF,CAAA,EACA;AAACtB,QAAAA,QAAAA;AAAUE,QAAAA;AAAY,KAAA,CAAA;AAGzB,IAAA,qBACEwB,IAAA,CAACtC,IAAAA,EAAAA;QACCuC,IAAAA,EAAK,QAAA;QACL7B,WAAAA,EAAaO,UAAAA;QACbuB,eAAAA,EAAe5B,QAAAA;QACfC,OAAAA,EAAS,IAAM,CAACD,QAAAA,IAAYC,OAAAA,EAAAA;QAC5B4B,WAAAA,EAAanB,eAAAA;QACboB,WAAAA,EAAaZ,eAAAA;QACba,UAAAA,EAAYZ,cAAAA;QACZa,MAAAA,EAAQX,UAAAA;;0BAIRY,GAAA,CAACC,IAAAA,EAAAA;gBAAKC,cAAAA,EAAe,QAAA;AAASC,gBAAAA,KAAAA,EAAOpC,WAAW,YAAA,GAAe,YAAA;AAC7D,gBAAA,QAAA,gBAAAiC,GAAA,CAACI,UAAAA,EAAAA;oBAAWC,KAAAA,EAAM,QAAA;oBAASC,MAAAA,EAAO;;;0BAEpCN,GAAA,CAACO,UAAAA,EAAAA;gBAAWC,SAAAA,EAAU,YAAA;gBAAaC,UAAAA,EAAW,MAAA;gBAAOC,OAAAA,EAAQ,IAAA;0BAG1DxC,aAAAA,CAAc;AACbyC,oBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,+BAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA;;;;AAIR;;;;"}