@frontify/guideline-blocks-settings 3.0.2 → 4.0.0-alpha.0

package/dist/_virtual/_rolldown/runtime.es.js

@@ -0,0 +1,17 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = Object.getOwnPropertyDescriptor, n = Object.getOwnPropertyNames, r = Object.prototype.hasOwnProperty, i = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+}, a = (i, a, o, s) => {
+	if (a && typeof a == "object" || typeof a == "function") for (var c = n(a), l = 0, u = c.length, d; l < u; l++) d = c[l], !r.call(i, d) && d !== o && e(i, d, {
+		get: ((e) => a[e]).bind(null, d),
+		enumerable: !(s = t(a, d)) || s.enumerable
+	});
+	return i;
+}, o = (e, t, n) => (a(e, t, "default"), n && a(n, t, "default"));
+//#endregion
+export { i as __exportAll, o as __reExport };

package/dist/components/Attachments/AttachmentItem.es.js

@@ -1,169 +1,117 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useSortable as P } from "@dnd-kit/sortable";
-import { useFileInput as C, useAssetUpload as R } from "@frontify/app-bridge";
-import { LoadingCircle as F, Button as v, Dropdown as s } from "@frontify/fondue/components";
-import { IconGrabHandle as j, IconPen as k, IconArrowCircleUp as G, IconImageStack as $, IconTrashBin as E, IconImage as T, IconPlayFrame as U, IconMusicNote as q, IconDocument as B } from "@frontify/fondue/icons";
-import { forwardRef as H, useState as L, useEffect as I } from "react";
-import { joinClassNames as g } from "../../utilities/react/joinClassNames.es.js";
-const M = (t) => t === "IMAGE" ? /* @__PURE__ */ e(T, { size: "24" }) : t === "VIDEO" ? /* @__PURE__ */ e(U, { size: "24" }) : t === "AUDIO" ? /* @__PURE__ */ e(q, { size: "24" }) : /* @__PURE__ */ e(B, { size: "24" }), y = H(
-  ({
-    item: t,
-    isEditing: p,
-    draggableProps: m,
-    transformStyle: u,
-    isDragging: i,
-    isOverlay: r,
-    isLoading: n,
-    onDelete: w,
-    onReplaceWithBrowse: f,
-    onReplaceWithUpload: x,
-    onDownload: z
-  }, N) => {
-    const [c, l] = L(), [A, { selectedFiles: d }] = C({ multiple: !0, accept: "image/*" }), [S, { results: b, doneAll: h }] = R();
-    I(() => {
-      d && S(d[0]);
-    }, [d]), I(() => {
-      h && x(b[0]);
-    }, [h, b]);
-    const D = n || d && !h;
-    return /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Download attachment",
-        "data-test-id": "attachments-item",
-        onClick: () => !c && z?.(),
-        ref: N,
-        style: {
-          ...u,
-          opacity: i && !r ? 0.3 : 1,
-          fontFamily: "var(-f-theme-settings-body-font-family)"
-        },
-        className: g([
-          "tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-surface-hover focus-visible:tw-outline focus-visible:!-tw-outline-offset-4",
-          i ? "tw-bg-surface-hover" : ""
-        ]),
-        children: [
-          /* @__PURE__ */ e("div", { className: "tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container", children: D ? /* @__PURE__ */ e(F, { size: "small" }) : M(t.objectType) }),
-          /* @__PURE__ */ a("div", { className: "tw-text-small tw-flex-1 tw-min-w-0", children: [
-            /* @__PURE__ */ e("div", { className: "tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container", children: t.title }),
-            /* @__PURE__ */ e("div", { className: "tw-text-secondary", children: `${t.fileSizeHumanReadable} - ${t.extension}` })
-          ] }),
-          p && /* @__PURE__ */ a(
-            "div",
-            {
-              "data-test-id": "attachments-actionbar",
-              className: g([
-                "tw-flex tw-gap-0.5 group-hover:tw-opacity-100 group-focus-visible:tw-opacity-100 has-[:focus-visible]:tw-opacity-100",
-                r || c?.id === t.id ? "tw-opacity-100" : "tw-opacity-0"
-              ]),
-              children: [
-                /* @__PURE__ */ e(
-                  v,
-                  {
-                    aspect: "square",
-                    emphasis: "weak",
-                    "aria-label": "Drag attachment",
-                    className: g([
-                      i || r ? "tw-cursor-grabbing" : "tw-cursor-grab",
-                      "focus-visible:tw-z-[2]"
-                    ]),
-                    ...m,
-                    children: /* @__PURE__ */ e(j, {})
-                  }
-                ),
-                /* @__PURE__ */ e("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ a(
-                  s.Root,
-                  {
-                    open: c?.id === t.id,
-                    onOpenChange: (o) => l(o ? t : void 0),
-                    children: [
-                      /* @__PURE__ */ e(s.Trigger, { children: /* @__PURE__ */ e(
-                        v,
-                        {
-                          aspect: "square",
-                          emphasis: c?.id === t.id ? "default" : "weak",
-                          onPress: (o) => {
-                            o?.stopPropagation(), o?.preventDefault();
-                          },
-                          children: /* @__PURE__ */ e(k, { size: "20" })
-                        }
-                      ) }),
-                      /* @__PURE__ */ a(s.Content, { side: "right", children: [
-                        /* @__PURE__ */ a(s.Group, { children: [
-                          /* @__PURE__ */ a(
-                            s.Item,
-                            {
-                              "data-test-id": "menu-item",
-                              onSelect: (o) => {
-                                o?.stopPropagation(), A(), l(void 0);
-                              },
-                              children: [
-                                /* @__PURE__ */ e(G, { size: "20" }),
-                                "Replace with upload"
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ a(
-                            s.Item,
-                            {
-                              onSelect: (o) => {
-                                o?.stopPropagation(), f(), l(void 0);
-                              },
-                              children: [
-                                /* @__PURE__ */ e($, { size: "20" }),
-                                "Replace with asset"
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ e(s.Group, { children: /* @__PURE__ */ a(
-                          s.Item,
-                          {
-                            emphasis: "danger",
-                            onSelect: (o) => {
-                              o?.stopPropagation(), w(), l(void 0);
-                            },
-                            children: [
-                              /* @__PURE__ */ e(E, { size: "20" }),
-                              "Delete"
-                            ]
-                          }
-                        ) })
-                      ] })
-                    ]
-                  }
-                ) })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-y.displayName = "AttachmentItem";
-const Y = (t) => {
-  const { attributes: p, listeners: m, setNodeRef: u, transform: i, transition: r, isDragging: n } = P({
-    id: t.item.id
-  }), w = {
-    transform: i ? `translate(${i.x}px, ${i.y}px)` : "",
-    transition: r,
-    zIndex: n ? 2 : 1
-  }, f = { ...p, ...m };
-  return /* @__PURE__ */ e(
-    y,
-    {
-      ref: u,
-      isDragging: n,
-      transformStyle: w,
-      draggableProps: f,
-      ...t
-    }
-  );
+import { joinClassNames as e } from "../../utilities/react/joinClassNames.es.js";
+import { useAssetUpload as t, useFileInput as n } from "@frontify/app-bridge";
+import { Button as r, Dropdown as i, LoadingCircle as a } from "@frontify/fondue/components";
+import { IconArrowCircleUp as o, IconDocument as s, IconGrabHandle as c, IconImage as l, IconImageStack as u, IconMusicNote as d, IconPen as f, IconPlayFrame as p, IconTrashBin as m } from "@frontify/fondue/icons";
+import { forwardRef as h, useEffect as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useSortable as b } from "@dnd-kit/sortable";
+//#region src/components/Attachments/AttachmentItem.tsx
+var x = (e) => v(e === "IMAGE" ? l : e === "VIDEO" ? p : e === "AUDIO" ? d : s, { size: "24" }), S = h(({ item: s, isEditing: l, draggableProps: d, transformStyle: p, isDragging: h, isOverlay: b, isLoading: S, onDelete: C, onReplaceWithBrowse: w, onReplaceWithUpload: T, onDownload: E }, D) => {
+	let [O, k] = _(), [A, { selectedFiles: j }] = n({
+		multiple: !0,
+		accept: "image/*"
+	}), [M, { results: N, doneAll: P }] = t();
+	g(() => {
+		j && M(j[0]);
+	}, [j]), g(() => {
+		P && T(N[0]);
+	}, [P, N]);
+	let F = S || j && !P;
+	return /* @__PURE__ */ y("button", {
+		type: "button",
+		"aria-label": "Download attachment",
+		"data-test-id": "attachments-item",
+		onClick: () => !O && E?.(),
+		ref: D,
+		style: {
+			...p,
+			opacity: h && !b ? .3 : 1,
+			fontFamily: "var(-f-theme-settings-body-font-family)"
+		},
+		className: e(["tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-surface-hover focus-visible:tw-outline focus-visible:!-tw-outline-offset-4", h ? "tw-bg-surface-hover" : ""]),
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container",
+				children: F ? /* @__PURE__ */ v(a, { size: "small" }) : x(s.objectType)
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "tw-text-small tw-flex-1 tw-min-w-0",
+				children: [/* @__PURE__ */ v("div", {
+					className: "tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container",
+					children: s.title
+				}), /* @__PURE__ */ v("div", {
+					className: "tw-text-secondary",
+					children: `${s.fileSizeHumanReadable} - ${s.extension}`
+				})]
+			}),
+			l && /* @__PURE__ */ y("div", {
+				"data-test-id": "attachments-actionbar",
+				className: e(["tw-flex tw-gap-0.5 group-hover:tw-opacity-100 group-focus-visible:tw-opacity-100 has-[:focus-visible]:tw-opacity-100", b || O?.id === s.id ? "tw-opacity-100" : "tw-opacity-0"]),
+				children: [/* @__PURE__ */ v(r, {
+					aspect: "square",
+					emphasis: "weak",
+					"aria-label": "Drag attachment",
+					className: e([h || b ? "tw-cursor-grabbing" : "tw-cursor-grab", "focus-visible:tw-z-[2]"]),
+					...d,
+					children: /* @__PURE__ */ v(c, {})
+				}), /* @__PURE__ */ v("div", {
+					"data-test-id": "attachments-actionbar-flyout",
+					children: /* @__PURE__ */ y(i.Root, {
+						open: O?.id === s.id,
+						onOpenChange: (e) => k(e ? s : void 0),
+						children: [/* @__PURE__ */ v(i.Trigger, { children: /* @__PURE__ */ v(r, {
+							aspect: "square",
+							emphasis: O?.id === s.id ? "default" : "weak",
+							onPress: (e) => {
+								e?.stopPropagation(), e?.preventDefault();
+							},
+							children: /* @__PURE__ */ v(f, { size: "20" })
+						}) }), /* @__PURE__ */ y(i.Content, {
+							side: "right",
+							children: [/* @__PURE__ */ y(i.Group, { children: [/* @__PURE__ */ y(i.Item, {
+								"data-test-id": "menu-item",
+								onSelect: (e) => {
+									e?.stopPropagation(), A(), k(void 0);
+								},
+								children: [/* @__PURE__ */ v(o, { size: "20" }), "Replace with upload"]
+							}), /* @__PURE__ */ y(i.Item, {
+								onSelect: (e) => {
+									e?.stopPropagation(), w(), k(void 0);
+								},
+								children: [/* @__PURE__ */ v(u, { size: "20" }), "Replace with asset"]
+							})] }), /* @__PURE__ */ v(i.Group, { children: /* @__PURE__ */ y(i.Item, {
+								emphasis: "danger",
+								onSelect: (e) => {
+									e?.stopPropagation(), C(), k(void 0);
+								},
+								children: [/* @__PURE__ */ v(m, { size: "20" }), "Delete"]
+							}) })]
+						})]
+					})
+				})]
+			})
+		]
+	});
+});
+S.displayName = "AttachmentItem";
+var C = (e) => {
+	let { attributes: t, listeners: n, setNodeRef: r, transform: i, transition: a, isDragging: o } = b({ id: e.item.id }), s = {
+		transform: i ? `translate(${i.x}px, ${i.y}px)` : "",
+		transition: a,
+		zIndex: o ? 2 : 1
+	}, c = {
+		...t,
+		...n
+	};
+	return /* @__PURE__ */ v(S, {
+		ref: r,
+		isDragging: o,
+		transformStyle: s,
+		draggableProps: c,
+		...e
+	});
 };
-export {
-  y as AttachmentItem,
-  Y as SortableAttachmentItem
-};
-//# sourceMappingURL=AttachmentItem.es.js.map
+//#endregion
+export { S as AttachmentItem, C as SortableAttachmentItem };
+
+//# sourceMappingURL=AttachmentItem.es.js.map

package/dist/components/Attachments/AttachmentItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentItem.es.js","sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { type Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { LoadingCircle, Dropdown, Button } from '@frontify/fondue/components';\nimport {\n    IconArrowCircleUp,\n    IconImageStack,\n    IconPen,\n    IconTrashBin,\n    IconDocument,\n    IconImage,\n    IconPlayFrame,\n    IconMusicNote,\n    IconGrabHandle,\n} from '@frontify/fondue/icons';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentItemProps, type SortableAttachmentItemProps } from './types';\n\nconst getDecorator = (type: string) => {\n    if (type === 'IMAGE') {\n        return <IconImage size=\"24\" />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame size=\"24\" />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote size=\"24\" />;\n    } else {\n        return <IconDocument size=\"24\" />;\n    }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n    (\n        {\n            item,\n            isEditing,\n            draggableProps,\n            transformStyle,\n            isDragging,\n            isOverlay,\n            isLoading,\n            onDelete,\n            onReplaceWithBrowse,\n            onReplaceWithUpload,\n            onDownload,\n        },\n        ref,\n    ) => {\n        const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();\n        const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });\n        const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n\n        useEffect(() => {\n            if (selectedFiles) {\n                uploadFile(selectedFiles[0]);\n            }\n            // oxlint-disable-next-line @eslint-react/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // oxlint-disable-next-line @eslint-react/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                type=\"button\"\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => !selectedAsset && onDownload?.()}\n                ref={ref}\n                style={{\n                    ...transformStyle,\n                    opacity: isDragging && !isOverlay ? 0.3 : 1,\n                    fontFamily: 'var(-f-theme-settings-body-font-family)',\n                }}\n                className={joinClassNames([\n                    'tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-surface-hover focus-visible:tw-outline focus-visible:!-tw-outline-offset-4',\n                    isDragging ? 'tw-bg-surface-hover' : '',\n                ])}\n            >\n                <div className=\"tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                    {showLoadingCircle ? <LoadingCircle size=\"small\" /> : getDecorator(item.objectType)}\n                </div>\n                <div className=\"tw-text-small tw-flex-1 tw-min-w-0\">\n                    <div className=\"tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                        {item.title}\n                    </div>\n                    <div className=\"tw-text-secondary\">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>\n                </div>\n                {isEditing && (\n                    <div\n                        data-test-id=\"attachments-actionbar\"\n                        className={joinClassNames([\n                            'tw-flex tw-gap-0.5 group-hover:tw-opacity-100 group-focus-visible:tw-opacity-100 has-[:focus-visible]:tw-opacity-100',\n                            isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n                        ])}\n                    >\n                        <Button\n                            aspect=\"square\"\n                            emphasis=\"weak\"\n                            aria-label=\"Drag attachment\"\n                            className={joinClassNames([\n                                isDragging || isOverlay ? 'tw-cursor-grabbing' : 'tw-cursor-grab',\n                                'focus-visible:tw-z-[2]',\n                            ])}\n                            {...draggableProps}\n                        >\n                            <IconGrabHandle />\n                        </Button>\n                        <div data-test-id=\"attachments-actionbar-flyout\">\n                            <Dropdown.Root\n                                open={selectedAsset?.id === item.id}\n                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n                            >\n                                <Dropdown.Trigger>\n                                    <Button\n                                        aspect=\"square\"\n                                        emphasis={selectedAsset?.id === item.id ? 'default' : 'weak'}\n                                        onPress={(e) => {\n                                            e?.stopPropagation();\n                                            e?.preventDefault();\n                                        }}\n                                    >\n                                        <IconPen size=\"20\" />\n                                    </Button>\n                                </Dropdown.Trigger>\n                                <Dropdown.Content side=\"right\">\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            data-test-id=\"menu-item\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                openFileDialog();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconArrowCircleUp size=\"20\" />\n                                            Replace with upload\n                                        </Dropdown.Item>\n                                        <Dropdown.Item\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onReplaceWithBrowse();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconImageStack size=\"20\" />\n                                            Replace with asset\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            emphasis=\"danger\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onDelete();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconTrashBin size=\"20\" />\n                                            Delete\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                </Dropdown.Content>\n                            </Dropdown.Root>\n                        </div>\n                    </div>\n                )}\n            </button>\n        );\n    },\n);\n\nAttachmentItem.displayName = 'AttachmentItem';\n\nexport const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: props.item.id,\n    });\n\n    const transformStyle = {\n        transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',\n        transition,\n        zIndex: isDragging ? 2 : 1,\n    };\n\n    const draggableProps = { ...attributes, ...listeners };\n\n    return (\n        <AttachmentItem\n            ref={setNodeRef}\n            isDragging={isDragging}\n            transformStyle={transformStyle}\n            draggableProps={draggableProps}\n            {...props}\n        />\n    );\n};\n"],"names":["getDecorator","type","jsx","IconImage","IconPlayFrame","IconMusicNote","IconDocument","AttachmentItem","forwardRef","item","isEditing","draggableProps","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onDownload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","showLoadingCircle","jsxs","joinClassNames","LoadingCircle","Button","IconGrabHandle","Dropdown","isOpen","e","IconPen","event","IconArrowCircleUp","IconImageStack","IconTrashBin","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":"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"}
+{"version":3,"file":"AttachmentItem.es.js","names":[],"sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { type Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { LoadingCircle, Dropdown, Button } from '@frontify/fondue/components';\nimport {\n    IconArrowCircleUp,\n    IconImageStack,\n    IconPen,\n    IconTrashBin,\n    IconDocument,\n    IconImage,\n    IconPlayFrame,\n    IconMusicNote,\n    IconGrabHandle,\n} from '@frontify/fondue/icons';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentItemProps, type SortableAttachmentItemProps } from './types';\n\nconst getDecorator = (type: string) => {\n    if (type === 'IMAGE') {\n        return <IconImage size=\"24\" />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame size=\"24\" />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote size=\"24\" />;\n    } else {\n        return <IconDocument size=\"24\" />;\n    }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n    (\n        {\n            item,\n            isEditing,\n            draggableProps,\n            transformStyle,\n            isDragging,\n            isOverlay,\n            isLoading,\n            onDelete,\n            onReplaceWithBrowse,\n            onReplaceWithUpload,\n            onDownload,\n        },\n        ref,\n    ) => {\n        const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();\n        const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });\n        const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n\n        useEffect(() => {\n            if (selectedFiles) {\n                uploadFile(selectedFiles[0]);\n            }\n            // oxlint-disable-next-line @eslint-react/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // oxlint-disable-next-line @eslint-react/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                type=\"button\"\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => !selectedAsset && onDownload?.()}\n                ref={ref}\n                style={{\n                    ...transformStyle,\n                    opacity: isDragging && !isOverlay ? 0.3 : 1,\n                    fontFamily: 'var(-f-theme-settings-body-font-family)',\n                }}\n                className={joinClassNames([\n                    'tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-surface-hover focus-visible:tw-outline focus-visible:!-tw-outline-offset-4',\n                    isDragging ? 'tw-bg-surface-hover' : '',\n                ])}\n            >\n                <div className=\"tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                    {showLoadingCircle ? <LoadingCircle size=\"small\" /> : getDecorator(item.objectType)}\n                </div>\n                <div className=\"tw-text-small tw-flex-1 tw-min-w-0\">\n                    <div className=\"tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                        {item.title}\n                    </div>\n                    <div className=\"tw-text-secondary\">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>\n                </div>\n                {isEditing && (\n                    <div\n                        data-test-id=\"attachments-actionbar\"\n                        className={joinClassNames([\n                            'tw-flex tw-gap-0.5 group-hover:tw-opacity-100 group-focus-visible:tw-opacity-100 has-[:focus-visible]:tw-opacity-100',\n                            isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n                        ])}\n                    >\n                        <Button\n                            aspect=\"square\"\n                            emphasis=\"weak\"\n                            aria-label=\"Drag attachment\"\n                            className={joinClassNames([\n                                isDragging || isOverlay ? 'tw-cursor-grabbing' : 'tw-cursor-grab',\n                                'focus-visible:tw-z-[2]',\n                            ])}\n                            {...draggableProps}\n                        >\n                            <IconGrabHandle />\n                        </Button>\n                        <div data-test-id=\"attachments-actionbar-flyout\">\n                            <Dropdown.Root\n                                open={selectedAsset?.id === item.id}\n                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n                            >\n                                <Dropdown.Trigger>\n                                    <Button\n                                        aspect=\"square\"\n                                        emphasis={selectedAsset?.id === item.id ? 'default' : 'weak'}\n                                        onPress={(e) => {\n                                            e?.stopPropagation();\n                                            e?.preventDefault();\n                                        }}\n                                    >\n                                        <IconPen size=\"20\" />\n                                    </Button>\n                                </Dropdown.Trigger>\n                                <Dropdown.Content side=\"right\">\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            data-test-id=\"menu-item\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                openFileDialog();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconArrowCircleUp size=\"20\" />\n                                            Replace with upload\n                                        </Dropdown.Item>\n                                        <Dropdown.Item\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onReplaceWithBrowse();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconImageStack size=\"20\" />\n                                            Replace with asset\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            emphasis=\"danger\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onDelete();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconTrashBin size=\"20\" />\n                                            Delete\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                </Dropdown.Content>\n                            </Dropdown.Root>\n                        </div>\n                    </div>\n                )}\n            </button>\n        );\n    },\n);\n\nAttachmentItem.displayName = 'AttachmentItem';\n\nexport const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: props.item.id,\n    });\n\n    const transformStyle = {\n        transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',\n        transition,\n        zIndex: isDragging ? 2 : 1,\n    };\n\n    const draggableProps = { ...attributes, ...listeners };\n\n    return (\n        <AttachmentItem\n            ref={setNodeRef}\n            isDragging={isDragging}\n            transformStyle={transformStyle}\n            draggableProps={draggableProps}\n            {...props}\n        />\n    );\n};\n"],"mappings":"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"}