@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/PublishLibrary.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import OpenColor from "open-color";
+import { Dialog } from "./Dialog";
+import { t } from "../i18n";
+import Trans from "./Trans";
+import { exportToCanvas, exportToSvg } from "../../utils/export";
+import { EDITOR_LS_KEYS, EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES, VERSIONS, } from "../constants";
+import { canvasToBlob, resizeImageFile } from "../data/blob";
+import { chunk } from "../utils";
+import DialogActionButton from "./DialogActionButton";
+import { CloseIcon } from "./icons";
+import { ToolButton } from "./ToolButton";
+import { EditorLocalStorage } from "../data/EditorLocalStorage";
+import "./PublishLibrary.scss";
+const generatePreviewImage = async (libraryItems) => {
+    const MAX_ITEMS_PER_ROW = 6;
+    const BOX_SIZE = 128;
+    const BOX_PADDING = Math.round(BOX_SIZE / 16);
+    const BORDER_WIDTH = Math.max(Math.round(BOX_SIZE / 64), 2);
+    const rows = chunk(libraryItems, MAX_ITEMS_PER_ROW);
+    const canvas = document.createElement("canvas");
+    canvas.width =
+        rows[0].length * BOX_SIZE +
+            (rows[0].length + 1) * (BOX_PADDING * 2) -
+            BOX_PADDING * 2;
+    canvas.height =
+        rows.length * BOX_SIZE +
+            (rows.length + 1) * (BOX_PADDING * 2) -
+            BOX_PADDING * 2;
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = OpenColor.white;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    // draw items
+    // ---------------------------------------------------------------------------
+    for (const [index, item] of libraryItems.entries()) {
+        const itemCanvas = await exportToCanvas({
+            elements: item.elements,
+            files: null,
+            maxWidthOrHeight: BOX_SIZE,
+        });
+        const { width, height } = itemCanvas;
+        // draw item
+        // -------------------------------------------------------------------------
+        const rowOffset = Math.floor(index / MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
+        const colOffset = (index % MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
+        ctx.drawImage(itemCanvas, colOffset + (BOX_SIZE - width) / 2 + BOX_PADDING, rowOffset + (BOX_SIZE - height) / 2 + BOX_PADDING);
+        // draw item border
+        // -------------------------------------------------------------------------
+        ctx.lineWidth = BORDER_WIDTH;
+        ctx.strokeStyle = OpenColor.gray[4];
+        ctx.strokeRect(colOffset + BOX_PADDING / 2, rowOffset + BOX_PADDING / 2, BOX_SIZE + BOX_PADDING, BOX_SIZE + BOX_PADDING);
+    }
+    return await resizeImageFile(new File([await canvasToBlob(canvas)], "preview", { type: MIME_TYPES.png }), {
+        outputType: MIME_TYPES.jpg,
+        maxWidthOrHeight: 5000,
+    });
+};
+const SingleLibraryItem = ({ libItem, appState, index, onChange, onRemove, }) => {
+    const svgRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        const node = svgRef.current;
+        if (!node) {
+            return;
+        }
+        (async () => {
+            const svg = await exportToSvg({
+                elements: libItem.elements,
+                appState: {
+                    ...appState,
+                    viewBackgroundColor: OpenColor.white,
+                    exportBackground: true,
+                },
+                files: null,
+            });
+            node.innerHTML = svg.outerHTML;
+        })();
+    }, [libItem.elements, appState]);
+    return (_jsxs("div", { className: "single-library-item", children: [libItem.status === "published" && (_jsx("span", { className: "single-library-item-status", children: t("labels.statusPublished") })), _jsx("div", { ref: svgRef, className: "single-library-item__svg" }), _jsx(ToolButton, { "aria-label": t("buttons.remove"), type: "button", icon: CloseIcon, className: "single-library-item--remove", onClick: onRemove.bind(null, libItem.id), title: t("buttons.remove") }), _jsxs("div", { style: {
+                    display: "flex",
+                    margin: "0.8rem 0",
+                    width: "100%",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    flexDirection: "column",
+                }, children: [_jsxs("label", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            flexDirection: "column",
+                        }, children: [_jsxs("div", { style: { padding: "0.5em 0" }, children: [_jsx("span", { style: { fontWeight: 500, color: OpenColor.gray[6] }, children: t("publishDialog.itemName") }), _jsx("span", { "aria-hidden": "true", className: "required", children: "*" })] }), _jsx("input", { type: "text", ref: inputRef, style: { width: "80%", padding: "0.2rem" }, defaultValue: libItem.name, placeholder: "Item name", onChange: (event) => {
+                                    onChange(event.target.value, index);
+                                } })] }), _jsx("span", { className: "error", children: libItem.error })] })] }));
+};
+const PublishLibrary = ({ onClose, libraryItems, appState, onSuccess, onError, updateItemsInStorage, onRemove, }) => {
+    const [libraryData, setLibraryData] = useState({
+        authorName: "",
+        githubHandle: "",
+        name: "",
+        description: "",
+        twitterHandle: "",
+        website: "",
+    });
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    useEffect(() => {
+        const data = EditorLocalStorage.get(EDITOR_LS_KEYS.PUBLISH_LIBRARY);
+        if (data) {
+            setLibraryData(data);
+        }
+    }, []);
+    const [clonedLibItems, setClonedLibItems] = useState(libraryItems.slice());
+    useEffect(() => {
+        setClonedLibItems(libraryItems.slice());
+    }, [libraryItems]);
+    const onInputChange = (event) => {
+        setLibraryData({
+            ...libraryData,
+            [event.target.name]: event.target.value,
+        });
+    };
+    const onSubmit = async (event) => {
+        event.preventDefault();
+        setIsSubmitting(true);
+        const erroredLibItems = [];
+        let isError = false;
+        clonedLibItems.forEach((libItem) => {
+            let error = "";
+            if (!libItem.name) {
+                error = t("publishDialog.errors.required");
+                isError = true;
+            }
+            erroredLibItems.push({ ...libItem, error });
+        });
+        if (isError) {
+            setClonedLibItems(erroredLibItems);
+            setIsSubmitting(false);
+            return;
+        }
+        const previewImage = await generatePreviewImage(clonedLibItems);
+        const libContent = {
+            type: EXPORT_DATA_TYPES.excalidrawLibrary,
+            version: VERSIONS.excalidrawLibrary,
+            source: EXPORT_SOURCE,
+            libraryItems: clonedLibItems,
+        };
+        const content = JSON.stringify(libContent, null, 2);
+        const lib = new Blob([content], { type: "application/json" });
+        const formData = new FormData();
+        formData.append("excalidrawLib", lib);
+        formData.append("previewImage", previewImage);
+        formData.append("previewImageType", previewImage.type);
+        formData.append("title", libraryData.name);
+        formData.append("authorName", libraryData.authorName);
+        formData.append("githubHandle", libraryData.githubHandle);
+        formData.append("name", libraryData.name);
+        formData.append("description", libraryData.description);
+        formData.append("twitterHandle", libraryData.twitterHandle);
+        formData.append("website", libraryData.website);
+        fetch(`${import.meta.env.VITE_APP_LIBRARY_BACKEND}/submit`, {
+            method: "post",
+            body: formData,
+        })
+            .then((response) => {
+            if (response.ok) {
+                return response.json().then(({ url }) => {
+                    // flush data from local storage
+                    EditorLocalStorage.delete(EDITOR_LS_KEYS.PUBLISH_LIBRARY);
+                    onSuccess({
+                        url,
+                        authorName: libraryData.authorName,
+                        items: clonedLibItems,
+                    });
+                });
+            }
+            return response
+                .json()
+                .catch(() => {
+                throw new Error(response.statusText || "something went wrong");
+            })
+                .then((error) => {
+                throw new Error(error.message || response.statusText || "something went wrong");
+            });
+        }, (err) => {
+            console.error(err);
+            onError(err);
+            setIsSubmitting(false);
+        })
+            .catch((err) => {
+            console.error(err);
+            onError(err);
+            setIsSubmitting(false);
+        });
+    };
+    const renderLibraryItems = () => {
+        const items = [];
+        clonedLibItems.forEach((libItem, index) => {
+            items.push(_jsx("div", { className: "single-library-item-wrapper", children: _jsx(SingleLibraryItem, { libItem: libItem, appState: appState, index: index, onChange: (val, index) => {
+                        const items = clonedLibItems.slice();
+                        items[index].name = val;
+                        setClonedLibItems(items);
+                    }, onRemove: onRemove }) }, index));
+        });
+        return _jsx("div", { className: "selected-library-items", children: items });
+    };
+    const onDialogClose = useCallback(() => {
+        updateItemsInStorage(clonedLibItems);
+        EditorLocalStorage.set(EDITOR_LS_KEYS.PUBLISH_LIBRARY, libraryData);
+        onClose();
+    }, [clonedLibItems, onClose, updateItemsInStorage, libraryData]);
+    const shouldRenderForm = !!libraryItems.length;
+    const containsPublishedItems = libraryItems.some((item) => item.status === "published");
+    return (_jsx(Dialog, { onCloseRequest: onDialogClose, title: t("publishDialog.title"), className: "publish-library", children: shouldRenderForm ? (_jsxs("form", { onSubmit: onSubmit, children: [_jsx("div", { className: "publish-library-note", children: _jsx(Trans, { i18nKey: "publishDialog.noteDescription", link: (el) => (_jsx("a", { href: "https://libraries.excalidraw.com", target: "_blank", rel: "noopener noreferrer", children: el })) }) }), _jsx("span", { className: "publish-library-note", children: _jsx(Trans, { i18nKey: "publishDialog.noteGuidelines", link: (el) => (_jsx("a", { href: "https://github.com/excalidraw/excalidraw-libraries#guidelines", target: "_blank", rel: "noopener noreferrer", children: el })) }) }), _jsx("div", { className: "publish-library-note", children: t("publishDialog.noteItems") }), containsPublishedItems && (_jsx("span", { className: "publish-library-note publish-library-warning", children: t("publishDialog.republishWarning") })), renderLibraryItems(), _jsxs("div", { className: "publish-library__fields", children: [_jsxs("label", { children: [_jsxs("div", { children: [_jsx("span", { children: t("publishDialog.libraryName") }), _jsx("span", { "aria-hidden": "true", className: "required", children: "*" })] }), _jsx("input", { type: "text", name: "name", required: true, value: libraryData.name, onChange: onInputChange, placeholder: t("publishDialog.placeholder.libraryName") })] }), _jsxs("label", { style: { alignItems: "flex-start" }, children: [_jsxs("div", { children: [_jsx("span", { children: t("publishDialog.libraryDesc") }), _jsx("span", { "aria-hidden": "true", className: "required", children: "*" })] }), _jsx("textarea", { name: "description", rows: 4, required: true, value: libraryData.description, onChange: onInputChange, placeholder: t("publishDialog.placeholder.libraryDesc") })] }), _jsxs("label", { children: [_jsxs("div", { children: [_jsx("span", { children: t("publishDialog.authorName") }), _jsx("span", { "aria-hidden": "true", className: "required", children: "*" })] }), _jsx("input", { type: "text", name: "authorName", required: true, value: libraryData.authorName, onChange: onInputChange, placeholder: t("publishDialog.placeholder.authorName") })] }), _jsxs("label", { children: [_jsx("span", { children: t("publishDialog.githubUsername") }), _jsx("input", { type: "text", name: "githubHandle", value: libraryData.githubHandle, onChange: onInputChange, placeholder: t("publishDialog.placeholder.githubHandle") })] }), _jsxs("label", { children: [_jsx("span", { children: t("publishDialog.twitterUsername") }), _jsx("input", { type: "text", name: "twitterHandle", value: libraryData.twitterHandle, onChange: onInputChange, placeholder: t("publishDialog.placeholder.twitterHandle") })] }), _jsxs("label", { children: [_jsx("span", { children: t("publishDialog.website") }), _jsx("input", { type: "text", name: "website", pattern: "https?://.+", title: t("publishDialog.errors.website"), value: libraryData.website, onChange: onInputChange, placeholder: t("publishDialog.placeholder.website") })] }), _jsx("span", { className: "publish-library-note", children: _jsx(Trans, { i18nKey: "publishDialog.noteLicense", link: (el) => (_jsx("a", { href: "https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE", target: "_blank", rel: "noopener noreferrer", children: el })) }) })] }), _jsxs("div", { className: "publish-library__buttons", children: [_jsx(DialogActionButton, { label: t("buttons.cancel"), onClick: onDialogClose, "data-testid": "cancel-clear-canvas-button" }), _jsx(DialogActionButton, { type: "submit", label: t("buttons.submit"), actionType: "primary", isLoading: isSubmitting })] })] })) : (_jsx("p", { style: { padding: "1em", textAlign: "center", fontWeight: 500 }, children: t("publishDialog.atleastOneLibItem") })) }));
+};
+export default PublishLibrary;

package/dist/packages/excalidraw/components/PublishLibrary.scss

@@ -0,0 +1,172 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .publish-library {
+    &__fields {
+      display: flex;
+      flex-direction: column;
+
+      label {
+        padding: 1em 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span {
+          font-weight: 500;
+          font-size: 1rem;
+          color: $oc-gray-6;
+        }
+        input,
+        textarea {
+          width: 70%;
+          padding: 0.6em;
+          font-family: var(--ui-font);
+        }
+
+        .required {
+          color: $oc-red-8;
+          margin: 0.2rem;
+        }
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      padding: 0.2rem 0;
+      justify-content: flex-end;
+      gap: 0.5rem;
+
+      .ToolIcon__icon {
+        min-width: 2.5rem;
+        width: auto;
+        font-size: 1rem;
+      }
+
+      .ToolIcon_type_button {
+        margin-left: 1rem;
+        padding: 0 0.5rem;
+      }
+
+      &--confirm.ToolIcon_type_button {
+        background-color: $oc-blue-6;
+
+        &:hover {
+          background-color: $oc-blue-8;
+        }
+      }
+
+      &--cancel.ToolIcon_type_button {
+        background-color: $oc-gray-5;
+        &:hover {
+          background-color: $oc-gray-6;
+        }
+      }
+
+      .ToolIcon__icon {
+        color: $oc-white;
+        .Spinner {
+          --spinner-color: #fff;
+          svg {
+            padding: 0.5rem;
+          }
+        }
+      }
+    }
+
+    .selected-library-items {
+      display: flex;
+      flex-wrap: wrap;
+
+      .single-library-item-wrapper {
+        width: 9rem;
+      }
+    }
+
+    &-warning {
+      color: $oc-red-6;
+    }
+
+    &-note {
+      padding: 1em 0;
+      font-style: italic;
+      font-size: 14px;
+      display: block;
+    }
+  }
+
+  .single-library-item {
+    position: relative;
+
+    &-status {
+      position: absolute;
+      top: 0.3rem;
+      left: 0.3rem;
+      font-size: 0.7rem;
+      color: $oc-red-7;
+      background: rgba(255, 255, 255, 0.9);
+      padding: 0.1rem 0.2rem;
+      border-radius: 0.2rem;
+    }
+
+    &__svg {
+      background-color: $oc-white;
+      padding: 0.3rem;
+      width: 7.5rem;
+      height: 7.5rem;
+      border: 1px solid var(--button-gray-2);
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .ToolIcon__icon {
+      background-color: $oc-white;
+      width: auto;
+      height: auto;
+      margin: 0 0.5rem;
+    }
+    .ToolIcon,
+    .ToolIcon_type_button:hover {
+      background-color: white;
+    }
+    .required,
+    .error {
+      color: $oc-red-8;
+      font-weight: bold;
+      font-size: 1rem;
+      margin: 0.2rem;
+    }
+    .error {
+      font-weight: 500;
+      margin: 0;
+      padding: 0.3em 0;
+    }
+
+    &--remove {
+      position: absolute;
+      top: 0.2rem;
+      right: 1rem;
+
+      .ToolIcon__icon {
+        margin: 0;
+      }
+      .ToolIcon__icon {
+        background-color: $oc-red-6;
+        &:hover {
+          background-color: $oc-red-7;
+        }
+        &:active {
+          background-color: $oc-red-8;
+        }
+      }
+      svg {
+        color: $oc-white;
+        padding: 0.26rem;
+        border-radius: 0.3em;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/RadioGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import "./RadioGroup.scss";
+export const RadioGroup = function ({ onChange, value, choices, name, }) {
+    return (_jsx("div", { className: "RadioGroup", children: choices.map((choice) => (_jsxs("div", { className: clsx("RadioGroup__choice", {
+                active: choice.value === value,
+            }), children: [_jsx("input", { name: name, type: "radio", checked: choice.value === value, onChange: () => onChange(choice.value) }), choice.label] }, choice.label))) }));
+};

package/dist/packages/excalidraw/components/RadioGroup.scss

@@ -0,0 +1,91 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  --RadioGroup-background: var(--island-bg-color);
+  --RadioGroup-border: var(--color-surface-high);
+
+  --RadioGroup-choice-color-off: var(--color-primary);
+  --RadioGroup-choice-color-off-hover: var(--color-brand-hover);
+  --RadioGroup-choice-background-off: var(--island-bg-color);
+  --RadioGroup-choice-background-off-active: var(--color-surface-high);
+
+  --RadioGroup-choice-color-on: var(--color-surface-lowest);
+  --RadioGroup-choice-background-on: var(--color-primary);
+  --RadioGroup-choice-background-on-hover: var(--color-brand-hover);
+  --RadioGroup-choice-background-on-active: var(--color-brand-active);
+
+  .RadioGroup {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: 3px;
+    border-radius: 10px;
+
+    background: var(--RadioGroup-background);
+    border: 1px solid var(--RadioGroup-border);
+
+    &__choice {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 24px;
+
+      color: var(--RadioGroup-choice-color-off);
+      background: var(--RadioGroup-choice-background-off);
+
+      border-radius: 8px;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 100%;
+      user-select: none;
+      letter-spacing: 0.4px;
+
+      transition: all 75ms ease-out;
+
+      &:hover {
+        color: var(--RadioGroup-choice-color-off-hover);
+      }
+
+      &:active {
+        background: var(--RadioGroup-choice-background-off-active);
+      }
+
+      &.active {
+        color: var(--RadioGroup-choice-color-on);
+        background: var(--RadioGroup-choice-background-on);
+
+        &:hover {
+          background: var(--RadioGroup-choice-background-on-hover);
+        }
+
+        &:active {
+          background: var(--RadioGroup-choice-background-on-active);
+        }
+      }
+
+      & input {
+        z-index: 1;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+
+        border-radius: 8px;
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+
+        cursor: pointer;
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/Section.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from "../i18n";
+import { useExcalidrawContainer } from "./App";
+export const Section = ({ heading, children, ...props }) => {
+    const { id } = useExcalidrawContainer();
+    const header = (_jsx("h2", { className: "visually-hidden", id: `${id}-${heading}-title`, children: t(`headings.${heading}`) }));
+    return (_jsx("section", { ...props, "aria-labelledby": `${id}-${heading}-title`, children: typeof children === "function" ? (children(header)) : (_jsxs(_Fragment, { children: [header, children] })) }));
+};

package/dist/packages/excalidraw/components/ShareableLinkDialog.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { copyTextToSystemClipboard } from "../clipboard";
+import { useI18n } from "../i18n";
+import { Dialog } from "./Dialog";
+import { TextField } from "./TextField";
+import { FilledButton } from "./FilledButton";
+import { copyIcon, tablerCheckIcon } from "./icons";
+import "./ShareableLinkDialog.scss";
+export const ShareableLinkDialog = ({ link, onCloseRequest, setErrorMessage, }) => {
+    const { t } = useI18n();
+    const [justCopied, setJustCopied] = useState(false);
+    const timerRef = useRef(0);
+    const ref = useRef(null);
+    const copyRoomLink = async () => {
+        try {
+            await copyTextToSystemClipboard(link);
+            setJustCopied(true);
+            if (timerRef.current) {
+                window.clearTimeout(timerRef.current);
+            }
+            timerRef.current = window.setTimeout(() => {
+                setJustCopied(false);
+            }, 3000);
+        }
+        catch (error) {
+            setErrorMessage(error.message);
+        }
+        ref.current?.select();
+    };
+    return (_jsx(Dialog, { onCloseRequest: onCloseRequest, title: false, size: "small", children: _jsxs("div", { className: "ShareableLinkDialog", children: [_jsx("h3", { children: "Shareable link" }), _jsxs("div", { className: "ShareableLinkDialog__linkRow", children: [_jsx(TextField, { ref: ref, label: "Link", readonly: true, fullWidth: true, value: link, selectOnRender: true }), _jsxs(Popover.Root, { open: justCopied, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(FilledButton, { size: "large", label: "Copy link", startIcon: copyIcon, onClick: copyRoomLink }) }), _jsxs(Popover.Content, { onOpenAutoFocus: (event) => event.preventDefault(), onCloseAutoFocus: (event) => event.preventDefault(), className: "ShareableLinkDialog__popover", side: "top", align: "end", sideOffset: 5.5, children: [tablerCheckIcon, " copied"] })] })] }), _jsxs("div", { className: "ShareableLinkDialog__description", children: ["\uD83D\uDD12 ", t("alerts.uploadedSecurly")] })] }) }));
+};

package/dist/packages/excalidraw/components/ShareableLinkDialog.scss

@@ -0,0 +1,91 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .ShareableLinkDialog {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    color: var(--text-primary-color);
+
+    ::selection {
+      background: var(--color-primary-light-darker);
+    }
+
+    h3 {
+      font-family: "Assistant";
+      font-weight: 700;
+      font-size: 1.313rem;
+      line-height: 130%;
+
+      margin: 0;
+    }
+
+    &__popover {
+      @keyframes RoomDialog__popover__scaleIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      box-sizing: border-box;
+      z-index: 100;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 0.125rem 0.5rem;
+      gap: 0.125rem;
+
+      height: 1.125rem;
+
+      border: none;
+      border-radius: 0.6875rem;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 110%;
+
+      background: var(--color-success-lighter);
+      color: var(--color-success);
+
+      & > svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+
+      transform-origin: var(--radix-popover-content-transform-origin);
+      animation: RoomDialog__popover__scaleIn 150ms ease-out;
+    }
+
+    &__linkRow {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      gap: 0.75rem;
+    }
+
+    &__description {
+      border-top: 1px solid var(--color-gray-20);
+
+      padding: 0.5rem 0.5rem 0;
+      font-weight: 400;
+      font-size: 0.75rem;
+      line-height: 150%;
+
+      & p {
+        margin: 0;
+      }
+
+      & p + p {
+        margin-top: 1em;
+      }
+    }
+  }
+}