@frontify/guideline-blocks-settings 2.0.3 → 2.1.0

package/dist/components/BlockInjectButton/BlockInjectButton.es.js

@@ -18,15 +18,15 @@ const et = ({
   validFileType: h,
   verticalLayout: M
 }) => {
-  const [d, b] = I(!1), [n, g] = I(), p = G(null), [s, i] = I(void 0), D = (t) => {
-    if (t.preventDefault(), b(!1), !O(t.dataTransfer.files)) {
+  const [d, p] = I(!1), [n, b] = I(), g = G(null), [s, i] = I(void 0), y = (t) => {
+    if (t.preventDefault(), p(!1), !D(t.dataTransfer.files)) {
       i("Invalid"), setTimeout(() => {
         i(void 0);
       }, 1e3);
       return;
     }
     l?.(t.dataTransfer.files);
-  }, O = (t) => {
+  }, D = (t) => {
     if (!h)
       return !0;
     for (let r = 0; r < t.length; r++) {
@@ -35,14 +35,14 @@ const et = ({
         return !1;
     }
     return !0;
-  }, R = (t) => {
-    if (!p.current || a)
+  }, O = (t) => {
+    if (!g.current || a)
       return;
-    const { clientX: r, clientY: c } = t, N = r === 0 && c === 0, { left: y, top: z, width: B, height: F } = p.current.getBoundingClientRect(), P = N ? B / 2 : r - y, X = N ? F / 2 : c - z;
-    g([P, X]);
+    const { clientX: r, clientY: c } = t, N = r === 0 && c === 0, { left: T, top: z, width: B, height: F } = g.current.getBoundingClientRect(), P = N ? B / 2 : r - T, X = N ? F / 2 : c - z;
+    b([P, X]);
   }, x = H((t) => {
-    t(), g(void 0);
-  }, []), T = J(() => {
+    t(), b(void 0);
+  }, []), R = J(() => {
     const t = [];
     return v && t.push({
       onSelect: () => x(v),
@@ -57,30 +57,30 @@ const et = ({
   return /* @__PURE__ */ o(
     "button",
     {
-      ref: p,
+      ref: g,
       "data-test-id": "block-inject-button",
       className: Q([
-        "tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
+        "tw-font-primary tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
         M ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr",
         S ? "tw-h-full" : "tw-h-[72px]",
         d && !a ? "tw-border-dashed" : "tw-border-solid",
         n && "tw-bg-blank-state-pressed-inverse",
         d && "tw-bg-blank-state-weak-inverse",
         s ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
-        a || n || d || s ? "" : "tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover",
+        a || n || d || s ? "" : "tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover",
         (d || n) && !s ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
       ]),
       onDragEnter: l ? (t) => {
-        if (b(!0), h === "Images")
+        if (p(!0), h === "Images")
           for (const r of Array.from(t.dataTransfer.items))
             r?.type?.startsWith("image/") ? i(void 0) : i("Invalid");
       } : void 0,
       onDragLeave: l ? () => {
-        b(!1), i(void 0);
+        p(!1), i(void 0);
       } : void 0,
-      onDrop: l ? D : void 0,
+      onDrop: l ? y : void 0,
       onClick: (t) => {
-        C && !n && R(t), E?.();
+        C && !n && O(t), E?.();
       },
       children: [
         a ? /* @__PURE__ */ e(K, {}) : s ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
@@ -101,11 +101,11 @@ const et = ({
               left: n[0],
               top: n[1]
             },
-            children: /* @__PURE__ */ o(k.Root, { open: !0, onOpenChange: (t) => !t && g(void 0), children: [
+            children: /* @__PURE__ */ o(k.Root, { open: !0, onOpenChange: (t) => !t && b(void 0), children: [
               /* @__PURE__ */ e(k.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
               /* @__PURE__ */ e(k.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(w.Root, { open: !0, children: [
                 /* @__PURE__ */ e(w.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
-                /* @__PURE__ */ e(w.Content, { triggerOffset: "compact", children: T.map((t) => /* @__PURE__ */ o(w.Item, { onSelect: t.onSelect, children: [
+                /* @__PURE__ */ e(w.Content, { triggerOffset: "compact", children: R.map((t) => /* @__PURE__ */ o(w.Item, { onSelect: t.onSelect, children: [
                   t.icon,
                   t.title
                 ] }, t.title)) })

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

@@ -1 +1 @@
-{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n    onDrop,\n    label,\n    icon,\n    secondaryLabel,\n    isLoading,\n    fillParentContainer,\n    onAssetChooseClick,\n    onUploadClick,\n    withMenu = true,\n    onClick,\n    validFileType,\n    verticalLayout,\n}: BlockInjectButtonProps) => {\n    const [isDraggingOver, setIsDraggingOver] = useState(false);\n    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n        event.preventDefault();\n        setIsDraggingOver(false);\n        if (!isValidAsset(event.dataTransfer.files)) {\n            setErrorMsg('Invalid');\n            setTimeout(() => {\n                setErrorMsg(undefined);\n            }, 1000);\n            return;\n        }\n        onDrop?.(event.dataTransfer.files);\n    };\n\n    const isValidAsset = (files: FileList) => {\n        if (!validFileType) {\n            return true;\n        }\n        for (let i = 0; i < files.length; i++) {\n            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (!buttonRef.current || isLoading) {\n            return;\n        }\n        const { clientX, clientY } = event;\n        const isKeyboardEvent = clientX === 0 && clientY === 0;\n        const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n        const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n        const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n        setMenuPosition([XInsideComponent, YInsideComponent]);\n    };\n\n    const onItemClick = useCallback((callback: () => unknown) => {\n        callback();\n        setMenuPosition(undefined);\n    }, []);\n\n    const menuItems = useMemo(() => {\n        const items = [];\n        if (onUploadClick) {\n            items.push({\n                onSelect: () => onItemClick(onUploadClick),\n                title: 'Upload asset',\n                icon: <IconArrowCircleUp size=\"20\" />,\n            });\n        }\n        if (onAssetChooseClick) {\n            items.push({\n                onSelect: () => onItemClick(onAssetChooseClick),\n                title: 'Browse asset',\n                icon: <IconImageStack size=\"20\" />,\n            });\n        }\n        return items;\n    }, [onAssetChooseClick, onUploadClick, onItemClick]);\n    return (\n        <button\n            ref={buttonRef}\n            data-test-id=\"block-inject-button\"\n            className={joinClassNames([\n                'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n                verticalLayout\n                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n                    : '[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr',\n                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n                menuPosition && 'tw-bg-blank-state-pressed-inverse',\n                isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n                isLoading || menuPosition || isDraggingOver || errorMsg\n                    ? ''\n                    : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n                (isDraggingOver || !!menuPosition) && !errorMsg\n                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n            ])}\n            onDragEnter={\n                onDrop\n                    ? (event) => {\n                          setIsDraggingOver(true);\n                          // is now only used for images, can be adapted if needed\n                          if (validFileType === 'Images') {\n                              for (const item of Array.from(event.dataTransfer.items)) {\n                                  if (!item?.type?.startsWith('image/')) {\n                                      setErrorMsg('Invalid');\n                                  } else {\n                                      setErrorMsg(undefined);\n                                  }\n                              }\n                          }\n                      }\n                    : undefined\n            }\n            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                if (withMenu && !menuPosition) {\n                    openMenu(event);\n                }\n                onClick?.();\n            }}\n        >\n            {isLoading ? (\n                <LoadingCircle />\n            ) : errorMsg ? (\n                <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n                    <IconExclamationMarkTriangle size=\"16\" />\n                    {errorMsg}\n                </div>\n            ) : (\n                <>\n                    {icon && <div>{icon}</div>}\n                    {(label || secondaryLabel) && (\n                        <div className=\"tw-flex tw-flex-col tw-items-start\">\n                            {label && <div className=\"tw-font-medium\">{label}</div>}\n                            {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n                        </div>\n                    )}\n                </>\n            )}\n            {menuPosition && (\n                <div\n                    className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n                    style={{\n                        left: menuPosition[0],\n                        top: menuPosition[1],\n                    }}\n                >\n                    <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n                        <Flyout.Trigger>\n                            <div />\n                        </Flyout.Trigger>\n                        <Flyout.Content triggerOffset=\"compact\">\n                            <Dropdown.Root open>\n                                <Dropdown.Trigger>\n                                    <div />\n                                </Dropdown.Trigger>\n                                <Dropdown.Content triggerOffset=\"compact\">\n                                    {menuItems.map((item) => (\n                                        <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n                                            {item.icon}\n                                            {item.title}\n                                        </Dropdown.Item>\n                                    ))}\n                                </Dropdown.Content>\n                            </Dropdown.Root>\n                        </Flyout.Content>\n                    </Flyout.Root>\n                </div>\n            )}\n        </button>\n    );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}
+{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n    onDrop,\n    label,\n    icon,\n    secondaryLabel,\n    isLoading,\n    fillParentContainer,\n    onAssetChooseClick,\n    onUploadClick,\n    withMenu = true,\n    onClick,\n    validFileType,\n    verticalLayout,\n}: BlockInjectButtonProps) => {\n    const [isDraggingOver, setIsDraggingOver] = useState(false);\n    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n        event.preventDefault();\n        setIsDraggingOver(false);\n        if (!isValidAsset(event.dataTransfer.files)) {\n            setErrorMsg('Invalid');\n            setTimeout(() => {\n                setErrorMsg(undefined);\n            }, 1000);\n            return;\n        }\n        onDrop?.(event.dataTransfer.files);\n    };\n\n    const isValidAsset = (files: FileList) => {\n        if (!validFileType) {\n            return true;\n        }\n        for (let i = 0; i < files.length; i++) {\n            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (!buttonRef.current || isLoading) {\n            return;\n        }\n        const { clientX, clientY } = event;\n        const isKeyboardEvent = clientX === 0 && clientY === 0;\n        const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n        const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n        const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n        setMenuPosition([XInsideComponent, YInsideComponent]);\n    };\n\n    const onItemClick = useCallback((callback: () => unknown) => {\n        callback();\n        setMenuPosition(undefined);\n    }, []);\n\n    const menuItems = useMemo(() => {\n        const items = [];\n        if (onUploadClick) {\n            items.push({\n                onSelect: () => onItemClick(onUploadClick),\n                title: 'Upload asset',\n                icon: <IconArrowCircleUp size=\"20\" />,\n            });\n        }\n        if (onAssetChooseClick) {\n            items.push({\n                onSelect: () => onItemClick(onAssetChooseClick),\n                title: 'Browse asset',\n                icon: <IconImageStack size=\"20\" />,\n            });\n        }\n        return items;\n    }, [onAssetChooseClick, onUploadClick, onItemClick]);\n    return (\n        <button\n            ref={buttonRef}\n            data-test-id=\"block-inject-button\"\n            className={joinClassNames([\n                'tw-font-primary tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n                verticalLayout\n                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n                    : '[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr',\n                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n                menuPosition && 'tw-bg-blank-state-pressed-inverse',\n                isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n                isLoading || menuPosition || isDraggingOver || errorMsg\n                    ? ''\n                    : 'tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n                (isDraggingOver || !!menuPosition) && !errorMsg\n                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n            ])}\n            onDragEnter={\n                onDrop\n                    ? (event) => {\n                          setIsDraggingOver(true);\n                          // is now only used for images, can be adapted if needed\n                          if (validFileType === 'Images') {\n                              for (const item of Array.from(event.dataTransfer.items)) {\n                                  if (!item?.type?.startsWith('image/')) {\n                                      setErrorMsg('Invalid');\n                                  } else {\n                                      setErrorMsg(undefined);\n                                  }\n                              }\n                          }\n                      }\n                    : undefined\n            }\n            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                if (withMenu && !menuPosition) {\n                    openMenu(event);\n                }\n                onClick?.();\n            }}\n        >\n            {isLoading ? (\n                <LoadingCircle />\n            ) : errorMsg ? (\n                <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n                    <IconExclamationMarkTriangle size=\"16\" />\n                    {errorMsg}\n                </div>\n            ) : (\n                <>\n                    {icon && <div>{icon}</div>}\n                    {(label || secondaryLabel) && (\n                        <div className=\"tw-flex tw-flex-col tw-items-start\">\n                            {label && <div className=\"tw-font-medium\">{label}</div>}\n                            {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n                        </div>\n                    )}\n                </>\n            )}\n            {menuPosition && (\n                <div\n                    className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n                    style={{\n                        left: menuPosition[0],\n                        top: menuPosition[1],\n                    }}\n                >\n                    <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n                        <Flyout.Trigger>\n                            <div />\n                        </Flyout.Trigger>\n                        <Flyout.Content triggerOffset=\"compact\">\n                            <Dropdown.Root open>\n                                <Dropdown.Trigger>\n                                    <div />\n                                </Dropdown.Trigger>\n                                <Dropdown.Content triggerOffset=\"compact\">\n                                    {menuItems.map((item) => (\n                                        <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n                                            {item.icon}\n                                            {item.title}\n                                        </Dropdown.Item>\n                                    ))}\n                                </Dropdown.Content>\n                            </Dropdown.Root>\n                        </Flyout.Content>\n                    </Flyout.Root>\n                </div>\n            )}\n        </button>\n    );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}

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

@@ -1,39 +1,39 @@
-import { jsx as t, Fragment as v, jsxs as h } from "react/jsx-runtime";
-import { memo as x, useState as b, useRef as g } from "react";
+import { jsx as t, Fragment as d, jsxs as v } from "react/jsx-runtime";
+import { memo as y, useState as x, useRef as b } from "react";
 import { DragPreviewContextProvider as N } from "./Toolbar/context/DragPreviewContext.es.js";
 import { MultiFlyoutContextProvider as F } from "./Toolbar/context/MultiFlyoutContext.es.js";
 import { DEFAULT_MENU_BUTTON_ID as I } from "./Toolbar/MenuToolbarButton/MenuToolbarButton.es.js";
 import { Toolbar as T } from "./Toolbar/Toolbar.es.js";
-import { joinClassNames as s } from "../../utilities/react/joinClassNames.es.js";
-const j = x(
+import { joinClassNames as n } from "../../utilities/react/joinClassNames.es.js";
+const j = y(
   ({
-    children: o,
+    children: e,
     toolbarItems: a,
-    shouldHideWrapper: p,
+    shouldHideWrapper: s,
     shouldHideComponent: w = !1,
-    isDragging: n = !1,
-    shouldFillContainer: c,
-    outlineOffset: e = 0,
-    shouldBeShown: r = !1,
-    showAttachments: m = !1
+    isDragging: c = !1,
+    shouldFillContainer: h,
+    outlineOffset: o = 0,
+    shouldBeShown: i = !1,
+    showAttachments: p = !1
   }) => {
-    const [i, u] = b(r ? [I] : []), f = g(null);
-    if (p)
-      return /* @__PURE__ */ t(v, { children: o });
-    const d = a?.filter((y) => y !== void 0), l = i.length > 0 || r;
-    return /* @__PURE__ */ t(N, { isDragPreview: n, children: /* @__PURE__ */ t(F, { openFlyoutIds: i, setOpenFlyoutIds: u, children: /* @__PURE__ */ h(
+    const [r, u] = x(i ? [I] : []), m = b(null);
+    if (s)
+      return /* @__PURE__ */ t(d, { children: e });
+    const f = a?.filter((g) => g !== void 0), l = r.length > 0 || i;
+    return /* @__PURE__ */ t(N, { isDragPreview: c, children: /* @__PURE__ */ t(F, { openFlyoutIds: r, setOpenFlyoutIds: u, children: /* @__PURE__ */ v(
       "div",
       {
-        ref: f,
+        ref: m,
         "data-test-id": "block-item-wrapper",
         style: {
-          outlineOffset: e
+          outlineOffset: o
         },
-        className: s([
-          "tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
-          c && "tw-flex-1 tw-h-full tw-w-full",
-          "hover:tw-outline focus-within:tw-outline",
-          l && "tw-outline",
+        className: n([
+          "tw-relative tw-group",
+          h && "tw-flex-1 tw-h-full tw-w-full",
+          "hover:tw-outline hover:tw-outline-1 hover:tw-outline-container-highlight-on-highlight-container focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-container-highlight-on-highlight-container",
+          l && "tw-outline tw-outline-1 tw-outline-container-highlight-on-highlight-container",
           w && "tw-opacity-0"
         ]),
         children: [
@@ -41,10 +41,10 @@ const j = x(
             "div",
             {
               style: {
-                right: -1 - e,
-                bottom: `calc(100% - ${2 + e}px)`
+                right: -1 - o,
+                bottom: `calc(100% - ${2 + o}px)`
               },
-              className: s([
+              className: n([
                 "tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]",
                 "group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
                 "tw-flex tw-justify-end",
@@ -54,14 +54,14 @@ const j = x(
                 T,
                 {
                   attachments: {
-                    isEnabled: m
+                    isEnabled: p
                   },
-                  items: d
+                  items: f
                 }
               )
             }
           ),
-          o
+          e
         ]
       }
     ) }) });

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

@@ -1 +1 @@
-{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, memo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = memo(\n    ({\n        children,\n        toolbarItems,\n        shouldHideWrapper,\n        shouldHideComponent = false,\n        isDragging = false,\n        shouldFillContainer,\n        outlineOffset = 0,\n        shouldBeShown = false,\n        showAttachments = false,\n    }: BlockItemWrapperProps): ReactElement => {\n        const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n\n        if (shouldHideWrapper) {\n            return <>{children}</>;\n        }\n\n        const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n        const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;\n\n        return (\n            <DragPreviewContextProvider isDragPreview={isDragging}>\n                <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\n                    <div\n                        ref={wrapperRef}\n                        data-test-id=\"block-item-wrapper\"\n                        style={{\n                            outlineOffset,\n                        }}\n                        className={joinClassNames([\n                            'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                            shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                            'hover:tw-outline focus-within:tw-outline',\n                            shouldToolbarBeVisible && 'tw-outline',\n                            shouldHideComponent && 'tw-opacity-0',\n                        ])}\n                    >\n                        <div\n                            style={{\n                                right: -1 - outlineOffset,\n                                bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                            }}\n                            className={joinClassNames([\n                                'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                                'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                                'tw-flex tw-justify-end',\n                                shouldToolbarBeVisible && 'tw-opacity-100',\n                            ])}\n                        >\n                            <Toolbar\n                                attachments={{\n                                    isEnabled: showAttachments,\n                                }}\n                                items={items}\n                            />\n                        </div>\n                        {children}\n                    </div>\n                </MultiFlyoutContextProvider>\n            </DragPreviewContextProvider>\n        );\n    },\n);\n\nBlockItemWrapper.displayName = 'BlockItemWrapper';\n"],"names":["BlockItemWrapper","memo","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmBC;AAAA,EAC5B,CAAC;AAAA,IACG,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC,IAAa;AAAA,IACb,qBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC,IAAkB;AAAA,EAAA,MACqB;AACvC,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,EAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,QAAIZ;AACA,oCAAU,UAAAF,GAAS;AAGvB,UAAMe,IAAQd,GAAc,OAAO,CAACe,MAA8BA,MAAS,MAAS,GAE9EC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,6BACKW,GAAA,EAA2B,eAAed,GACvC,UAAA,gBAAAe,EAACC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKR;AAAA,QACL,gBAAa;AAAA,QACb,OAAO;AAAA,UACH,eAAAP;AAAA,QAAA;AAAA,QAEJ,WAAWgB,EAAe;AAAA,UACtB;AAAA,UACAjB,KAAuB;AAAA,UACvB;AAAA,UACAY,KAA0B;AAAA,UAC1Bd,KAAuB;AAAA,QAAA,CAC1B;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,OAAO;AAAA,gBACH,OAAO,KAAKb;AAAA,gBACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,cAAA;AAAA,cAE5C,WAAWgB,EAAe;AAAA,gBACtB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACAL,KAA0B;AAAA,cAAA,CAC7B;AAAA,cAED,UAAA,gBAAAE;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACG,aAAa;AAAA,oBACT,WAAWf;AAAA,kBAAA;AAAA,kBAEf,OAAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,UAEHf;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET,EAAA,CACJ;AAAA,EAER;AACJ;AAEAF,EAAiB,cAAc;"}
+{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, memo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = memo(\n    ({\n        children,\n        toolbarItems,\n        shouldHideWrapper,\n        shouldHideComponent = false,\n        isDragging = false,\n        shouldFillContainer,\n        outlineOffset = 0,\n        shouldBeShown = false,\n        showAttachments = false,\n    }: BlockItemWrapperProps): ReactElement => {\n        const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n\n        if (shouldHideWrapper) {\n            return <>{children}</>;\n        }\n\n        const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n        const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;\n\n        return (\n            <DragPreviewContextProvider isDragPreview={isDragging}>\n                <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\n                    <div\n                        ref={wrapperRef}\n                        data-test-id=\"block-item-wrapper\"\n                        style={{\n                            outlineOffset,\n                        }}\n                        className={joinClassNames([\n                            'tw-relative tw-group',\n                            shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                            'hover:tw-outline hover:tw-outline-1 hover:tw-outline-container-highlight-on-highlight-container focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-container-highlight-on-highlight-container',\n                            shouldToolbarBeVisible &&\n                                'tw-outline tw-outline-1 tw-outline-container-highlight-on-highlight-container',\n                            shouldHideComponent && 'tw-opacity-0',\n                        ])}\n                    >\n                        <div\n                            style={{\n                                right: -1 - outlineOffset,\n                                bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                            }}\n                            className={joinClassNames([\n                                'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                                'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                                'tw-flex tw-justify-end',\n                                shouldToolbarBeVisible && 'tw-opacity-100',\n                            ])}\n                        >\n                            <Toolbar\n                                attachments={{\n                                    isEnabled: showAttachments,\n                                }}\n                                items={items}\n                            />\n                        </div>\n                        {children}\n                    </div>\n                </MultiFlyoutContextProvider>\n            </DragPreviewContextProvider>\n        );\n    },\n);\n\nBlockItemWrapper.displayName = 'BlockItemWrapper';\n"],"names":["BlockItemWrapper","memo","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmBC;AAAA,EAC5B,CAAC;AAAA,IACG,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC,IAAa;AAAA,IACb,qBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC,IAAkB;AAAA,EAAA,MACqB;AACvC,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,EAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,QAAIZ;AACA,oCAAU,UAAAF,GAAS;AAGvB,UAAMe,IAAQd,GAAc,OAAO,CAACe,MAA8BA,MAAS,MAAS,GAE9EC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,6BACKW,GAAA,EAA2B,eAAed,GACvC,UAAA,gBAAAe,EAACC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKR;AAAA,QACL,gBAAa;AAAA,QACb,OAAO;AAAA,UACH,eAAAP;AAAA,QAAA;AAAA,QAEJ,WAAWgB,EAAe;AAAA,UACtB;AAAA,UACAjB,KAAuB;AAAA,UACvB;AAAA,UACAY,KACI;AAAA,UACJd,KAAuB;AAAA,QAAA,CAC1B;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,OAAO;AAAA,gBACH,OAAO,KAAKb;AAAA,gBACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,cAAA;AAAA,cAE5C,WAAWgB,EAAe;AAAA,gBACtB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACAL,KAA0B;AAAA,cAAA,CAC7B;AAAA,cAED,UAAA,gBAAAE;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACG,aAAa;AAAA,oBACT,WAAWf;AAAA,kBAAA;AAAA,kBAEf,OAAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,UAEHf;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET,EAAA,CACJ;AAAA,EAER;AACJ;AAEAF,EAAiB,cAAc;"}

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

@@ -1,23 +1,23 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { ToolbarSegment as e } from "./ToolbarSegment.es.js";
-import { AttachmentsToolbarButton as a } from "./AttachmentsToolbarButton/AttachmentsToolbarButton.es.js";
+import { AttachmentsToolbarButton as n } from "./AttachmentsToolbarButton/AttachmentsToolbarButton.es.js";
 import { ToolbarButton as d } from "./ToolbarButton/ToolbarButton.es.js";
 import { FlyoutToolbarButton as p } from "./FlyoutToolbarButton/FlyoutToolbarButton.es.js";
-import { MenuToolbarButton as s } from "./MenuToolbarButton/MenuToolbarButton.es.js";
-import { DragHandleToolbarButton as u } from "./DragHandleToolbarButton/DragHandleToolbarButton.es.js";
-const h = ({ items: r, attachments: l }) => /* @__PURE__ */ n(
+import { MenuToolbarButton as i } from "./MenuToolbarButton/MenuToolbarButton.es.js";
+import { DragHandleToolbarButton as s } from "./DragHandleToolbarButton/DragHandleToolbarButton.es.js";
+const y = ({ items: r, attachments: l }) => /* @__PURE__ */ a(
   "div",
   {
     "data-test-id": "block-item-wrapper-toolbar",
-    className: "tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate",
+    className: "tw-rounded-md tw-bg-surface tw-border tw-border-line-mid tw-divide-x tw-divide-line-mid tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate",
     children: [
-      l.isEnabled && /* @__PURE__ */ t(e, { children: /* @__PURE__ */ t(a, {}) }),
+      l.isEnabled && /* @__PURE__ */ t(e, { children: /* @__PURE__ */ t(n, {}) }),
       r.length > 0 && /* @__PURE__ */ t(e, { children: r.map((o) => {
         switch (o.type) {
           case "dragHandle":
-            return /* @__PURE__ */ t(u, { ...o }, o.tooltip + o.type);
-          case "menu":
             return /* @__PURE__ */ t(s, { ...o }, o.tooltip + o.type);
+          case "menu":
+            return /* @__PURE__ */ t(i, { ...o }, o.tooltip + o.type);
           case "flyout":
             return /* @__PURE__ */ t(p, { ...o }, o.tooltip + o.type);
           default:
@@ -28,6 +28,6 @@ const h = ({ items: r, attachments: l }) => /* @__PURE__ */ n(
   }
 );
 export {
-  h as Toolbar
+  y as Toolbar
 };
 //# sourceMappingURL=Toolbar.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AttachmentsToolbarButton } from './AttachmentsToolbarButton';\nimport { DragHandleToolbarButton } from './DragHandleToolbarButton';\nimport { FlyoutToolbarButton } from './FlyoutToolbarButton';\nimport { MenuToolbarButton } from './MenuToolbarButton';\nimport { ToolbarButton } from './ToolbarButton';\nimport { ToolbarSegment } from './ToolbarSegment';\nimport { type ToolbarProps } from './types';\n\nexport const Toolbar = ({ items, attachments }: ToolbarProps) => (\n    <div\n        data-test-id=\"block-item-wrapper-toolbar\"\n        className=\"tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate\"\n    >\n        {attachments.isEnabled && (\n            <ToolbarSegment>\n                <AttachmentsToolbarButton />\n            </ToolbarSegment>\n        )}\n        {items.length > 0 && (\n            <ToolbarSegment>\n                {items.map((item) => {\n                    switch (item.type) {\n                        case 'dragHandle':\n                            return <DragHandleToolbarButton key={item.tooltip + item.type} {...item} />;\n                        case 'menu':\n                            return <MenuToolbarButton key={item.tooltip + item.type} {...item} />;\n                        case 'flyout':\n                            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string\n                            return <FlyoutToolbarButton key={item.tooltip + item.type} {...item} />;\n                        default:\n                            return <ToolbarButton key={item.tooltip + item.type} {...item} />;\n                    }\n                })}\n            </ToolbarSegment>\n        )}\n    </div>\n);\n"],"names":["Toolbar","items","attachments","jsxs","jsx","ToolbarSegment","AttachmentsToolbarButton","item","DragHandleToolbarButton","MenuToolbarButton","FlyoutToolbarButton","ToolbarButton"],"mappings":";;;;;;;AAUO,MAAMA,IAAU,CAAC,EAAE,OAAAC,GAAO,aAAAC,QAC7B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAA;AAAA,MAAAD,EAAY,aACT,gBAAAE,EAACC,GAAA,EACG,UAAA,gBAAAD,EAACE,KAAyB,GAC9B;AAAA,MAEHL,EAAM,SAAS,KACZ,gBAAAG,EAACC,KACI,UAAAJ,EAAM,IAAI,CAACM,MAAS;AACjB,gBAAQA,EAAK,MAAA;AAAA,UACT,KAAK;AACD,qCAAQC,GAAA,EAAwD,GAAGD,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,UAC7E,KAAK;AACD,qCAAQE,GAAA,EAAkD,GAAGF,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,UACvE,KAAK;AAED,qCAAQG,GAAA,EAAoD,GAAGH,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,UACzE;AACI,qCAAQI,GAAA,EAA8C,GAAGJ,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,QAAA;AAAA,MAE3E,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAER;"}
+{"version":3,"file":"Toolbar.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AttachmentsToolbarButton } from './AttachmentsToolbarButton';\nimport { DragHandleToolbarButton } from './DragHandleToolbarButton';\nimport { FlyoutToolbarButton } from './FlyoutToolbarButton';\nimport { MenuToolbarButton } from './MenuToolbarButton';\nimport { ToolbarButton } from './ToolbarButton';\nimport { ToolbarSegment } from './ToolbarSegment';\nimport { type ToolbarProps } from './types';\n\nexport const Toolbar = ({ items, attachments }: ToolbarProps) => (\n    <div\n        data-test-id=\"block-item-wrapper-toolbar\"\n        className=\"tw-rounded-md tw-bg-surface tw-border tw-border-line-mid tw-divide-x tw-divide-line-mid tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate\"\n    >\n        {attachments.isEnabled && (\n            <ToolbarSegment>\n                <AttachmentsToolbarButton />\n            </ToolbarSegment>\n        )}\n        {items.length > 0 && (\n            <ToolbarSegment>\n                {items.map((item) => {\n                    switch (item.type) {\n                        case 'dragHandle':\n                            return <DragHandleToolbarButton key={item.tooltip + item.type} {...item} />;\n                        case 'menu':\n                            return <MenuToolbarButton key={item.tooltip + item.type} {...item} />;\n                        case 'flyout':\n                            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string\n                            return <FlyoutToolbarButton key={item.tooltip + item.type} {...item} />;\n                        default:\n                            return <ToolbarButton key={item.tooltip + item.type} {...item} />;\n                    }\n                })}\n            </ToolbarSegment>\n        )}\n    </div>\n);\n"],"names":["Toolbar","items","attachments","jsxs","jsx","ToolbarSegment","AttachmentsToolbarButton","item","DragHandleToolbarButton","MenuToolbarButton","FlyoutToolbarButton","ToolbarButton"],"mappings":";;;;;;;AAUO,MAAMA,IAAU,CAAC,EAAE,OAAAC,GAAO,aAAAC,QAC7B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAA;AAAA,MAAAD,EAAY,aACT,gBAAAE,EAACC,GAAA,EACG,UAAA,gBAAAD,EAACE,KAAyB,GAC9B;AAAA,MAEHL,EAAM,SAAS,KACZ,gBAAAG,EAACC,KACI,UAAAJ,EAAM,IAAI,CAACM,MAAS;AACjB,gBAAQA,EAAK,MAAA;AAAA,UACT,KAAK;AACD,qCAAQC,GAAA,EAAwD,GAAGD,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,UAC7E,KAAK;AACD,qCAAQE,GAAA,EAAkD,GAAGF,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,UACvE,KAAK;AAED,qCAAQG,GAAA,EAAoD,GAAGH,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,UACzE;AACI,qCAAQI,GAAA,EAA8C,GAAGJ,KAA9BA,EAAK,UAAUA,EAAK,IAAgB;AAAA,QAAA;AAAA,MAE3E,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAER;"}

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

@@ -1,26 +1,26 @@
-import { FOCUS_VISIBLE_STYLE as s } from "@frontify/fondue";
+import { FOCUS_VISIBLE_STYLE as n } from "@frontify/fondue";
 import { joinClassNames as o } from "../../../utilities/react/joinClassNames.es.js";
-const w = (e, r) => {
+const s = (e, r) => {
   const t = [
-    s,
+    n,
     "tw-relative tw-inline-flex tw-items-center tw-justify-center",
     "tw-h-6 tw-p-1",
-    "tw-rounded",
-    "tw-text-xs tw-font-medium",
+    "tw-rounded-medium",
+    "tw-text-x-small tw-font-medium",
     "tw-gap-0.5",
     "focus-visible:tw-z-10"
   ];
   return r ? t.push(
-    "tw-bg-box-neutral-pressed",
-    "tw-text-box-neutral-inverse-pressed",
+    "tw-bg-container-secondary-active",
+    "tw-text-container-secondary-on-secondary-container",
     e === "grab" ? "tw-cursor-grabbing" : "tw-cursor-pointer"
   ) : t.push(
-    "hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed",
-    "tw-text-text-weak hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed",
+    "hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active",
+    "tw-text-secondary hover:tw-text-container-secondary-on-secondary-container active:tw-text-container-secondary-on-secondary-container",
     e === "grab" ? "!tw-cursor-grab active:tw-cursor-grabbing" : "tw-cursor-pointer"
   ), o(t);
 };
 export {
-  w as getToolbarButtonClassNames
+  s as getToolbarButtonClassNames
 };
 //# sourceMappingURL=helpers.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_VISIBLE_STYLE } from '@frontify/fondue';\n\nimport { joinClassNames } from '../../../utilities';\n\nexport const getToolbarButtonClassNames = (cursor: 'grab' | 'pointer', forceActiveStyle?: boolean) => {\n    const classNames = [\n        FOCUS_VISIBLE_STYLE,\n        'tw-relative tw-inline-flex tw-items-center tw-justify-center',\n        'tw-h-6 tw-p-1',\n        'tw-rounded',\n        'tw-text-xs tw-font-medium',\n        'tw-gap-0.5',\n        'focus-visible:tw-z-10',\n    ];\n\n    if (forceActiveStyle) {\n        classNames.push(\n            'tw-bg-box-neutral-pressed',\n            'tw-text-box-neutral-inverse-pressed',\n            cursor === 'grab' ? 'tw-cursor-grabbing' : 'tw-cursor-pointer',\n        );\n    } else {\n        classNames.push(\n            'hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed',\n            'tw-text-text-weak hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',\n            cursor === 'grab' ? '!tw-cursor-grab active:tw-cursor-grabbing' : 'tw-cursor-pointer',\n        );\n    }\n\n    return joinClassNames(classNames);\n};\n"],"names":["getToolbarButtonClassNames","cursor","forceActiveStyle","classNames","FOCUS_VISIBLE_STYLE","joinClassNames"],"mappings":";;AAMO,MAAMA,IAA6B,CAACC,GAA4BC,MAA+B;AAClG,QAAMC,IAAa;AAAA,IACfC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGJ,SAAIF,IACAC,EAAW;AAAA,IACP;AAAA,IACA;AAAA,IACAF,MAAW,SAAS,uBAAuB;AAAA,EAAA,IAG/CE,EAAW;AAAA,IACP;AAAA,IACA;AAAA,IACAF,MAAW,SAAS,8CAA8C;AAAA,EAAA,GAInEI,EAAeF,CAAU;AACpC;"}
+{"version":3,"file":"helpers.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_VISIBLE_STYLE } from '@frontify/fondue';\n\nimport { joinClassNames } from '../../../utilities';\n\nexport const getToolbarButtonClassNames = (cursor: 'grab' | 'pointer', forceActiveStyle?: boolean) => {\n    const classNames = [\n        FOCUS_VISIBLE_STYLE,\n        'tw-relative tw-inline-flex tw-items-center tw-justify-center',\n        'tw-h-6 tw-p-1',\n        'tw-rounded-medium',\n        'tw-text-x-small tw-font-medium',\n        'tw-gap-0.5',\n        'focus-visible:tw-z-10',\n    ];\n\n    if (forceActiveStyle) {\n        classNames.push(\n            'tw-bg-container-secondary-active',\n            'tw-text-container-secondary-on-secondary-container',\n            cursor === 'grab' ? 'tw-cursor-grabbing' : 'tw-cursor-pointer',\n        );\n    } else {\n        classNames.push(\n            'hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active',\n            'tw-text-secondary hover:tw-text-container-secondary-on-secondary-container active:tw-text-container-secondary-on-secondary-container',\n            cursor === 'grab' ? '!tw-cursor-grab active:tw-cursor-grabbing' : 'tw-cursor-pointer',\n        );\n    }\n\n    return joinClassNames(classNames);\n};\n"],"names":["getToolbarButtonClassNames","cursor","forceActiveStyle","classNames","FOCUS_VISIBLE_STYLE","joinClassNames"],"mappings":";;AAMO,MAAMA,IAA6B,CAACC,GAA4BC,MAA+B;AAClG,QAAMC,IAAa;AAAA,IACfC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGJ,SAAIF,IACAC,EAAW;AAAA,IACP;AAAA,IACA;AAAA,IACAF,MAAW,SAAS,uBAAuB;AAAA,EAAA,IAG/CE,EAAW;AAAA,IACP;AAAA,IACA;AAAA,IACAF,MAAW,SAAS,8CAA8C;AAAA,EAAA,GAInEI,EAAeF,CAAU;AACpC;"}

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

@@ -1,32 +1,32 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { Tooltip as o } from "@frontify/fondue/components";
 import { IconArrowCircleDown as w } from "@frontify/fondue/icons";
-import { useFocusRing as a } from "@react-aria/focus";
-import { joinClassNames as u } from "../../utilities/react/joinClassNames.es.js";
-const p = ({ onDownload: e, ariaLabel: n }) => {
-  const { isFocused: r, focusProps: i } = a();
-  return /* @__PURE__ */ l(o.Root, { enterDelay: 500, children: [
+import { useFocusRing as s } from "@react-aria/focus";
+import { joinClassNames as m } from "../../utilities/react/joinClassNames.es.js";
+const g = ({ onDownload: r, ariaLabel: e }) => {
+  const { isFocused: n, focusProps: i } = s();
+  return /* @__PURE__ */ a(o.Root, { enterDelay: 500, children: [
     /* @__PURE__ */ t(o.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         tabIndex: 0,
-        "aria-label": n ?? "Download",
+        "aria-label": e ?? "Download",
         ...i,
-        className: u([
-          "tw-outline-none tw-rounded",
-          r && "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none"
+        className: m([
+          "tw-outline-none tw-rounded-medium",
+          n && "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none"
         ]),
-        onClick: e,
-        onPointerDown: (s) => s.preventDefault(),
+        onClick: r,
+        onPointerDown: (l) => l.preventDefault(),
         "data-test-id": "download-button",
-        children: /* @__PURE__ */ t("span", { 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(w, { size: "16" }) })
+        children: /* @__PURE__ */ t("span", { className: "tw-flex tw-text-x-small tw-font-primary tw-items-center tw-gap-1 tw-rounded-full tw-bg-primary-on-primary hover:tw-bg-primary-on-primary active:tw-bg-primary-on-primary tw-text-primary tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line-mid", children: /* @__PURE__ */ t(w, { size: "16" }) })
       }
     ) }),
     /* @__PURE__ */ t(o.Content, { side: "top", children: "Download" })
   ] });
 };
 export {
-  p as DownloadButton
+  g as DownloadButton
 };
 //# sourceMappingURL=DownloadButton.es.js.map

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 { Tooltip } from '@frontify/fondue/components';\nimport { IconArrowCircleDown } from '@frontify/fondue/icons';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip.Root enterDelay={500}>\n            <Tooltip.Trigger asChild>\n                <button\n                    type=\"button\"\n                    tabIndex={0}\n                    aria-label={ariaLabel ?? 'Download'}\n                    {...focusProps}\n                    className={joinClassNames([\n                        'tw-outline-none tw-rounded',\n                        isFocused &&\n                            'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none',\n                    ])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                    data-test-id=\"download-button\"\n                >\n                    <span 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                        <IconArrowCircleDown size=\"16\" />\n                    </span>\n                </button>\n            </Tooltip.Trigger>\n            <Tooltip.Content side=\"top\">Download</Tooltip.Content>\n        </Tooltip.Root>\n    );\n};\n"],"names":["DownloadButton","onDownload","ariaLabel","isFocused","focusProps","useFocusRing","jsxs","Tooltip","jsx","joinClassNames","e","IconArrowCircleDown"],"mappings":";;;;;AAUO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,GAAY,WAAAC,QAAqC;AAC9E,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAA,IAAeC,EAAA;AAElC,SACI,gBAAAC,EAACC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAYN,KAAa;AAAA,QACxB,GAAGE;AAAA,QACJ,WAAWK,EAAe;AAAA,UACtB;AAAA,UACAN,KACI;AAAA,QAAA,CACP;AAAA,QACD,SAASF;AAAA,QACT,eAAe,CAACS,MAAMA,EAAE,eAAA;AAAA,QACxB,gBAAa;AAAA,QAEb,UAAA,gBAAAF,EAAC,UAAK,WAAU,0SACZ,4BAACG,GAAA,EAAoB,MAAK,MAAK,EAAA,CACnC;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,sBACCJ,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAA,WAAA,CAAQ;AAAA,EAAA,GACxC;AAER;"}
+{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Tooltip } from '@frontify/fondue/components';\nimport { IconArrowCircleDown } from '@frontify/fondue/icons';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip.Root enterDelay={500}>\n            <Tooltip.Trigger asChild>\n                <button\n                    type=\"button\"\n                    tabIndex={0}\n                    aria-label={ariaLabel ?? 'Download'}\n                    {...focusProps}\n                    className={joinClassNames([\n                        'tw-outline-none tw-rounded-medium',\n                        isFocused &&\n                            'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none',\n                    ])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                    data-test-id=\"download-button\"\n                >\n                    <span className=\"tw-flex tw-text-x-small tw-font-primary tw-items-center tw-gap-1 tw-rounded-full tw-bg-primary-on-primary hover:tw-bg-primary-on-primary active:tw-bg-primary-on-primary tw-text-primary tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line-mid\">\n                        <IconArrowCircleDown size=\"16\" />\n                    </span>\n                </button>\n            </Tooltip.Trigger>\n            <Tooltip.Content side=\"top\">Download</Tooltip.Content>\n        </Tooltip.Root>\n    );\n};\n"],"names":["DownloadButton","onDownload","ariaLabel","isFocused","focusProps","useFocusRing","jsxs","Tooltip","jsx","joinClassNames","e","IconArrowCircleDown"],"mappings":";;;;;AAUO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,GAAY,WAAAC,QAAqC;AAC9E,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAA,IAAeC,EAAA;AAElC,SACI,gBAAAC,EAACC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAYN,KAAa;AAAA,QACxB,GAAGE;AAAA,QACJ,WAAWK,EAAe;AAAA,UACtB;AAAA,UACAN,KACI;AAAA,QAAA,CACP;AAAA,QACD,SAASF;AAAA,QACT,eAAe,CAACS,MAAMA,EAAE,eAAA;AAAA,QACxB,gBAAa;AAAA,QAEb,UAAA,gBAAAF,EAAC,UAAK,WAAU,qQACZ,4BAACG,GAAA,EAAoB,MAAK,MAAK,EAAA,CACnC;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,sBACCJ,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAA,WAAA,CAAQ;AAAA,EAAA,GACxC;AAER;"}

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

@@ -1,23 +1,23 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import { FormControl as g } from "@frontify/fondue";
-import { TextInput as x, Checkbox as v, Label as D } from "@frontify/fondue/components";
+import { TextInput as x, Checkbox as D, Label as v } from "@frontify/fondue/components";
 import { isValidUrlOrEmpty as b } from "./utils/url.es.js";
 import { LinkSelector as I } from "./LinkSelector/LinkSelector.es.js";
 const N = ({
   onUrlChange: i,
   onToggleTab: r,
   isValidUrlOrEmpty: l,
-  appBridge: o,
+  appBridge: n,
   placeholder: s,
-  newTab: a,
-  url: n = "",
+  newTab: m,
+  url: o = "",
   required: d,
-  info: m,
+  info: a,
   label: u,
   buttonSize: p,
   hideInternalLinkButton: h
 }) => {
-  const w = l ? l(n) : b(n);
+  const w = l ? l(o) : b(o);
   return /* @__PURE__ */ c("div", { "data-test-id": "link-input", children: [
     /* @__PURE__ */ t(
       g,
@@ -26,35 +26,35 @@ const N = ({
           children: u,
           htmlFor: "url",
           required: d,
-          tooltip: m ? { content: m, position: "top" } : void 0
+          tooltip: a ? { content: a, position: "top" } : void 0
         },
         children: /* @__PURE__ */ t(
           x,
           {
             "data-test-id": "text-input",
             id: "url",
-            value: n,
+            value: o,
             onChange: (e) => i?.(e.target.value),
             placeholder: s ?? "https://example.com"
           }
         )
       }
     ),
-    !w && /* @__PURE__ */ t("div", { className: "tw-text-text-negative tw-mt-1 tw-text-s", children: "Please enter a valid URL." }),
+    !w && /* @__PURE__ */ t("div", { className: "tw-text-error tw-mt-1 tw-text-small", children: "Please enter a valid URL." }),
     !h && /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(
       I,
       {
-        url: n,
+        url: o,
         onUrlChange: i,
         buttonSize: p ?? "medium",
-        getAllDocuments: () => o.getAllDocuments(),
-        getDocumentPagesByDocumentId: (e) => o.getDocumentPagesByDocumentId(e),
-        getDocumentSectionsByDocumentPageId: (e) => o.getDocumentSectionsByDocumentPageId(e)
+        getAllDocuments: () => n.getAllDocuments(),
+        getDocumentPagesByDocumentId: (e) => n.getDocumentPagesByDocumentId(e),
+        getDocumentSectionsByDocumentPageId: (e) => n.getDocumentSectionsByDocumentPageId(e)
       }
     ) }),
     /* @__PURE__ */ c("div", { className: "tw-mt-3 tw-flex tw-items-center tw-gap-1.5", children: [
-      /* @__PURE__ */ t(v, { id: "new-tab", value: a, onChange: () => r?.(!a) }),
-      /* @__PURE__ */ t(D, { id: "new-tab-label", htmlFor: "new-tab", className: "tw-whitespace-nowrap", children: "Open in new tab" })
+      /* @__PURE__ */ t(D, { id: "new-tab", value: m, onChange: () => r?.(!m) }),
+      /* @__PURE__ */ t(v, { id: "new-tab-label", htmlFor: "new-tab", className: "tw-whitespace-nowrap", children: "Open in new tab" })
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type AppBridgeBlock } from '@frontify/app-bridge';\nimport { FormControl } from '@frontify/fondue';\nimport { TextInput, Checkbox, Label } from '@frontify/fondue/components';\n\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?: boolean;\n    onUrlChange?: (value: string) => void;\n    onToggleTab?: (checked: boolean) => void;\n    isValidUrlOrEmpty?: (url: string) => boolean;\n    appBridge: AppBridgeBlock;\n    placeholder?: string;\n    buttonSize?: 'small' | 'medium' | 'large';\n    hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n    onUrlChange,\n    onToggleTab,\n    isValidUrlOrEmpty,\n    appBridge,\n    placeholder,\n    newTab,\n    url = '',\n    required,\n    info,\n    label,\n    buttonSize,\n    hideInternalLinkButton,\n}: LinkInputProps) => {\n    const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\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: 'top' } : undefined,\n                }}\n            >\n                <TextInput\n                    data-test-id=\"text-input\"\n                    id=\"url\"\n                    value={url}\n                    onChange={(event) => onUrlChange?.(event.target.value)}\n                    placeholder={placeholder ?? 'https://example.com'}\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                        onUrlChange={onUrlChange}\n                        buttonSize={buttonSize ?? 'medium'}\n                        getAllDocuments={() => appBridge.getAllDocuments()}\n                        getDocumentPagesByDocumentId={(documentId) =>\n                            appBridge.getDocumentPagesByDocumentId(documentId)\n                        }\n                        getDocumentSectionsByDocumentPageId={(documentPageId) =>\n                            appBridge.getDocumentSectionsByDocumentPageId(documentPageId)\n                        }\n                    />\n                </div>\n            )}\n\n            <div className=\"tw-mt-3 tw-flex tw-items-center tw-gap-1.5\">\n                <Checkbox id=\"new-tab\" value={newTab} onChange={() => onToggleTab?.(!newTab)} />\n                <Label id=\"new-tab-label\" htmlFor=\"new-tab\" className=\"tw-whitespace-nowrap\">\n                    Open in new tab\n                </Label>\n            </div>\n        </div>\n    );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","placeholder","newTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","jsxs","jsx","FormControl","TextInput","event","LinkSelector","documentId","documentPageId","Checkbox","Label"],"mappings":";;;;;AAwBO,MAAMA,IAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaV,IAAoBA,EAAkBI,CAAG,IAAIO,EAA0BP,CAAG;AAC7F,SACI,gBAAAQ,EAAC,OAAA,EAAI,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUP;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAU,UAAU;AAAA,QAAA;AAAA,QAGzD,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,IAAG;AAAA,YACH,OAAOX;AAAA,YACP,UAAU,CAACY,MAAUlB,IAAckB,EAAM,OAAO,KAAK;AAAA,YACrD,aAAad,KAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAEH,CAACQ,KAAc,gBAAAG,EAAC,OAAA,EAAI,WAAU,2CAA0C,UAAA,6BAAyB;AAAA,IAEjG,CAACJ,KACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAb;AAAA,QACA,aAAAN;AAAA,QACA,YAAYU,KAAc;AAAA,QAC1B,iBAAiB,MAAMP,EAAU,gBAAA;AAAA,QACjC,8BAA8B,CAACiB,MAC3BjB,EAAU,6BAA6BiB,CAAU;AAAA,QAErD,qCAAqC,CAACC,MAClClB,EAAU,oCAAoCkB,CAAc;AAAA,MAAA;AAAA,IAAA,GAGxE;AAAA,IAGJ,gBAAAP,EAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,MAAA,gBAAAC,EAACO,GAAA,EAAS,IAAG,WAAU,OAAOjB,GAAQ,UAAU,MAAMJ,IAAc,CAACI,CAAM,EAAA,CAAG;AAAA,MAC9E,gBAAAU,EAACQ,KAAM,IAAG,iBAAgB,SAAQ,WAAU,WAAU,wBAAuB,UAAA,kBAAA,CAE7E;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type AppBridgeBlock } from '@frontify/app-bridge';\nimport { FormControl } from '@frontify/fondue';\nimport { TextInput, Checkbox, Label } from '@frontify/fondue/components';\n\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?: boolean;\n    onUrlChange?: (value: string) => void;\n    onToggleTab?: (checked: boolean) => void;\n    isValidUrlOrEmpty?: (url: string) => boolean;\n    appBridge: AppBridgeBlock;\n    placeholder?: string;\n    buttonSize?: 'small' | 'medium' | 'large';\n    hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n    onUrlChange,\n    onToggleTab,\n    isValidUrlOrEmpty,\n    appBridge,\n    placeholder,\n    newTab,\n    url = '',\n    required,\n    info,\n    label,\n    buttonSize,\n    hideInternalLinkButton,\n}: LinkInputProps) => {\n    const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\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: 'top' } : undefined,\n                }}\n            >\n                <TextInput\n                    data-test-id=\"text-input\"\n                    id=\"url\"\n                    value={url}\n                    onChange={(event) => onUrlChange?.(event.target.value)}\n                    placeholder={placeholder ?? 'https://example.com'}\n                />\n            </FormControl>\n            {!isUrlValid && <div className=\"tw-text-error tw-mt-1 tw-text-small\">Please enter a valid URL.</div>}\n\n            {!hideInternalLinkButton && (\n                <div className=\"tw-mt-3\">\n                    <LinkSelector\n                        url={url}\n                        onUrlChange={onUrlChange}\n                        buttonSize={buttonSize ?? 'medium'}\n                        getAllDocuments={() => appBridge.getAllDocuments()}\n                        getDocumentPagesByDocumentId={(documentId) =>\n                            appBridge.getDocumentPagesByDocumentId(documentId)\n                        }\n                        getDocumentSectionsByDocumentPageId={(documentPageId) =>\n                            appBridge.getDocumentSectionsByDocumentPageId(documentPageId)\n                        }\n                    />\n                </div>\n            )}\n\n            <div className=\"tw-mt-3 tw-flex tw-items-center tw-gap-1.5\">\n                <Checkbox id=\"new-tab\" value={newTab} onChange={() => onToggleTab?.(!newTab)} />\n                <Label id=\"new-tab-label\" htmlFor=\"new-tab\" className=\"tw-whitespace-nowrap\">\n                    Open in new tab\n                </Label>\n            </div>\n        </div>\n    );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","placeholder","newTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","jsxs","jsx","FormControl","TextInput","event","LinkSelector","documentId","documentPageId","Checkbox","Label"],"mappings":";;;;;AAwBO,MAAMA,IAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaV,IAAoBA,EAAkBI,CAAG,IAAIO,EAA0BP,CAAG;AAC7F,SACI,gBAAAQ,EAAC,OAAA,EAAI,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUP;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAU,UAAU;AAAA,QAAA;AAAA,QAGzD,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,IAAG;AAAA,YACH,OAAOX;AAAA,YACP,UAAU,CAACY,MAAUlB,IAAckB,EAAM,OAAO,KAAK;AAAA,YACrD,aAAad,KAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAEH,CAACQ,KAAc,gBAAAG,EAAC,OAAA,EAAI,WAAU,uCAAsC,UAAA,6BAAyB;AAAA,IAE7F,CAACJ,KACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAb;AAAA,QACA,aAAAN;AAAA,QACA,YAAYU,KAAc;AAAA,QAC1B,iBAAiB,MAAMP,EAAU,gBAAA;AAAA,QACjC,8BAA8B,CAACiB,MAC3BjB,EAAU,6BAA6BiB,CAAU;AAAA,QAErD,qCAAqC,CAACC,MAClClB,EAAU,oCAAoCkB,CAAc;AAAA,MAAA;AAAA,IAAA,GAGxE;AAAA,IAGJ,gBAAAP,EAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,MAAA,gBAAAC,EAACO,GAAA,EAAS,IAAG,WAAU,OAAOjB,GAAQ,UAAU,MAAMJ,IAAc,CAACI,CAAM,EAAA,CAAG;AAAA,MAC9E,gBAAAU,EAACQ,KAAM,IAAG,iBAAgB,SAAQ,WAAU,WAAU,wBAAuB,UAAA,kBAAA,CAE7E;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}