@frontify/guideline-blocks-settings 0.28.3 → 0.28.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @frontify/guideline-blocks-settings
 
+## 0.28.5
+
+### Patch Changes
+
+- [#502](https://github.com/Frontify/brand-sdk/pull/502) [`d1a60e9`](https://github.com/Frontify/brand-sdk/commit/d1a60e9fabb2920d3fc716e18f58d8de1527ab26) Thanks [@fulopdaniel](https://github.com/fulopdaniel)! - feat(\*): add link selector
+
+- Updated dependencies [[`d1a60e9`](https://github.com/Frontify/brand-sdk/commit/d1a60e9fabb2920d3fc716e18f58d8de1527ab26)]:
+  - @frontify/sidebar-settings@0.6.3
+
+## 0.28.4
+
+### Patch Changes
+
+- [#503](https://github.com/Frontify/brand-sdk/pull/503) [`c56e7e9`](https://github.com/Frontify/brand-sdk/commit/c56e7e9112e04ae0e9ae35e4b7a98c11665045f2) Thanks [@fulopdaniel](https://github.com/fulopdaniel)! - feat(RTE): add dir to serializer
+
+- [`22684e3`](https://github.com/Frontify/brand-sdk/commit/22684e358fd2b073790a0959606c6a5d44e35c4e) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Update dependencies
+
+- Updated dependencies [[`22684e3`](https://github.com/Frontify/brand-sdk/commit/22684e358fd2b073790a0959606c6a5d44e35c4e)]:
+  - @frontify/sidebar-settings@0.6.2
+
 ## 0.28.3
 
 ### Patch Changes

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

@@ -1,26 +1,26 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
 import { useState as r, useEffect as f } from "react";
-import { useSensors as q, useSensor as E, PointerSensor as B, KeyboardSensor as G, DndContext as H, closestCenter as J, DragOverlay as Q } from "@dnd-kit/core";
+import { useSensors as q, useSensor as U, PointerSensor as B, KeyboardSensor as G, DndContext as H, closestCenter as J, DragOverlay as Q } from "@dnd-kit/core";
 import { SortableContext as X, rectSortingStrategy as Y, arrayMove as Z } from "@dnd-kit/sortable";
 import { useEditorState as _, useAssetUpload as $ } from "@frontify/app-bridge";
-import { Tooltip as tt, TooltipPosition as et, Flyout as ot, FlyoutPlacement as st, IconPaperclip16 as nt, IconCaretDown12 as it, AssetInput as rt, AssetInputSize as lt } from "@frontify/fondue";
-import { SortableAttachmentItem as dt, AttachmentItem as at } from "./AttachmentItem.es.js";
-import { restrictToWindowEdges as ct } from "@dnd-kit/modifiers";
-const vt = ({
+import { LegacyTooltip as ee, TooltipPosition as te, Flyout as oe, FlyoutPlacement as se, IconPaperclip16 as ne, IconCaretDown12 as ie, AssetInput as re, AssetInputSize as le } from "@frontify/fondue";
+import { SortableAttachmentItem as de, AttachmentItem as ae } from "./AttachmentItem.es.js";
+import { restrictToWindowEdges as ce } from "@dnd-kit/modifiers";
+const ye = ({
   items: l = [],
   onDelete: x,
-  onReplaceWithBrowse: L,
+  onReplaceWithBrowse: E,
   onReplaceWithUpload: O,
   onBrowse: W,
   onUpload: N,
   onSorted: P,
   appBridge: d
 }) => {
-  const [e, v] = r(l), [y, a] = r(!1), R = q(E(B), E(G)), [I, b] = r(void 0), [A, h] = r(!1), [c, u] = r([]), [m, T] = r(null), p = _(d), i = e == null ? void 0 : e.find((t) => t.id === I), [j, { results: S, doneAll: D }] = $({
+  const [t, y] = r(l), [v, a] = r(!1), R = q(U(B), U(G)), [I, b] = r(void 0), [A, h] = r(!1), [c, u] = r([]), [m, T] = r(null), g = _(d), i = t == null ? void 0 : t.find((e) => e.id === I), [j, { results: S, doneAll: D }] = $({
     onUploadProgress: () => !A && h(!0)
   });
   f(() => {
-    v(l);
+    y(l);
   }, [l]), f(() => {
     m && (h(!0), j(m));
   }, [m]), f(() => {
@@ -30,105 +30,105 @@ const vt = ({
   }, [D, S]);
   const k = () => {
     a(!1), d.openAssetChooser(
-      (t) => {
-        W(t), d.closeAssetChooser(), a(!0);
+      (e) => {
+        W(e), d.closeAssetChooser(), a(!0);
       },
       {
         multiSelection: !0,
-        selectedValueIds: e.map((t) => t.id)
+        selectedValueIds: t.map((e) => e.id)
       }
     );
-  }, C = (t) => {
+  }, C = (e) => {
     a(!1), d.openAssetChooser(
       async (s) => {
-        a(!0), d.closeAssetChooser(), u([...c, t.id]), await L(t, s[0]), u(c.filter((n) => n !== t.id));
+        a(!0), d.closeAssetChooser(), u([...c, e.id]), await E(e, s[0]), u(c.filter((n) => n !== e.id));
       },
       {
         multiSelection: !1,
-        selectedValueIds: e.map((s) => s.id)
+        selectedValueIds: t.map((s) => s.id)
       }
     );
-  }, F = async (t, s) => {
-    u([...c, t.id]), await O(t, s), u(c.filter((n) => n !== t.id));
-  }, z = (t) => {
-    const { active: s } = t;
+  }, F = async (e, s) => {
+    u([...c, e.id]), await O(e, s), u(c.filter((n) => n !== e.id));
+  }, z = (e) => {
+    const { active: s } = e;
     b(s.id);
-  }, V = (t) => {
-    const { active: s, over: n } = t;
-    if (n && s.id !== n.id && e) {
-      const K = e.findIndex((w) => w.id === s.id), M = e.findIndex((w) => w.id === n.id), U = Z(e, K, M);
-      v(U), P(U);
+  }, V = (e) => {
+    const { active: s, over: n } = e;
+    if (n && s.id !== n.id && t) {
+      const K = t.findIndex((w) => w.id === s.id), M = t.findIndex((w) => w.id === n.id), L = Z(t, K, M);
+      y(L), P(L);
     }
     b(void 0);
   };
-  return p || ((e == null ? void 0 : e.length) ?? 0) > 0 ? /* @__PURE__ */ o(
-    tt,
+  return g || ((t == null ? void 0 : t.length) ?? 0) > 0 ? /* @__PURE__ */ o(
+    ee,
     {
       withArrow: !0,
-      position: et.Top,
+      position: te.Top,
       content: "Attachments",
-      disabled: y,
+      disabled: v,
       enterDelay: 500,
       triggerElement: /* @__PURE__ */ o("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ o(
-        ot,
+        oe,
         {
-          placement: st.BottomRight,
-          onOpenChange: (t) => a(i ? !0 : t),
-          isOpen: y,
+          placement: se.BottomRight,
+          onOpenChange: (e) => a(i ? !0 : e),
+          isOpen: v,
           hug: !1,
           fitContent: !0,
           legacyFooter: !1,
-          trigger: /* @__PURE__ */ g("div", { className: "tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line", children: [
-            /* @__PURE__ */ o(nt, {}),
+          trigger: /* @__PURE__ */ p("div", { className: "tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line", children: [
+            /* @__PURE__ */ o(ne, {}),
             /* @__PURE__ */ o("div", { children: l.length > 0 ? l.length : "Add" }),
-            /* @__PURE__ */ o(it, {})
+            /* @__PURE__ */ o(ie, {})
           ] }),
-          children: /* @__PURE__ */ g("div", { className: "tw-w-[300px]", children: [
-            e.length > 0 && /* @__PURE__ */ g(
+          children: /* @__PURE__ */ p("div", { className: "tw-w-[300px]", children: [
+            t.length > 0 && /* @__PURE__ */ p(
               H,
               {
                 sensors: R,
                 collisionDetection: J,
                 onDragStart: z,
                 onDragEnd: V,
-                modifiers: [ct],
+                modifiers: [ce],
                 children: [
-                  /* @__PURE__ */ o(X, { items: e, strategy: Y, children: /* @__PURE__ */ o("div", { className: "tw-border-b tw-border-b-line", children: e.map((t) => /* @__PURE__ */ o(
-                    dt,
+                  /* @__PURE__ */ o(X, { items: t, strategy: Y, children: /* @__PURE__ */ o("div", { className: "tw-border-b tw-border-b-line", children: t.map((e) => /* @__PURE__ */ o(
+                    de,
                     {
-                      isEditing: p,
-                      isLoading: c.includes(t.id),
-                      item: t,
-                      onDelete: () => x(t),
-                      onReplaceWithBrowse: () => C(t),
-                      onReplaceWithUpload: (s) => F(t, s)
+                      isEditing: g,
+                      isLoading: c.includes(e.id),
+                      item: e,
+                      onDelete: () => x(e),
+                      onReplaceWithBrowse: () => C(e),
+                      onReplaceWithUpload: (s) => F(e, s)
                     },
-                    t.id
+                    e.id
                   )) }) }),
                   /* @__PURE__ */ o(Q, { children: i && /* @__PURE__ */ o(
-                    at,
+                    ae,
                     {
                       isOverlay: !0,
-                      isEditing: p,
+                      isEditing: g,
                       item: i,
                       isDragging: !0,
                       onDelete: () => x(i),
                       onReplaceWithBrowse: () => C(i),
-                      onReplaceWithUpload: (t) => F(i, t)
+                      onReplaceWithUpload: (e) => F(i, e)
                     },
                     I
                   ) })
                 ]
               }
             ),
-            p && /* @__PURE__ */ g("div", { className: "tw-px-5 tw-py-3", children: [
+            g && /* @__PURE__ */ p("div", { className: "tw-px-5 tw-py-3", children: [
               /* @__PURE__ */ o("div", { className: "tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4", children: "Add attachments" }),
               /* @__PURE__ */ o(
-                rt,
+                re,
                 {
                   isLoading: A,
-                  size: lt.Small,
-                  onUploadClick: (t) => T(t),
+                  size: le.Small,
+                  onUploadClick: (e) => T(e),
                   onLibraryClick: k
                 }
               )
@@ -140,6 +140,6 @@ const vt = ({
   ) : null;
 };
 export {
-  vt as Attachments
+  ye as Attachments
 };
 //# sourceMappingURL=Attachments.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport {\n    DndContext,\n    DragEndEvent,\n    DragOverlay,\n    DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    closestCenter,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { Asset, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport {\n    AssetInput,\n    AssetInputSize,\n    Flyout,\n    FlyoutPlacement,\n    IconCaretDown12,\n    IconPaperclip16,\n    Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsProps } from './types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\n\nexport const Attachments = ({\n    items = [],\n    onDelete,\n    onReplaceWithBrowse,\n    onReplaceWithUpload,\n    onBrowse,\n    onUpload,\n    onSorted,\n    appBridge,\n}: AttachmentsProps) => {\n    const [internalItems, setInternalItems] = useState<Asset[]>(items);\n    const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);\n    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);\n    const [isUploadLoading, setIsUploadLoading] = useState(false);\n    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);\n    const isEditing = useEditorState(appBridge);\n\n    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n    });\n\n    useEffect(() => {\n        setInternalItems(items);\n    }, [items]);\n\n    useEffect(() => {\n        if (selectedFiles) {\n            setIsUploadLoading(true);\n            uploadFile(selectedFiles);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedFiles]);\n\n    useEffect(() => {\n        const uploadDone = async () => {\n            if (doneAll) {\n                await onUpload(uploadResults);\n                setIsUploadLoading(false);\n            }\n        };\n        uploadDone();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [doneAll, uploadResults]);\n\n    const onOpenAssetChooser = () => {\n        setIsFlyoutOpen(false);\n        appBridge.openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                appBridge.closeAssetChooser();\n                setIsFlyoutOpen(true);\n            },\n            {\n                multiSelection: true,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithBrowse = (toReplace: Asset) => {\n        setIsFlyoutOpen(false);\n        appBridge.openAssetChooser(\n            async (result: Asset[]) => {\n                setIsFlyoutOpen(true);\n                appBridge.closeAssetChooser();\n                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n                await onReplaceWithBrowse(toReplace, result[0]);\n                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n            },\n            {\n                multiSelection: false,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n        await onReplaceWithUpload(toReplace, uploadedAsset);\n        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setDraggedAssetId(active.id as number);\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const { active, over } = event;\n        if (over && active.id !== over.id && internalItems) {\n            const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n            const newIndex = internalItems.findIndex((i) => i.id === over.id);\n            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n            setInternalItems(sortedItems);\n            onSorted(sortedItems);\n        }\n        setDraggedAssetId(undefined);\n    };\n\n    return isEditing || (internalItems?.length ?? 0) > 0 ? (\n        <Tooltip\n            withArrow\n            position={TooltipPosition.Top}\n            content=\"Attachments\"\n            disabled={isFlyoutOpen}\n            enterDelay={500}\n            triggerElement={\n                <div data-test-id=\"attachments-flyout-button\">\n                    <Flyout\n                        placement={FlyoutPlacement.BottomRight}\n                        onOpenChange={(isOpen) => setIsFlyoutOpen(!!draggedItem ? true : isOpen)}\n                        isOpen={isFlyoutOpen}\n                        hug={false}\n                        fitContent\n                        legacyFooter={false}\n                        trigger={\n                            <div className=\"tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line\">\n                                <IconPaperclip16 />\n                                <div>{items.length > 0 ? items.length : 'Add'}</div>\n                                <IconCaretDown12 />\n                            </div>\n                        }\n                    >\n                        <div className=\"tw-w-[300px]\">\n                            {internalItems.length > 0 && (\n                                <DndContext\n                                    sensors={sensors}\n                                    collisionDetection={closestCenter}\n                                    onDragStart={handleDragStart}\n                                    onDragEnd={handleDragEnd}\n                                    modifiers={[restrictToWindowEdges]}\n                                >\n                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n                                        <div className=\"tw-border-b tw-border-b-line\">\n                                            {internalItems.map((item) => (\n                                                <SortableAttachmentItem\n                                                    isEditing={isEditing}\n                                                    isLoading={assetIdsLoading.includes(item.id)}\n                                                    key={item.id}\n                                                    item={item}\n                                                    onDelete={() => onDelete(item)}\n                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                        onReplaceItemWithUpload(item, uploadedAsset)\n                                                    }\n                                                />\n                                            ))}\n                                        </div>\n                                    </SortableContext>\n                                    <DragOverlay>\n                                        {draggedItem && (\n                                            <AttachmentItem\n                                                isOverlay={true}\n                                                isEditing={isEditing}\n                                                key={draggedAssetId}\n                                                item={draggedItem}\n                                                isDragging={true}\n                                                onDelete={() => onDelete(draggedItem)}\n                                                onReplaceWithBrowse={() => onReplaceItemWithBrowse(draggedItem)}\n                                                onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                    onReplaceItemWithUpload(draggedItem, uploadedAsset)\n                                                }\n                                            />\n                                        )}\n                                    </DragOverlay>\n                                </DndContext>\n                            )}\n                            {isEditing && (\n                                <div className=\"tw-px-5 tw-py-3\">\n                                    <div className=\"tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4\">\n                                        Add attachments\n                                    </div>\n                                    <AssetInput\n                                        isLoading={isUploadLoading}\n                                        size={AssetInputSize.Small}\n                                        onUploadClick={(fileList) => setSelectedFiles(fileList)}\n                                        onLibraryClick={onOpenAssetChooser}\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </Flyout>\n                </div>\n            }\n        />\n    ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","internalItems","setInternalItems","useState","isFlyoutOpen","setIsFlyoutOpen","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","jsx","Tooltip","TooltipPosition","Flyout","FlyoutPlacement","isOpen","jsxs","IconPaperclip16","IconCaretDown12","DndContext","closestCenter","restrictToWindowEdges","SortableContext","rectSortingStrategy","SortableAttachmentItem","DragOverlay","AttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}
+{"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport {\n    DndContext,\n    DragEndEvent,\n    DragOverlay,\n    DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    closestCenter,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { Asset, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport {\n    AssetInput,\n    AssetInputSize,\n    Flyout,\n    FlyoutPlacement,\n    IconCaretDown12,\n    IconPaperclip16,\n    LegacyTooltip as Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsProps } from './types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\n\nexport const Attachments = ({\n    items = [],\n    onDelete,\n    onReplaceWithBrowse,\n    onReplaceWithUpload,\n    onBrowse,\n    onUpload,\n    onSorted,\n    appBridge,\n}: AttachmentsProps) => {\n    const [internalItems, setInternalItems] = useState<Asset[]>(items);\n    const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);\n    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);\n    const [isUploadLoading, setIsUploadLoading] = useState(false);\n    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);\n    const isEditing = useEditorState(appBridge);\n\n    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n    });\n\n    useEffect(() => {\n        setInternalItems(items);\n    }, [items]);\n\n    useEffect(() => {\n        if (selectedFiles) {\n            setIsUploadLoading(true);\n            uploadFile(selectedFiles);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedFiles]);\n\n    useEffect(() => {\n        const uploadDone = async () => {\n            if (doneAll) {\n                await onUpload(uploadResults);\n                setIsUploadLoading(false);\n            }\n        };\n        uploadDone();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [doneAll, uploadResults]);\n\n    const onOpenAssetChooser = () => {\n        setIsFlyoutOpen(false);\n        appBridge.openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                appBridge.closeAssetChooser();\n                setIsFlyoutOpen(true);\n            },\n            {\n                multiSelection: true,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithBrowse = (toReplace: Asset) => {\n        setIsFlyoutOpen(false);\n        appBridge.openAssetChooser(\n            async (result: Asset[]) => {\n                setIsFlyoutOpen(true);\n                appBridge.closeAssetChooser();\n                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n                await onReplaceWithBrowse(toReplace, result[0]);\n                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n            },\n            {\n                multiSelection: false,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n        await onReplaceWithUpload(toReplace, uploadedAsset);\n        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setDraggedAssetId(active.id as number);\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const { active, over } = event;\n        if (over && active.id !== over.id && internalItems) {\n            const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n            const newIndex = internalItems.findIndex((i) => i.id === over.id);\n            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n            setInternalItems(sortedItems);\n            onSorted(sortedItems);\n        }\n        setDraggedAssetId(undefined);\n    };\n\n    return isEditing || (internalItems?.length ?? 0) > 0 ? (\n        <Tooltip\n            withArrow\n            position={TooltipPosition.Top}\n            content=\"Attachments\"\n            disabled={isFlyoutOpen}\n            enterDelay={500}\n            triggerElement={\n                <div data-test-id=\"attachments-flyout-button\">\n                    <Flyout\n                        placement={FlyoutPlacement.BottomRight}\n                        onOpenChange={(isOpen) => setIsFlyoutOpen(!!draggedItem ? true : isOpen)}\n                        isOpen={isFlyoutOpen}\n                        hug={false}\n                        fitContent\n                        legacyFooter={false}\n                        trigger={\n                            <div className=\"tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line\">\n                                <IconPaperclip16 />\n                                <div>{items.length > 0 ? items.length : 'Add'}</div>\n                                <IconCaretDown12 />\n                            </div>\n                        }\n                    >\n                        <div className=\"tw-w-[300px]\">\n                            {internalItems.length > 0 && (\n                                <DndContext\n                                    sensors={sensors}\n                                    collisionDetection={closestCenter}\n                                    onDragStart={handleDragStart}\n                                    onDragEnd={handleDragEnd}\n                                    modifiers={[restrictToWindowEdges]}\n                                >\n                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n                                        <div className=\"tw-border-b tw-border-b-line\">\n                                            {internalItems.map((item) => (\n                                                <SortableAttachmentItem\n                                                    isEditing={isEditing}\n                                                    isLoading={assetIdsLoading.includes(item.id)}\n                                                    key={item.id}\n                                                    item={item}\n                                                    onDelete={() => onDelete(item)}\n                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                        onReplaceItemWithUpload(item, uploadedAsset)\n                                                    }\n                                                />\n                                            ))}\n                                        </div>\n                                    </SortableContext>\n                                    <DragOverlay>\n                                        {draggedItem && (\n                                            <AttachmentItem\n                                                isOverlay={true}\n                                                isEditing={isEditing}\n                                                key={draggedAssetId}\n                                                item={draggedItem}\n                                                isDragging={true}\n                                                onDelete={() => onDelete(draggedItem)}\n                                                onReplaceWithBrowse={() => onReplaceItemWithBrowse(draggedItem)}\n                                                onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                    onReplaceItemWithUpload(draggedItem, uploadedAsset)\n                                                }\n                                            />\n                                        )}\n                                    </DragOverlay>\n                                </DndContext>\n                            )}\n                            {isEditing && (\n                                <div className=\"tw-px-5 tw-py-3\">\n                                    <div className=\"tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4\">\n                                        Add attachments\n                                    </div>\n                                    <AssetInput\n                                        isLoading={isUploadLoading}\n                                        size={AssetInputSize.Small}\n                                        onUploadClick={(fileList) => setSelectedFiles(fileList)}\n                                        onLibraryClick={onOpenAssetChooser}\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </Flyout>\n                </div>\n            }\n        />\n    ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","internalItems","setInternalItems","useState","isFlyoutOpen","setIsFlyoutOpen","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","jsx","Tooltip","TooltipPosition","Flyout","FlyoutPlacement","isOpen","jsxs","IconPaperclip16","IconCaretDown12","DndContext","closestCenter","restrictToWindowEdges","SortableContext","rectSortingStrategy","SortableAttachmentItem","DragOverlay","AttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":";;;;;;;;AA8BO,MAAMA,KAAc,CAAC;AAAA,EACxB,OAAAC,IAAQ,CAAC;AAAA,EACT,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACJ,MAAwB;AACpB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAkBV,CAAK,GAC3D,CAACW,GAAcC,CAAe,IAAIF,EAAS,EAAK,GAChDG,IAAUC,EAAWC,EAAUC,CAAa,GAAGD,EAAUE,CAAc,CAAC,GACxE,CAACC,GAAgBC,CAAiB,IAAIT,EAA6B,MAAS,GAC5E,CAACU,GAAiBC,CAAkB,IAAIX,EAAS,EAAK,GACtD,CAACY,GAAiBC,CAAkB,IAAIb,EAAmB,CAAE,CAAA,GAC7D,CAACc,GAAeC,CAAgB,IAAIf,EAA0B,IAAI,GAClEgB,IAAYC,EAAepB,CAAS,GAEpCqB,IAAcpB,KAAA,gBAAAA,EAAe,KAAK,CAACqB,MAASA,EAAK,OAAOX,IAExD,CAACY,GAAY,EAAE,SAASC,GAAe,SAAAC,EAAQ,CAAC,IAAIC,EAAe;AAAA,IACrE,kBAAkB,MAAM,CAACb,KAAmBC,EAAmB,EAAI;AAAA,EAAA,CACtE;AAED,EAAAa,EAAU,MAAM;AACZ,IAAAzB,EAAiBT,CAAK;AAAA,EAAA,GACvB,CAACA,CAAK,CAAC,GAEVkC,EAAU,MAAM;AACZ,IAAIV,MACAH,EAAmB,EAAI,GACvBS,EAAWN,CAAa;AAAA,EAC5B,GAED,CAACA,CAAa,CAAC,GAElBU,EAAU,MAAM;AAOD,KANQ,YAAY;AAC3B,MAAIF,MACA,MAAM3B,EAAS0B,CAAa,GAC5BV,EAAmB,EAAK;AAAA,IAC5B;EAEO,GAEZ,CAACW,GAASD,CAAa,CAAC;AAE3B,QAAMI,IAAqB,MAAM;AAC7B,IAAAvB,EAAgB,EAAK,GACXL,EAAA;AAAA,MACN,CAAC6B,MAAoB;AACjB,QAAAhC,EAASgC,CAAM,GACf7B,EAAU,kBAAkB,GAC5BK,EAAgB,EAAI;AAAA,MACxB;AAAA,MACA;AAAA,QACI,gBAAgB;AAAA,QAChB,kBAAkBJ,EAAc,IAAI,CAAC6B,MAAiBA,EAAa,EAAE;AAAA,MACzE;AAAA,IAAA;AAAA,EACJ,GAGEC,IAA0B,CAACC,MAAqB;AAClD,IAAA3B,EAAgB,EAAK,GACXL,EAAA;AAAA,MACN,OAAO6B,MAAoB;AACvB,QAAAxB,EAAgB,EAAI,GACpBL,EAAU,kBAAkB,GAC5BgB,EAAmB,CAAC,GAAGD,GAAiBiB,EAAU,EAAE,CAAC,GACrD,MAAMrC,EAAoBqC,GAAWH,EAAO,CAAC,CAAC,GAC9Cb,EAAmBD,EAAgB,OAAO,CAACkB,MAAOA,MAAOD,EAAU,EAAE,CAAC;AAAA,MAC1E;AAAA,MACA;AAAA,QACI,gBAAgB;AAAA,QAChB,kBAAkB/B,EAAc,IAAI,CAAC6B,MAAiBA,EAAa,EAAE;AAAA,MACzE;AAAA,IAAA;AAAA,EACJ,GAGEI,IAA0B,OAAOF,GAAkBG,MAAyB;AAC9E,IAAAnB,EAAmB,CAAC,GAAGD,GAAiBiB,EAAU,EAAE,CAAC,GAC/C,MAAApC,EAAoBoC,GAAWG,CAAa,GAClDnB,EAAmBD,EAAgB,OAAO,CAACkB,MAAOA,MAAOD,EAAU,EAAE,CAAC;AAAA,EAAA,GAGpEI,IAAkB,CAACC,MAA0B;AACzC,UAAA,EAAE,QAAAC,EAAW,IAAAD;AACnB,IAAAzB,EAAkB0B,EAAO,EAAY;AAAA,EAAA,GAGnCC,IAAgB,CAACF,MAAwB;AACrC,UAAA,EAAE,QAAAC,GAAQ,MAAAE,EAAS,IAAAH;AACzB,QAAIG,KAAQF,EAAO,OAAOE,EAAK,MAAMvC,GAAe;AAC1C,YAAAwC,IAAWxC,EAAc,UAAU,CAACyC,MAAMA,EAAE,OAAOJ,EAAO,EAAE,GAC5DK,IAAW1C,EAAc,UAAU,CAACyC,MAAMA,EAAE,OAAOF,EAAK,EAAE,GAC1DI,IAAcC,EAAU5C,GAAewC,GAAUE,CAAQ;AAC/D,MAAAzC,EAAiB0C,CAAW,GAC5B7C,EAAS6C,CAAW;AAAA,IACxB;AACA,IAAAhC,EAAkB,MAAS;AAAA,EAAA;AAG/B,SAAOO,OAAclB,KAAA,gBAAAA,EAAe,WAAU,KAAK,IAC/C,gBAAA6C;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,UAAUC,GAAgB;AAAA,MAC1B,SAAQ;AAAA,MACR,UAAU5C;AAAA,MACV,YAAY;AAAA,MACZ,gBACI,gBAAA0C,EAAC,OAAI,EAAA,gBAAa,6BACd,UAAA,gBAAAA;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,WAAWC,GAAgB;AAAA,UAC3B,cAAc,CAACC,MAAW9C,EAAkBgB,IAAc,KAAO8B,CAAM;AAAA,UACvE,QAAQ/C;AAAA,UACR,KAAK;AAAA,UACL,YAAU;AAAA,UACV,cAAc;AAAA,UACd,SACI,gBAAAgD,EAAC,OAAI,EAAA,WAAU,oTACX,UAAA;AAAA,YAAA,gBAAAN,EAACO,IAAgB,EAAA;AAAA,8BAChB,OAAK,EAAA,UAAA5D,EAAM,SAAS,IAAIA,EAAM,SAAS,OAAM;AAAA,8BAC7C6D,IAAgB,EAAA;AAAA,UAAA,GACrB;AAAA,UAGJ,UAAA,gBAAAF,EAAC,OAAI,EAAA,WAAU,gBACV,UAAA;AAAA,YAAAnD,EAAc,SAAS,KACpB,gBAAAmD;AAAA,cAACG;AAAA,cAAA;AAAA,gBACG,SAAAjD;AAAA,gBACA,oBAAoBkD;AAAA,gBACpB,aAAapB;AAAA,gBACb,WAAWG;AAAA,gBACX,WAAW,CAACkB,EAAqB;AAAA,gBAEjC,UAAA;AAAA,kBAAA,gBAAAX,EAACY,GAAgB,EAAA,OAAOzD,GAAe,UAAU0D,GAC7C,UAAA,gBAAAb,EAAC,OAAI,EAAA,WAAU,gCACV,UAAA7C,EAAc,IAAI,CAACqB,MAChB,gBAAAwB;AAAA,oBAACc;AAAA,oBAAA;AAAA,sBACG,WAAAzC;AAAA,sBACA,WAAWJ,EAAgB,SAASO,EAAK,EAAE;AAAA,sBAE3C,MAAAA;AAAA,sBACA,UAAU,MAAM5B,EAAS4B,CAAI;AAAA,sBAC7B,qBAAqB,MAAMS,EAAwBT,CAAI;AAAA,sBACvD,qBAAqB,CAACa,MAClBD,EAAwBZ,GAAMa,CAAa;AAAA,oBAAA;AAAA,oBAL1Cb,EAAK;AAAA,kBAAA,CAQjB,GACL,EACJ,CAAA;AAAA,kBACA,gBAAAwB,EAACe,KACI,UACGxC,KAAA,gBAAAyB;AAAA,oBAACgB;AAAA,oBAAA;AAAA,sBACG,WAAW;AAAA,sBACX,WAAA3C;AAAA,sBAEA,MAAME;AAAA,sBACN,YAAY;AAAA,sBACZ,UAAU,MAAM3B,EAAS2B,CAAW;AAAA,sBACpC,qBAAqB,MAAMU,EAAwBV,CAAW;AAAA,sBAC9D,qBAAqB,CAACc,MAClBD,EAAwBb,GAAac,CAAa;AAAA,oBAAA;AAAA,oBANjDxB;AAAA,kBAAA,GAUjB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,YAEHQ,KACG,gBAAAiC,EAAC,OAAI,EAAA,WAAU,mBACX,UAAA;AAAA,cAAC,gBAAAN,EAAA,OAAA,EAAI,WAAU,8DAA6D,UAE5E,mBAAA;AAAA,cACA,gBAAAA;AAAA,gBAACiB;AAAA,gBAAA;AAAA,kBACG,WAAWlD;AAAA,kBACX,MAAMmD,GAAe;AAAA,kBACrB,eAAe,CAACC,MAAa/C,EAAiB+C,CAAQ;AAAA,kBACtD,gBAAgBrC;AAAA,gBAAA;AAAA,cACpB;AAAA,YAAA,GACJ;AAAA,UAAA,GAER;AAAA,QAAA;AAAA,MAAA,GAER;AAAA,IAAA;AAAA,EAGR,IAAA;AACR;"}

package/dist/components/BlockItemWrapper/Toolbar.es.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { Tooltip as l, TooltipPosition as n, Flyout as h, IconDotsHorizontal16 as m, ActionMenu as u, MenuItemContentSize as f } from "@frontify/fondue";
+import { LegacyTooltip as l, TooltipPosition as n, Flyout as h, IconDotsHorizontal16 as m, ActionMenu as u, MenuItemContentSize as f } from "@frontify/fondue";
 import { DEFAULT_DRAGGING_TOOLTIP as v, DEFAULT_DRAG_TOOLTIP as x } from "./constants.es.js";
 import { joinClassNames as g } from "../../utilities/react/joinClassNames.es.js";
 const A = ({

package/dist/components/BlockItemWrapper/Toolbar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.es.js","sources":["../../../src/components/BlockItemWrapper/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { ToolbarProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';\n\nexport const Toolbar = ({\n    items,\n    flyoutItems,\n    isFlyoutOpen,\n    setIsFlyoutOpen,\n    isDragging,\n    isFlyoutDisabled,\n}: ToolbarProps) => {\n    return (\n        <div data-test-id=\"block-item-wrapper-toolbar\" className=\"tw-flex tw-justify-end\">\n            <div className=\"tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded\">\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={joinClassNames([\n                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',\n                                        isDragging\n                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'\n                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ),\n                )}\n                {flyoutItems.length > 0 && (\n                    <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6\">\n                        <Flyout\n                            isOpen={isFlyoutOpen && !isDragging}\n                            isTriggerDisabled={isFlyoutDisabled}\n                            legacyFooter={false}\n                            fitContent\n                            hug={false}\n                            onOpenChange={setIsFlyoutOpen}\n                            trigger={\n                                <Tooltip\n                                    withArrow\n                                    hoverDelay={0}\n                                    enterDelay={300}\n                                    disabled={isDragging}\n                                    position={TooltipPosition.Top}\n                                    content={<div>Options</div>}\n                                    triggerElement={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                />\n                            }\n                        >\n                            <ActionMenu\n                                menuBlocks={flyoutItems.map((block, blockIndex) => ({\n                                    id: blockIndex.toString(),\n                                    menuItems: block.map((item, itemIndex) => ({\n                                        id: blockIndex.toString() + itemIndex.toString(),\n                                        size: MenuItemContentSize.XSmall,\n                                        title: item.title,\n                                        style: item.style,\n                                        onClick: () => {\n                                            setIsFlyoutOpen(false);\n                                            item.onClick();\n                                        },\n                                        initialValue: true,\n                                        decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                    })),\n                                }))}\n                            />\n                        </Flyout>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutItems","isFlyoutOpen","setIsFlyoutOpen","isDragging","isFlyoutDisabled","jsx","jsxs","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","joinClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":"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"}
+{"version":3,"file":"Toolbar.es.js","sources":["../../../src/components/BlockItemWrapper/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    LegacyTooltip as Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { ToolbarProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';\n\nexport const Toolbar = ({\n    items,\n    flyoutItems,\n    isFlyoutOpen,\n    setIsFlyoutOpen,\n    isDragging,\n    isFlyoutDisabled,\n}: ToolbarProps) => {\n    return (\n        <div data-test-id=\"block-item-wrapper-toolbar\" className=\"tw-flex tw-justify-end\">\n            <div className=\"tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded\">\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={joinClassNames([\n                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',\n                                        isDragging\n                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'\n                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ),\n                )}\n                {flyoutItems.length > 0 && (\n                    <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6\">\n                        <Flyout\n                            isOpen={isFlyoutOpen && !isDragging}\n                            isTriggerDisabled={isFlyoutDisabled}\n                            legacyFooter={false}\n                            fitContent\n                            hug={false}\n                            onOpenChange={setIsFlyoutOpen}\n                            trigger={\n                                <Tooltip\n                                    withArrow\n                                    hoverDelay={0}\n                                    enterDelay={300}\n                                    disabled={isDragging}\n                                    position={TooltipPosition.Top}\n                                    content={<div>Options</div>}\n                                    triggerElement={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                />\n                            }\n                        >\n                            <ActionMenu\n                                menuBlocks={flyoutItems.map((block, blockIndex) => ({\n                                    id: blockIndex.toString(),\n                                    menuItems: block.map((item, itemIndex) => ({\n                                        id: blockIndex.toString() + itemIndex.toString(),\n                                        size: MenuItemContentSize.XSmall,\n                                        title: item.title,\n                                        style: item.style,\n                                        onClick: () => {\n                                            setIsFlyoutOpen(false);\n                                            item.onClick();\n                                        },\n                                        initialValue: true,\n                                        decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                    })),\n                                }))}\n                            />\n                        </Flyout>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutItems","isFlyoutOpen","setIsFlyoutOpen","isDragging","isFlyoutDisabled","jsx","jsxs","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","joinClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":"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"}

package/dist/components/DownloadButton/DownloadButton.es.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useFocusRing as i } from "@react-aria/focus";
-import { Tooltip as s, TooltipPosition as l, FOCUS_STYLE as w, IconArrowCircleDown16 as a } from "@frontify/fondue";
+import { LegacyTooltip as s, TooltipPosition as l, FOCUS_STYLE as a, IconArrowCircleDown16 as w } from "@frontify/fondue";
 import { joinClassNames as u } from "../../utilities/react/joinClassNames.es.js";
 const b = ({ onDownload: o }) => {
   const { isFocused: e, focusProps: n } = i();
@@ -17,7 +17,7 @@ const b = ({ onDownload: o }) => {
           tabIndex: 0,
           "aria-label": "Download",
           ...n,
-          className: u(["tw-outline-none tw-rounded", e && w]),
+          className: u(["tw-outline-none tw-rounded", e && a]),
           onClick: o,
           onPointerDown: (r) => r.preventDefault(),
           children: /* @__PURE__ */ t(
@@ -25,7 +25,7 @@ const b = ({ onDownload: o }) => {
             {
               "data-test-id": "download-button",
               className: "tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line",
-              children: /* @__PURE__ */ t(a, {})
+              children: /* @__PURE__ */ t(w, {})
             }
           )
         }

package/dist/components/DownloadButton/DownloadButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { DownloadButtonProps } from './types';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, IconArrowCircleDown16, Tooltip, TooltipPosition } from '@frontify/fondue';\nimport { joinClassNames } from '../../utilities';\n\nexport const DownloadButton = ({ onDownload }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip\n            withArrow\n            position={TooltipPosition.Top}\n            content=\"Download\"\n            enterDelay={500}\n            triggerElement={\n                <button\n                    tabIndex={0}\n                    aria-label=\"Download\"\n                    {...focusProps}\n                    className={joinClassNames(['tw-outline-none tw-rounded', isFocused && FOCUS_STYLE])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                >\n                    <span\n                        data-test-id=\"download-button\"\n                        className=\"tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line\"\n                    >\n                        <IconArrowCircleDown16 />\n                    </span>\n                </button>\n            }\n        />\n    );\n};\n"],"names":["DownloadButton","onDownload","isFocused","focusProps","useFocusRing","jsx","Tooltip","TooltipPosition","joinClassNames","FOCUS_STYLE","e","IconArrowCircleDown16"],"mappings":";;;;AAOO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,QAAsC;AACnE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa;AAG3C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,UAAUC,EAAgB;AAAA,MAC1B,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBACI,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UAAU;AAAA,UACV,cAAW;AAAA,UACV,GAAGF;AAAA,UACJ,WAAWK,EAAe,CAAC,8BAA8BN,KAAaO,CAAW,CAAC;AAAA,UAClF,SAASR;AAAA,UACT,eAAe,CAACS,MAAMA,EAAE,eAAe;AAAA,UAEvC,UAAA,gBAAAL;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,4BAACM,GAAsB,EAAA;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { DownloadButtonProps } from './types';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, IconArrowCircleDown16, LegacyTooltip as Tooltip, TooltipPosition } from '@frontify/fondue';\nimport { joinClassNames } from '../../utilities';\n\nexport const DownloadButton = ({ onDownload }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip\n            withArrow\n            position={TooltipPosition.Top}\n            content=\"Download\"\n            enterDelay={500}\n            triggerElement={\n                <button\n                    tabIndex={0}\n                    aria-label=\"Download\"\n                    {...focusProps}\n                    className={joinClassNames(['tw-outline-none tw-rounded', isFocused && FOCUS_STYLE])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                >\n                    <span\n                        data-test-id=\"download-button\"\n                        className=\"tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line\"\n                    >\n                        <IconArrowCircleDown16 />\n                    </span>\n                </button>\n            }\n        />\n    );\n};\n"],"names":["DownloadButton","onDownload","isFocused","focusProps","useFocusRing","jsx","Tooltip","TooltipPosition","joinClassNames","FOCUS_STYLE","e","IconArrowCircleDown16"],"mappings":";;;;AAOO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,QAAsC;AACnE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa;AAG3C,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,UAAUC,EAAgB;AAAA,MAC1B,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBACI,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UAAU;AAAA,UACV,cAAW;AAAA,UACV,GAAGF;AAAA,UACJ,WAAWK,EAAe,CAAC,8BAA8BN,KAAaO,CAAW,CAAC;AAAA,UAClF,SAASR;AAAA,UACT,eAAe,CAACS,MAAMA,EAAE,eAAe;AAAA,UAEvC,UAAA,gBAAAL;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,4BAACM,GAAsB,EAAA;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/dist/components/Link/LinkInput.es.js

@@ -0,0 +1,61 @@
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { CheckboxState as l, FormControl as w, TooltipPosition as C, TextInput as S, ButtonSize as f, Checkbox as L } from "@frontify/fondue";
+import { isValidUrlOrEmpty as N } from "./utils/url.es.js";
+import { LinkSelector as O } from "./LinkSelector/LinkSelector.es.js";
+const z = ({
+  onUrlChange: i,
+  onToggleTab: a,
+  isValidUrlOrEmpty: o,
+  appBridge: r,
+  clearable: c,
+  placeholder: d,
+  newTab: s,
+  openInNewTab: m,
+  url: e = "",
+  required: p,
+  info: n,
+  label: h,
+  buttonSize: u,
+  hideInternalLinkButton: x
+}) => {
+  const v = o ? o(e) : N(e), k = s ?? (m ? l.Checked : l.Unchecked);
+  return /* @__PURE__ */ b("div", { "data-test-id": "link-input", children: [
+    /* @__PURE__ */ t(
+      w,
+      {
+        label: {
+          children: h,
+          htmlFor: "url",
+          required: p,
+          tooltip: n ? { content: n, position: C.Top } : void 0
+        },
+        children: /* @__PURE__ */ t(
+          S,
+          {
+            id: "url",
+            value: e,
+            clearable: c,
+            onChange: i,
+            placeholder: d ?? "https://example.com",
+            focusOnMount: !0
+          }
+        )
+      }
+    ),
+    !v && /* @__PURE__ */ t("div", { className: "tw-text-text-negative tw-mt-1 tw-text-s", children: "Please enter a valid URL." }),
+    !x && /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(
+      O,
+      {
+        url: e,
+        appBridge: r,
+        onUrlChange: i,
+        buttonSize: u ?? f.Medium
+      }
+    ) }),
+    /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(L, { value: "new-tab", label: "Open in new tab", state: k, onChange: a }) })
+  ] });
+};
+export {
+  z as LinkInput
+};
+//# sourceMappingURL=LinkInput.es.js.map

package/dist/components/Link/LinkInput.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { ButtonSize, Checkbox, CheckboxState, FormControl, TextInput, TooltipPosition } from '@frontify/fondue';\nimport { LinkSelector } from './LinkSelector';\nimport { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';\n\ntype LinkInputProps = {\n    url?: string;\n    info?: string;\n    label?: string;\n    required?: boolean;\n    newTab?: CheckboxState;\n    openInNewTab?: boolean;\n    onUrlChange?: (value: string) => void;\n    onToggleTab?: (checked: boolean) => void;\n    isValidUrlOrEmpty?: (url: string) => boolean;\n    appBridge: AppBridgeBlock;\n    clearable?: boolean;\n    placeholder?: string;\n    buttonSize?: ButtonSize;\n    hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n    onUrlChange,\n    onToggleTab,\n    isValidUrlOrEmpty,\n    appBridge,\n    clearable,\n    placeholder,\n    newTab,\n    openInNewTab,\n    url = '',\n    required,\n    info,\n    label,\n    buttonSize,\n    hideInternalLinkButton,\n}: LinkInputProps) => {\n    const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\n    const checkedState = newTab ?? (openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked);\n    return (\n        <div data-test-id=\"link-input\">\n            <FormControl\n                label={{\n                    children: label,\n                    htmlFor: 'url',\n                    required,\n                    tooltip: info ? { content: info, position: TooltipPosition.Top } : undefined,\n                }}\n            >\n                <TextInput\n                    id=\"url\"\n                    value={url}\n                    clearable={clearable}\n                    onChange={onUrlChange}\n                    placeholder={placeholder ?? 'https://example.com'}\n                    focusOnMount\n                />\n            </FormControl>\n            {!isUrlValid && <div className=\"tw-text-text-negative tw-mt-1 tw-text-s\">Please enter a valid URL.</div>}\n\n            {!hideInternalLinkButton && (\n                <div className=\"tw-mt-3\">\n                    <LinkSelector\n                        url={url}\n                        appBridge={appBridge}\n                        onUrlChange={onUrlChange}\n                        buttonSize={buttonSize ?? ButtonSize.Medium}\n                    />\n                </div>\n            )}\n\n            <div className=\"tw-mt-3\">\n                <Checkbox value=\"new-tab\" label=\"Open in new tab\" state={checkedState} onChange={onToggleTab} />\n            </div>\n        </div>\n    );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","clearable","placeholder","newTab","openInNewTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","checkedState","CheckboxState","jsxs","jsx","FormControl","TooltipPosition","TextInput","LinkSelector","ButtonSize","Checkbox"],"mappings":";;;;AAwBO,MAAMA,IAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaZ,IAAoBA,EAAkBM,CAAG,IAAIO,EAA0BP,CAAG,GACvFQ,IAAeV,MAAWC,IAAeU,EAAc,UAAUA,EAAc;AAEjF,SAAA,gBAAAC,EAAC,OAAI,EAAA,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUT;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAUW,EAAgB,IAAQ,IAAA;AAAA,QACvE;AAAA,QAEA,UAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,OAAOd;AAAA,YACP,WAAAJ;AAAA,YACA,UAAUJ;AAAA,YACV,aAAaK,KAAe;AAAA,YAC5B,cAAY;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IACJ;AAAA,IACC,CAACS,KAAc,gBAAAK,EAAC,OAAI,EAAA,WAAU,2CAA0C,UAAyB,6BAAA;AAAA,IAEjG,CAACN,KACG,gBAAAM,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAf;AAAA,QACA,WAAAL;AAAA,QACA,aAAAH;AAAA,QACA,YAAYY,KAAcY,EAAW;AAAA,MAAA;AAAA,IAAA,GAE7C;AAAA,IAGH,gBAAAL,EAAA,OAAA,EAAI,WAAU,WACX,4BAACM,GAAS,EAAA,OAAM,WAAU,OAAM,mBAAkB,OAAOT,GAAc,UAAUf,EAAa,CAAA,GAClG;AAAA,EACJ,EAAA,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/DocumentLink.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentLink.es.js","sources":["../../../../src/components/Link/LinkSelector/DocumentLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { useEffect, useState } from 'react';\nimport { PageLinks } from './PageLinks';\nimport { IconColorFan16, merge } from '@frontify/fondue';\nimport { InitiallyExpandedItems } from '../';\n\ntype DocumentLinkProps = {\n    document: {\n        id: number;\n        title: string;\n        permanentLink: string;\n    };\n    appBridge: AppBridgeBlock;\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n    itemsToExpandInitially: InitiallyExpandedItems;\n};\n\nexport const DocumentLink = ({\n    document,\n    appBridge,\n    selectedUrl,\n    onSelectUrl,\n    itemsToExpandInitially,\n}: DocumentLinkProps) => {\n    const [isExpanded, setIsExpanded] = useState(document.id === itemsToExpandInitially.documentId);\n    const isActive = document.permanentLink === selectedUrl;\n\n    useEffect(() => {\n        if (document.id === itemsToExpandInitially.documentId) {\n            setIsExpanded(true);\n        }\n    }, [itemsToExpandInitially, document.id]);\n\n    return (\n        <>\n            <button\n                data-test-id=\"internal-link-selector-document-link\"\n                className={merge([\n                    'tw-flex tw-flex-1 tw-space-x-2 tw-items-center tw-py-2 tw-px-2.5 tw-leading-5 tw-cursor-pointer tw-w-full',\n                    isActive\n                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'\n                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                ])}\n                onClick={() => onSelectUrl(document.permanentLink)}\n                onFocus={() => onSelectUrl(document.permanentLink)}\n            >\n                <div\n                    role=\"button\"\n                    tabIndex={0}\n                    data-test-id=\"tree-item-toggle\"\n                    className=\"tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer\"\n                    onClick={() => setIsExpanded(!isExpanded)}\n                    onFocus={() => setIsExpanded(!isExpanded)}\n                >\n                    <div\n                        className={merge([\n                            'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                            isExpanded ? 'tw-rotate-90' : '',\n                        ])}\n                    ></div>\n                </div>\n                <IconColorFan16 />\n                <span className=\"tw-text-s\">{document.title}</span>\n                <span className=\"tw-flex-auto tw-font-sans tw-text-xs tw-text-right\">Document</span>\n            </button>\n            {isExpanded && (\n                <PageLinks\n                    appBridge={appBridge}\n                    documentId={document.id}\n                    selectedUrl={selectedUrl}\n                    onSelectUrl={onSelectUrl}\n                    itemsToExpandInitially={itemsToExpandInitially}\n                />\n            )}\n        </>\n    );\n};\n"],"names":["DocumentLink","document","appBridge","selectedUrl","onSelectUrl","itemsToExpandInitially","isExpanded","setIsExpanded","useState","isActive","useEffect","jsxs","Fragment","merge","jsx","IconColorFan16","PageLinks"],"mappings":";;;;AAoBO,MAAMA,IAAe,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,wBAAAC;AACJ,MAAyB;AACf,QAAA,CAACC,GAAYC,CAAa,IAAIC,EAASP,EAAS,OAAOI,EAAuB,UAAU,GACxFI,IAAWR,EAAS,kBAAkBE;AAE5C,SAAAO,EAAU,MAAM;AACR,IAAAT,EAAS,OAAOI,EAAuB,cACvCE,EAAc,EAAI;AAAA,EAEvB,GAAA,CAACF,GAAwBJ,EAAS,EAAE,CAAC,GAIhC,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWE,EAAM;AAAA,UACb;AAAA,UACAJ,IACM,oKACA;AAAA,QAAA,CACT;AAAA,QACD,SAAS,MAAML,EAAYH,EAAS,aAAa;AAAA,QACjD,SAAS,MAAMG,EAAYH,EAAS,aAAa;AAAA,QAEjD,UAAA;AAAA,UAAA,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAU;AAAA,cACV,gBAAa;AAAA,cACb,WAAU;AAAA,cACV,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,cACxC,SAAS,MAAMC,EAAc,CAACD,CAAU;AAAA,cAExC,UAAA,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAWD,EAAM;AAAA,oBACb;AAAA,oBACAP,IAAa,iBAAiB;AAAA,kBAAA,CACjC;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACL;AAAA,4BACCS,GAAe,EAAA;AAAA,UACf,gBAAAD,EAAA,QAAA,EAAK,WAAU,aAAa,YAAS,OAAM;AAAA,UAC3C,gBAAAA,EAAA,QAAA,EAAK,WAAU,sDAAqD,UAAQ,YAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjF;AAAA,IACCR,KACG,gBAAAQ;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,WAAAd;AAAA,QACA,YAAYD,EAAS;AAAA,QACrB,aAAAE;AAAA,QACA,aAAAC;AAAA,QACA,wBAAAC;AAAA,MAAA;AAAA,IACJ;AAAA,EAER,EAAA,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/DocumentLinks.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentLinks.es.js","sources":["../../../../src/components/Link/LinkSelector/DocumentLinks.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock, Document } from '@frontify/app-bridge';\nimport { LoadingCircle } from '@frontify/fondue';\nimport { ReactElement, useEffect, useState } from 'react';\nimport { DocumentLink } from './DocumentLink';\nimport { InitiallyExpandedItems } from '../';\n\ntype DocumentLinksProps = {\n    appBridge: AppBridgeBlock;\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n};\n\nexport const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentLinksProps): ReactElement => {\n    const [isLoading, setIsLoading] = useState(true);\n    const [documents, setDocuments] = useState<Document[]>([]);\n    const [itemsToExpandInitially, setItemsToExpandInitially] = useState<InitiallyExpandedItems>({\n        documentId: undefined,\n        pageId: undefined,\n    });\n\n    const documentArray = [...documents.values()];\n\n    useEffect(() => {\n        if (selectedUrl && documentArray.length > 0) {\n            findLocationOfSelectedUrl().then((items) => {\n                setItemsToExpandInitially(items);\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [documentArray.length]);\n\n    useEffect(() => {\n        appBridge\n            .getAllDocuments()\n            .then((_documents) => {\n                setDocuments(_documents);\n            })\n            .finally(() => {\n                setIsLoading(false);\n            });\n    }, []);\n\n    const findLocationOfSelectedUrl = async () => {\n        const itemsToExpand: InitiallyExpandedItems = {\n            documentId: undefined,\n            pageId: undefined,\n        };\n        const selectedUrlIsDocument = documentArray.find((document) => document.permanentLink === selectedUrl);\n        if (selectedUrlIsDocument) {\n            return itemsToExpand;\n        }\n        for (const document of documentArray) {\n            const pages = await appBridge.getDocumentPagesByDocumentId(document.id);\n            appBridge.getAllDocuments();\n            const pagesArray = [...pages.values()];\n            const selectedUrlIsPage = !!pagesArray.find((page) => page.permanentLink === selectedUrl);\n            if (selectedUrlIsPage) {\n                itemsToExpand.documentId = document.id;\n                return itemsToExpand;\n            }\n            for (const page of pagesArray) {\n                const sections = await appBridge.getDocumentSectionsByDocumentPageId(page.id);\n                const sectionsArray = [...sections.values()];\n                const selectedUrlIsSection = !!sectionsArray.find((section) => section.permanentLink === selectedUrl);\n                if (selectedUrlIsSection) {\n                    itemsToExpand.documentId = document.id;\n                    itemsToExpand.pageId = page.id;\n                    return itemsToExpand;\n                }\n            }\n        }\n        return itemsToExpand;\n    };\n\n    return isLoading ? (\n        <div className=\"tw-flex tw-justify-center tw-p-4\">\n            <LoadingCircle />\n        </div>\n    ) : (\n        <>\n            {documentArray.map((document) => {\n                return (\n                    <DocumentLink\n                        key={document.id}\n                        document={document}\n                        appBridge={appBridge}\n                        selectedUrl={selectedUrl}\n                        onSelectUrl={onSelectUrl}\n                        itemsToExpandInitially={itemsToExpandInitially}\n                    />\n                );\n            })}\n        </>\n    );\n};\n"],"names":["DocumentLinks","appBridge","selectedUrl","onSelectUrl","isLoading","setIsLoading","useState","documents","setDocuments","itemsToExpandInitially","setItemsToExpandInitially","documentArray","useEffect","findLocationOfSelectedUrl","items","_documents","itemsToExpand","document","pages","pagesArray","page","section","jsx","LoadingCircle","Fragment","DocumentLink"],"mappings":";;;;AAcO,MAAMA,IAAgB,CAAC,EAAE,WAAAC,GAAW,aAAAC,GAAa,aAAAC,QAAoD;AACxG,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAI,GACzC,CAACC,GAAWC,CAAY,IAAIF,EAAqB,CAAE,CAAA,GACnD,CAACG,GAAwBC,CAAyB,IAAIJ,EAAiC;AAAA,IACzF,YAAY;AAAA,IACZ,QAAQ;AAAA,EAAA,CACX,GAEKK,IAAgB,CAAC,GAAGJ,EAAU,OAAQ,CAAA;AAE5C,EAAAK,EAAU,MAAM;AACR,IAAAV,KAAeS,EAAc,SAAS,KACZE,EAAA,EAAE,KAAK,CAACC,MAAU;AACxC,MAAAJ,EAA0BI,CAAK;AAAA,IAAA,CAClC;AAAA,EACL,GAED,CAACH,EAAc,MAAM,CAAC,GAEzBC,EAAU,MAAM;AACZ,IAAAX,EACK,gBAAgB,EAChB,KAAK,CAACc,MAAe;AAClB,MAAAP,EAAaO,CAAU;AAAA,IAAA,CAC1B,EACA,QAAQ,MAAM;AACX,MAAAV,EAAa,EAAK;AAAA,IAAA,CACrB;AAAA,EACT,GAAG,CAAE,CAAA;AAEL,QAAMQ,IAA4B,YAAY;AAC1C,UAAMG,IAAwC;AAAA,MAC1C,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA;AAGZ,QAD8BL,EAAc,KAAK,CAACM,MAAaA,EAAS,kBAAkBf,CAAW;AAE1F,aAAAc;AAEX,eAAWC,KAAYN,GAAe;AAClC,YAAMO,IAAQ,MAAMjB,EAAU,6BAA6BgB,EAAS,EAAE;AACtE,MAAAhB,EAAU,gBAAgB;AAC1B,YAAMkB,IAAa,CAAC,GAAGD,EAAM,OAAQ,CAAA;AAErC,UAD0B,CAAC,CAACC,EAAW,KAAK,CAACC,MAASA,EAAK,kBAAkBlB,CAAW;AAEpF,eAAAc,EAAc,aAAaC,EAAS,IAC7BD;AAEX,iBAAWI,KAAQD;AAIf,YAD6B,CAAC,CADR,CAAC,IADN,MAAMlB,EAAU,oCAAoCmB,EAAK,EAAE,GACzC,OAAQ,CAAA,EACE,KAAK,CAACC,MAAYA,EAAQ,kBAAkBnB,CAAW;AAEhG,iBAAAc,EAAc,aAAaC,EAAS,IACpCD,EAAc,SAASI,EAAK,IACrBJ;AAAA,IAGnB;AACO,WAAAA;AAAA,EAAA;AAGX,SAAOZ,IACH,gBAAAkB,EAAC,OAAI,EAAA,WAAU,oCACX,UAAA,gBAAAA,EAACC,GAAc,CAAA,CAAA,GACnB,IAEA,gBAAAD,EAAAE,GAAA,EACK,UAAcb,EAAA,IAAI,CAACM,MAEZ,gBAAAK;AAAA,IAACG;AAAA,IAAA;AAAA,MAEG,UAAAR;AAAA,MACA,WAAAhB;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,wBAAAM;AAAA,IAAA;AAAA,IALKQ,EAAS;AAAA,EAAA,CAQzB,EACL,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/LinkSelector.es.js

@@ -0,0 +1,67 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { Button as S, IconLink as h, ButtonType as B, ButtonStyle as r, ButtonEmphasis as c, Modal as o, ButtonSize as L } from "@frontify/fondue";
+import { useOverlayTriggerState as T } from "@react-stately/overlays";
+import { useState as x, useEffect as E } from "react";
+import { DocumentLinks as O } from "./DocumentLinks.es.js";
+const M = ({
+  appBridge: m,
+  url: n,
+  onUrlChange: s,
+  buttonSize: u = L.Medium
+}) => {
+  const { open: f, isOpen: k, close: l } = T({}), [i, a] = x(n), y = (e) => {
+    a(e);
+  }, D = (e) => {
+    e.key === "Enter" && d();
+  };
+  E(() => {
+    n && !i && a(n);
+  }, [n, i]);
+  const d = () => {
+    s == null || s(i), l();
+  };
+  return /* @__PURE__ */ p("div", { "data-test-id": "internal-link-selector", onKeyDown: D, children: [
+    /* @__PURE__ */ t(
+      S,
+      {
+        icon: /* @__PURE__ */ t(h, {}),
+        size: u,
+        type: B.Button,
+        style: r.Default,
+        emphasis: c.Default,
+        onClick: () => f(),
+        children: "Internal link"
+      }
+    ),
+    /* @__PURE__ */ p(o, { zIndex: 1001, onClose: () => l(), isOpen: k, isDismissable: !0, children: [
+      /* @__PURE__ */ t(o.Header, { title: "Select internal link" }),
+      /* @__PURE__ */ t(o.Body, { children: /* @__PURE__ */ t(O, { appBridge: m, selectedUrl: i, onSelectUrl: y }) }),
+      /* @__PURE__ */ t(
+        o.Footer,
+        {
+          buttons: [
+            {
+              children: "Cancel",
+              onClick: () => l(),
+              style: r.Default,
+              emphasis: c.Default
+            },
+            {
+              children: "Choose",
+              onClick: (e) => {
+                e == null || e.preventDefault(), d();
+              },
+              style: r.Default,
+              emphasis: c.Strong,
+              disabled: !i
+            }
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  M as LinkSelector
+};
+//# sourceMappingURL=LinkSelector.es.js.map

package/dist/components/Link/LinkSelector/LinkSelector.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkSelector.es.js","sources":["../../../../src/components/Link/LinkSelector/LinkSelector.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle, ButtonType, IconLink, Modal } from '@frontify/fondue';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { KeyboardEvent, ReactElement, useEffect, useState } from 'react';\nimport { DocumentLinks } from './DocumentLinks';\n\ntype LinkSelectorProps = {\n    appBridge: AppBridgeBlock;\n    url: string;\n    onUrlChange?: (value: string) => void;\n    buttonSize?: ButtonSize;\n};\n\nexport const LinkSelector = ({\n    appBridge,\n    url,\n    onUrlChange,\n    buttonSize = ButtonSize.Medium,\n}: LinkSelectorProps): ReactElement => {\n    const { open: openLinkTree, isOpen: isLinkTreeOpen, close: closeLinkTree } = useOverlayTriggerState({});\n    const [selectedUrl, setSelectedUrl] = useState<string>(url);\n\n    const onSelectUrl = (url: string) => {\n        setSelectedUrl(url);\n    };\n\n    const onPressEnter = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            saveLink();\n        }\n    };\n\n    useEffect(() => {\n        if (url && !selectedUrl) {\n            setSelectedUrl(url);\n        }\n    }, [url, selectedUrl]);\n\n    const saveLink = () => {\n        onUrlChange?.(selectedUrl);\n        closeLinkTree();\n    };\n\n    return (\n        <div data-test-id=\"internal-link-selector\" onKeyDown={onPressEnter}>\n            <Button\n                icon={<IconLink />}\n                size={buttonSize}\n                type={ButtonType.Button}\n                style={ButtonStyle.Default}\n                emphasis={ButtonEmphasis.Default}\n                onClick={() => openLinkTree()}\n            >\n                Internal link\n            </Button>\n            <Modal zIndex={1001} onClose={() => closeLinkTree()} isOpen={isLinkTreeOpen} isDismissable>\n                <Modal.Header title=\"Select internal link\" />\n                <Modal.Body>\n                    <DocumentLinks appBridge={appBridge} selectedUrl={selectedUrl} onSelectUrl={onSelectUrl} />\n                </Modal.Body>\n                <Modal.Footer\n                    buttons={[\n                        {\n                            children: 'Cancel',\n                            onClick: () => closeLinkTree(),\n                            style: ButtonStyle.Default,\n                            emphasis: ButtonEmphasis.Default,\n                        },\n                        {\n                            children: 'Choose',\n                            onClick: (event) => {\n                                event?.preventDefault();\n                                saveLink();\n                            },\n                            style: ButtonStyle.Default,\n                            emphasis: ButtonEmphasis.Strong,\n                            disabled: !selectedUrl,\n                        },\n                    ]}\n                />\n            </Modal>\n        </div>\n    );\n};\n"],"names":["LinkSelector","appBridge","url","onUrlChange","buttonSize","ButtonSize","openLinkTree","isLinkTreeOpen","closeLinkTree","useOverlayTriggerState","selectedUrl","setSelectedUrl","useState","onSelectUrl","onPressEnter","event","saveLink","useEffect","jsxs","jsx","Button","IconLink","ButtonType","ButtonStyle","ButtonEmphasis","Modal","DocumentLinks"],"mappings":";;;;;AAeO,MAAMA,IAAe,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAC5B,MAAuC;AAC7B,QAAA,EAAE,MAAMC,GAAc,QAAQC,GAAgB,OAAOC,EAAc,IAAIC,EAAuB,CAAA,CAAE,GAChG,CAACC,GAAaC,CAAc,IAAIC,EAAiBV,CAAG,GAEpDW,IAAc,CAACX,MAAgB;AACjC,IAAAS,EAAeT,CAAG;AAAA,EAAA,GAGhBY,IAAe,CAACC,MAA2C;AACzD,IAAAA,EAAM,QAAQ,WACLC;EACb;AAGJ,EAAAC,EAAU,MAAM;AACR,IAAAf,KAAO,CAACQ,KACRC,EAAeT,CAAG;AAAA,EACtB,GACD,CAACA,GAAKQ,CAAW,CAAC;AAErB,QAAMM,IAAW,MAAM;AACnB,IAAAb,KAAA,QAAAA,EAAcO,IACAF;EAAA;AAGlB,SACK,gBAAAU,EAAA,OAAA,EAAI,gBAAa,0BAAyB,WAAWJ,GAClD,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,wBAAOC,GAAS,EAAA;AAAA,QAChB,MAAMjB;AAAA,QACN,MAAMkB,EAAW;AAAA,QACjB,OAAOC,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,SAAS,MAAMlB,EAAa;AAAA,QAC/B,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IACA,gBAAAY,EAACO,GAAM,EAAA,QAAQ,MAAM,SAAS,MAAMjB,EAAiB,GAAA,QAAQD,GAAgB,eAAa,IACtF,UAAA;AAAA,MAAA,gBAAAY,EAACM,EAAM,QAAN,EAAa,OAAM,uBAAuB,CAAA;AAAA,MAC3C,gBAAAN,EAACM,EAAM,MAAN,EACG,4BAACC,GAAc,EAAA,WAAAzB,GAAsB,aAAAS,GAA0B,aAAAG,EAAA,CAA0B,EAC7F,CAAA;AAAA,MACA,gBAAAM;AAAA,QAACM,EAAM;AAAA,QAAN;AAAA,UACG,SAAS;AAAA,YACL;AAAA,cACI,UAAU;AAAA,cACV,SAAS,MAAMjB,EAAc;AAAA,cAC7B,OAAOe,EAAY;AAAA,cACnB,UAAUC,EAAe;AAAA,YAC7B;AAAA,YACA;AAAA,cACI,UAAU;AAAA,cACV,SAAS,CAACT,MAAU;AAChB,gBAAAA,KAAA,QAAAA,EAAO,kBACEC;cACb;AAAA,cACA,OAAOO,EAAY;AAAA,cACnB,UAAUC,EAAe;AAAA,cACzB,UAAU,CAACd;AAAA,YACf;AAAA,UACJ;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA,GACJ;AAAA,EACJ,EAAA,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/PageLink.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLink.es.js","sources":["../../../../src/components/Link/LinkSelector/PageLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock, useDocumentSection } from '@frontify/app-bridge';\nimport { merge } from '@frontify/fondue';\nimport { useEffect, useState } from 'react';\nimport { InitiallyExpandedItems } from '../';\nimport { SectionLink } from './SectionLink';\n\ntype DocumentLinkProps = {\n    page: {\n        id: number;\n        title: string;\n        permanentLink: string;\n    };\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n    appBridge: AppBridgeBlock;\n    itemsToExpandInitially: InitiallyExpandedItems;\n};\n\nexport const PageLink = ({ page, selectedUrl, onSelectUrl, itemsToExpandInitially, appBridge }: DocumentLinkProps) => {\n    const [isExpanded, setIsExpanded] = useState(page.id === itemsToExpandInitially.documentId);\n    const isActive = page.permanentLink === selectedUrl;\n    const { documentSections } = useDocumentSection(appBridge, page.id);\n    const sectionsArray = [...documentSections.values()];\n    const hasSections = sectionsArray.length > 0;\n\n    useEffect(() => {\n        if (page.id === itemsToExpandInitially.pageId) {\n            setIsExpanded(true);\n        }\n    }, [itemsToExpandInitially, page.id]);\n\n    return (\n        <>\n            <div\n                tabIndex={0}\n                data-test-id=\"internal-link-selector-page-link\"\n                className={merge([\n                    'tw-py-2 tw-px-2.5 tw-leading-5 tw-cursor-pointer',\n                    hasSections ? 'tw-pl-7' : 'tw-pl-12',\n                    isActive\n                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'\n                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                ])}\n                onClick={() => onSelectUrl(page.permanentLink)}\n                onFocus={() => onSelectUrl(page.permanentLink)}\n            >\n                <div key={page.id} className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6\">\n                    {hasSections && (\n                        <button\n                            data-test-id=\"tree-item-toggle\"\n                            className=\"tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer\"\n                            onClick={() => setIsExpanded(!isExpanded)}\n                            onFocus={() => setIsExpanded(!isExpanded)}\n                        >\n                            <div\n                                className={merge([\n                                    'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                    isExpanded ? 'tw-rotate-90' : '',\n                                ])}\n                            ></div>\n                        </button>\n                    )}\n                    <span className=\"tw-text-s\">{page.title}</span>\n                    <span className=\"tw-flex-auto tw-font-sans tw-text-xs tw-text-right\">Page</span>\n                </div>\n            </div>\n            {isExpanded &&\n                sectionsArray.length > 0 &&\n                sectionsArray.map((section) => {\n                    return (\n                        <SectionLink\n                            key={section.id}\n                            section={section}\n                            selectedUrl={selectedUrl}\n                            onSelectUrl={onSelectUrl}\n                        />\n                    );\n                })}\n        </>\n    );\n};\n"],"names":["PageLink","page","selectedUrl","onSelectUrl","itemsToExpandInitially","appBridge","isExpanded","setIsExpanded","useState","isActive","documentSections","useDocumentSection","sectionsArray","hasSections","useEffect","jsxs","Fragment","jsx","merge","section","SectionLink"],"mappings":";;;;;AAoBa,MAAAA,IAAW,CAAC,EAAE,MAAAC,GAAM,aAAAC,GAAa,aAAAC,GAAa,wBAAAC,GAAwB,WAAAC,QAAmC;AAC5G,QAAA,CAACC,GAAYC,CAAa,IAAIC,EAASP,EAAK,OAAOG,EAAuB,UAAU,GACpFK,IAAWR,EAAK,kBAAkBC,GAClC,EAAE,kBAAAQ,EAAiB,IAAIC,EAAmBN,GAAWJ,EAAK,EAAE,GAC5DW,IAAgB,CAAC,GAAGF,EAAiB,OAAQ,CAAA,GAC7CG,IAAcD,EAAc,SAAS;AAE3C,SAAAE,EAAU,MAAM;AACR,IAAAb,EAAK,OAAOG,EAAuB,UACnCG,EAAc,EAAI;AAAA,EAEvB,GAAA,CAACH,GAAwBH,EAAK,EAAE,CAAC,GAI5B,gBAAAc,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAU;AAAA,QACV,gBAAa;AAAA,QACb,WAAWC,EAAM;AAAA,UACb;AAAA,UACAL,IAAc,YAAY;AAAA,UAC1BJ,IACM,oKACA;AAAA,QAAA,CACT;AAAA,QACD,SAAS,MAAMN,EAAYF,EAAK,aAAa;AAAA,QAC7C,SAAS,MAAME,EAAYF,EAAK,aAAa;AAAA,QAE7C,UAAA,gBAAAc,EAAC,OAAkB,EAAA,WAAU,yDACxB,UAAA;AAAA,UACGF,KAAA,gBAAAI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cACV,SAAS,MAAMV,EAAc,CAACD,CAAU;AAAA,cACxC,SAAS,MAAMC,EAAc,CAACD,CAAU;AAAA,cAExC,UAAA,gBAAAW;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAWC,EAAM;AAAA,oBACb;AAAA,oBACAZ,IAAa,iBAAiB;AAAA,kBAAA,CACjC;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACL;AAAA,UAEH,gBAAAW,EAAA,QAAA,EAAK,WAAU,aAAa,YAAK,OAAM;AAAA,UACvC,gBAAAA,EAAA,QAAA,EAAK,WAAU,sDAAqD,UAAI,QAAA;AAAA,QAAA,EAAA,GAjBnEhB,EAAK,EAkBf;AAAA,MAAA;AAAA,IACJ;AAAA,IACCK,KACGM,EAAc,SAAS,KACvBA,EAAc,IAAI,CAACO,MAEX,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,SAAAD;AAAA,QACA,aAAAjB;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,MAHKgB,EAAQ;AAAA,IAAA,CAMxB;AAAA,EACT,EAAA,CAAA;AAER;"}