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

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

@@ -0,0 +1,118 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  --Switch-disabled-color: var(--color-border-outline);
+  --Switch-disabled-toggled-background: var(--color-border-outline-variant);
+  --Switch-disabled-border: var(--color-border-outline-variant);
+  --Switch-track-background: var(--island-bg-color);
+  --Switch-thumb-background: var(--color-on-surface);
+  --Switch-hover-background: var(--color-brand-hover);
+  --Switch-active-background: var(--color-brand-active);
+
+  .Switch {
+    position: relative;
+    box-sizing: border-box;
+
+    width: 40px;
+    height: 20px;
+    border-radius: 12px;
+
+    transition-property: background, border;
+    transition-duration: 150ms;
+    transition-timing-function: ease-out;
+
+    background: var(--Switch-track-background);
+    border: 1px solid var(--Switch-disabled-color);
+
+    &:hover {
+      background: var(--Switch-track-background);
+      border: 1px solid var(--Switch-hover-background);
+    }
+
+    &:active {
+      border: 1px solid var(--Switch-active-background);
+    }
+
+    &.toggled {
+      background: var(--color-primary);
+      border: 1px solid var(--color-primary);
+
+      &:hover {
+        background: var(--color-primary-darker);
+        border: 1px solid var(--color-primary-darker);
+      }
+    }
+
+    &.disabled {
+      background: var(--Switch-track-background);
+      border: 1px solid var(--Switch-disabled-border);
+
+      &.toggled {
+        background: var(--Switch-disabled-toggled-background);
+        border: 1px solid var(--Switch-disabled-toggled-background);
+      }
+    }
+
+    &:before {
+      content: "";
+      box-sizing: border-box;
+      display: block;
+      pointer-events: none;
+      position: absolute;
+
+      border-radius: 100%;
+      transition: all 150ms ease-out;
+
+      width: 10px;
+      height: 10px;
+      top: 4px;
+      left: 4px;
+
+      background: var(--Switch-thumb-background);
+    }
+
+    &:active:before {
+      width: 12px;
+    }
+
+    &.toggled:before {
+      width: 14px;
+      height: 14px;
+      left: 22px;
+      top: 2px;
+
+      background: var(--Switch-track-background);
+    }
+
+    &.toggled:active:before {
+      width: 16px;
+      left: 20px;
+    }
+
+    &.disabled:before {
+      background: var(--Switch-disabled-color);
+    }
+
+    &.disabled.toggled:before {
+      background: var(--Switch-disabled-color);
+    }
+
+    & input {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+
+      border-radius: 12px;
+
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+
+      cursor: pointer;
+
+      &:disabled {
+        cursor: unset;
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useDeferredValue } from "react";
+import { useApp } from "../App";
+import { ArrowRightIcon } from "../icons";
+import "./MermaidToExcalidraw.scss";
+import { t } from "../../i18n";
+import Trans from "../Trans";
+import { convertMermaidToExcalidraw, insertToEditor, saveMermaidDataToStorage, } from "./common";
+import { TTDDialogPanels } from "./TTDDialogPanels";
+import { TTDDialogPanel } from "./TTDDialogPanel";
+import { TTDDialogInput } from "./TTDDialogInput";
+import { TTDDialogOutput } from "./TTDDialogOutput";
+import { EditorLocalStorage } from "../../data/EditorLocalStorage";
+import { EDITOR_LS_KEYS } from "../../constants";
+import { debounce } from "../../utils";
+import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
+const MERMAID_EXAMPLE = "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
+const debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300);
+const MermaidToExcalidraw = ({ mermaidToExcalidrawLib, }) => {
+    const [text, setText] = useState(() => EditorLocalStorage.get(EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW) ||
+        MERMAID_EXAMPLE);
+    const deferredText = useDeferredValue(text.trim());
+    const [error, setError] = useState(null);
+    const canvasRef = useRef(null);
+    const data = useRef({ elements: [], files: null });
+    const app = useApp();
+    useEffect(() => {
+        convertMermaidToExcalidraw({
+            canvasRef,
+            data,
+            mermaidToExcalidrawLib,
+            setError,
+            mermaidDefinition: deferredText,
+        }).catch(() => { });
+        debouncedSaveMermaidDefinition(deferredText);
+    }, [deferredText, mermaidToExcalidrawLib]);
+    useEffect(() => () => {
+        debouncedSaveMermaidDefinition.flush();
+    }, []);
+    const onInsertToEditor = () => {
+        insertToEditor({
+            app,
+            data,
+            text,
+            shouldSaveMermaidDataToStorage: true,
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ttd-dialog-desc", children: _jsx(Trans, { i18nKey: "mermaid.description", flowchartLink: (el) => (_jsx("a", { href: "https://mermaid.js.org/syntax/flowchart.html", children: el })), sequenceLink: (el) => (_jsx("a", { href: "https://mermaid.js.org/syntax/sequenceDiagram.html", children: el })), classLink: (el) => (_jsx("a", { href: "https://mermaid.js.org/syntax/classDiagram.html", children: el })) }) }), _jsxs(TTDDialogPanels, { children: [_jsx(TTDDialogPanel, { label: t("mermaid.syntax"), children: _jsx(TTDDialogInput, { input: text, placeholder: "Write Mermaid diagram defintion here...", onChange: (event) => setText(event.target.value), onKeyboardSubmit: () => {
+                                onInsertToEditor();
+                            } }) }), _jsx(TTDDialogPanel, { label: t("mermaid.preview"), panelAction: {
+                            action: () => {
+                                onInsertToEditor();
+                            },
+                            label: t("mermaid.button"),
+                            icon: ArrowRightIcon,
+                        }, renderSubmitShortcut: () => _jsx(TTDDialogSubmitShortcut, {}), children: _jsx(TTDDialogOutput, { canvasRef: canvasRef, loaded: mermaidToExcalidrawLib.loaded, error: error }) })] })] }));
+};
+export default MermaidToExcalidraw;

package/dist/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.scss

@@ -0,0 +1,10 @@
+.excalidraw {
+  .dialog-mermaid {
+    &-title {
+      margin-block: 0.25rem;
+      font-size: 1.25rem;
+      font-weight: 700;
+      padding-inline: 2.5rem;
+    }
+  }
+}

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

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "../Dialog";
+import { useApp, useExcalidrawSetAppState } from "../App";
+import MermaidToExcalidraw from "./MermaidToExcalidraw";
+import TTDDialogTabs from "./TTDDialogTabs";
+import { useEffect, useRef, useState } from "react";
+import { useUIAppState } from "../../context/ui-appState";
+import { withInternalFallback } from "../hoc/withInternalFallback";
+import { TTDDialogTabTriggers } from "./TTDDialogTabTriggers";
+import { TTDDialogTabTrigger } from "./TTDDialogTabTrigger";
+import { TTDDialogTab } from "./TTDDialogTab";
+import { t } from "../../i18n";
+import { TTDDialogInput } from "./TTDDialogInput";
+import { TTDDialogOutput } from "./TTDDialogOutput";
+import { TTDDialogPanel } from "./TTDDialogPanel";
+import { TTDDialogPanels } from "./TTDDialogPanels";
+import { convertMermaidToExcalidraw, insertToEditor, saveMermaidDataToStorage, } from "./common";
+import { ArrowRightIcon } from "../icons";
+import "./TTDDialog.scss";
+import { isFiniteNumber } from "../../utils";
+import { atom, useAtom } from "jotai";
+import { trackEvent } from "../../analytics";
+import { InlineIcon } from "../InlineIcon";
+import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
+const MIN_PROMPT_LENGTH = 3;
+const MAX_PROMPT_LENGTH = 1000;
+const rateLimitsAtom = atom(null);
+const ttdGenerationAtom = atom(null);
+export const TTDDialog = (props) => {
+    const appState = useUIAppState();
+    if (appState.openDialog?.name !== "ttd") {
+        return null;
+    }
+    return _jsx(TTDDialogBase, { ...props, tab: appState.openDialog.tab });
+};
+/**
+ * Text to diagram (TTD) dialog
+ */
+export const TTDDialogBase = withInternalFallback("TTDDialogBase", ({ tab, ...rest }) => {
+    const app = useApp();
+    const setAppState = useExcalidrawSetAppState();
+    const someRandomDivRef = useRef(null);
+    const [ttdGeneration, setTtdGeneration] = useAtom(ttdGenerationAtom);
+    const [text, setText] = useState(ttdGeneration?.prompt ?? "");
+    const prompt = text.trim();
+    const handleTextChange = (event) => {
+        setText(event.target.value);
+        setTtdGeneration((s) => ({
+            generatedResponse: s?.generatedResponse ?? null,
+            prompt: event.target.value,
+        }));
+    };
+    const [onTextSubmitInProgess, setOnTextSubmitInProgess] = useState(false);
+    const [rateLimits, setRateLimits] = useAtom(rateLimitsAtom);
+    const onGenerate = async () => {
+        if (prompt.length > MAX_PROMPT_LENGTH ||
+            prompt.length < MIN_PROMPT_LENGTH ||
+            onTextSubmitInProgess ||
+            rateLimits?.rateLimitRemaining === 0 ||
+            // means this is not a text-to-diagram dialog (needed for TS only)
+            "__fallback" in rest) {
+            if (prompt.length < MIN_PROMPT_LENGTH) {
+                setError(new Error(`Prompt is too short (min ${MIN_PROMPT_LENGTH} characters)`));
+            }
+            if (prompt.length > MAX_PROMPT_LENGTH) {
+                setError(new Error(`Prompt is too long (max ${MAX_PROMPT_LENGTH} characters)`));
+            }
+            return;
+        }
+        try {
+            setOnTextSubmitInProgess(true);
+            trackEvent("ai", "generate", "ttd");
+            const { generatedResponse, error, rateLimit, rateLimitRemaining } = await rest.onTextSubmit(prompt);
+            if (typeof generatedResponse === "string") {
+                setTtdGeneration((s) => ({
+                    generatedResponse,
+                    prompt: s?.prompt ?? null,
+                }));
+            }
+            if (isFiniteNumber(rateLimit) && isFiniteNumber(rateLimitRemaining)) {
+                setRateLimits({ rateLimit, rateLimitRemaining });
+            }
+            if (error) {
+                setError(error);
+                return;
+            }
+            if (!generatedResponse) {
+                setError(new Error("Generation failed"));
+                return;
+            }
+            try {
+                await convertMermaidToExcalidraw({
+                    canvasRef: someRandomDivRef,
+                    data,
+                    mermaidToExcalidrawLib,
+                    setError,
+                    mermaidDefinition: generatedResponse,
+                });
+                trackEvent("ai", "mermaid parse success", "ttd");
+            }
+            catch (error) {
+                console.info(`%cTTD mermaid render errror: ${error.message}`, "color: red");
+                console.info(`>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>\nTTD mermaid definition render errror: ${error.message}`, "color: yellow");
+                trackEvent("ai", "mermaid parse failed", "ttd");
+                setError(new Error("Generated an invalid diagram :(. You may also try a different prompt."));
+            }
+        }
+        catch (error) {
+            let message = error.message;
+            if (!message || message === "Failed to fetch") {
+                message = "Request failed";
+            }
+            setError(new Error(message));
+        }
+        finally {
+            setOnTextSubmitInProgess(false);
+        }
+    };
+    const refOnGenerate = useRef(onGenerate);
+    refOnGenerate.current = onGenerate;
+    const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] = useState({
+        loaded: false,
+        api: import("@excalidraw/mermaid-to-excalidraw"),
+    });
+    useEffect(() => {
+        const fn = async () => {
+            await mermaidToExcalidrawLib.api;
+            setMermaidToExcalidrawLib((prev) => ({ ...prev, loaded: true }));
+        };
+        fn();
+    }, [mermaidToExcalidrawLib.api]);
+    const data = useRef({ elements: [], files: null });
+    const [error, setError] = useState(null);
+    return (_jsx(Dialog, { className: "ttd-dialog", onCloseRequest: () => {
+            app.setOpenDialog(null);
+        }, size: 1200, title: false, ...rest, autofocus: false, children: _jsxs(TTDDialogTabs, { dialog: "ttd", tab: tab, children: ["__fallback" in rest && rest.__fallback ? (_jsx("p", { className: "dialog-mermaid-title", children: t("mermaid.title") })) : (_jsxs(TTDDialogTabTriggers, { children: [_jsx(TTDDialogTabTrigger, { tab: "text-to-diagram", children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [t("labels.textToDiagram"), _jsx("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            padding: "1px 6px",
+                                            marginLeft: "10px",
+                                            fontSize: 10,
+                                            borderRadius: "12px",
+                                            background: "pink",
+                                            color: "#000",
+                                        }, children: "AI Beta" })] }) }), _jsx(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })] })), _jsx(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: _jsx(MermaidToExcalidraw, { mermaidToExcalidrawLib: mermaidToExcalidrawLib }) }), !("__fallback" in rest) && (_jsxs(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [_jsx("div", { className: "ttd-dialog-desc", children: "Currently we use Mermaid as a middle step, so you'll get best results if you describe a diagram, workflow, flow chart, and similar." }), _jsxs(TTDDialogPanels, { children: [_jsx(TTDDialogPanel, { label: t("labels.prompt"), panelAction: {
+                                        action: onGenerate,
+                                        label: "Generate",
+                                        icon: ArrowRightIcon,
+                                    }, onTextSubmitInProgess: onTextSubmitInProgess, panelActionDisabled: prompt.length > MAX_PROMPT_LENGTH ||
+                                        rateLimits?.rateLimitRemaining === 0, renderTopRight: () => {
+                                        if (!rateLimits) {
+                                            return null;
+                                        }
+                                        return (_jsxs("div", { className: "ttd-dialog-rate-limit", style: {
+                                                fontSize: 12,
+                                                marginLeft: "auto",
+                                                color: rateLimits.rateLimitRemaining === 0
+                                                    ? "var(--color-danger)"
+                                                    : undefined,
+                                            }, children: [rateLimits.rateLimitRemaining, " requests left today"] }));
+                                    }, renderSubmitShortcut: () => _jsx(TTDDialogSubmitShortcut, {}), renderBottomRight: () => {
+                                        if (typeof ttdGeneration?.generatedResponse === "string") {
+                                            return (_jsxs("div", { className: "excalidraw-link", style: { marginLeft: "auto", fontSize: 14 }, onClick: () => {
+                                                    if (typeof ttdGeneration?.generatedResponse ===
+                                                        "string") {
+                                                        saveMermaidDataToStorage(ttdGeneration.generatedResponse);
+                                                        setAppState({
+                                                            openDialog: { name: "ttd", tab: "mermaid" },
+                                                        });
+                                                    }
+                                                }, children: ["View as Mermaid", _jsx(InlineIcon, { icon: ArrowRightIcon })] }));
+                                        }
+                                        const ratio = prompt.length / MAX_PROMPT_LENGTH;
+                                        if (ratio > 0.8) {
+                                            return (_jsxs("div", { style: {
+                                                    marginLeft: "auto",
+                                                    fontSize: 12,
+                                                    fontFamily: "monospace",
+                                                    color: ratio > 1 ? "var(--color-danger)" : undefined,
+                                                }, children: ["Length: ", prompt.length, "/", MAX_PROMPT_LENGTH] }));
+                                        }
+                                        return null;
+                                    }, children: _jsx(TTDDialogInput, { onChange: handleTextChange, input: text, placeholder: "Describe what you want to see...", onKeyboardSubmit: () => {
+                                            refOnGenerate.current();
+                                        } }) }), _jsx(TTDDialogPanel, { label: "Preview", panelAction: {
+                                        action: () => {
+                                            console.info("Panel action clicked");
+                                            insertToEditor({ app, data });
+                                        },
+                                        label: "Insert",
+                                        icon: ArrowRightIcon,
+                                    }, children: _jsx(TTDDialogOutput, { canvasRef: someRandomDivRef, error: error, loaded: mermaidToExcalidrawLib.loaded }) })] })] }))] }) }));
+});

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

@@ -0,0 +1,315 @@
+@import "../../css/variables.module.scss";
+
+$verticalBreakpoint: 861px;
+
+.excalidraw {
+  .Modal.Dialog.ttd-dialog {
+    padding: 1.25rem;
+
+    &.Dialog--fullscreen {
+      margin-top: 0;
+    }
+
+    .Island {
+      padding-inline: 0 !important;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+      box-shadow: none;
+    }
+
+    .Modal__content {
+      height: auto;
+      max-height: 100%;
+
+      @media screen and (min-width: $verticalBreakpoint) {
+        max-height: 750px;
+        height: 100%;
+      }
+    }
+
+    .Dialog__content {
+      flex: 1 1 auto;
+    }
+  }
+
+  .ttd-dialog-desc {
+    font-size: 15px;
+    font-style: italic;
+    font-weight: 500;
+    margin-bottom: 1.5rem;
+  }
+
+  .ttd-dialog-tabs-root {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ttd-dialog-tab-trigger {
+    color: var(--color-on-surface);
+    font-size: 0.875rem;
+    margin: 0;
+    padding: 0 1rem;
+    background-color: transparent;
+    border: 0;
+    height: 2.875rem;
+    font-weight: 600;
+    font-family: inherit;
+    letter-spacing: 0.4px;
+
+    &[data-state="active"] {
+      border-bottom: 2px solid var(--color-primary);
+    }
+  }
+
+  .ttd-dialog-triggers {
+    border-bottom: 1px solid var(--color-surface-high);
+    margin-bottom: 1.5rem;
+    padding-inline: 2.5rem;
+  }
+
+  .ttd-dialog-content {
+    padding-inline: 2.5rem;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .ttd-dialog-input {
+    width: auto;
+    height: 10rem;
+    resize: none;
+    border-radius: var(--border-radius-lg);
+    border: 1px solid var(--dialog-border-color);
+    white-space: pre-wrap;
+    padding: 0.85rem;
+    box-sizing: border-box;
+    font-family: monospace;
+
+    @media screen and (min-width: $verticalBreakpoint) {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .ttd-dialog-output-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.85rem;
+    box-sizing: border-box;
+    flex-grow: 1;
+    position: relative;
+
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
+      left center;
+    border-radius: var(--border-radius-lg);
+    border: 1px solid var(--dialog-border-color);
+
+    height: 400px;
+    width: auto;
+
+    @media screen and (min-width: $verticalBreakpoint) {
+      width: 100%;
+      // acts as min-height
+      height: 200px;
+    }
+
+    canvas {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+  .ttd-dialog-output-canvas-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+  }
+
+  .ttd-dialog-output-error {
+    color: red;
+    font-weight: 800;
+    font-size: 30px;
+    word-break: break-word;
+    overflow: auto;
+    max-height: 100%;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    z-index: 10;
+
+    p {
+      font-weight: 500;
+      font-family: Cascadia;
+      text-align: left;
+      white-space: pre-wrap;
+      font-size: 0.875rem;
+      padding: 0 10px;
+    }
+  }
+
+  .ttd-dialog-panels {
+    height: 100%;
+
+    @media screen and (min-width: $verticalBreakpoint) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4rem;
+    }
+  }
+
+  .ttd-dialog-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &__header {
+      display: flex;
+      margin: 0px 4px 4px 4px;
+      align-items: center;
+      gap: 1rem;
+
+      label {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+      }
+    }
+
+    &:first-child {
+      .ttd-dialog-panel-button-container:not(.invisible) {
+        margin-bottom: 4rem;
+      }
+    }
+
+    @media screen and (min-width: $verticalBreakpoint) {
+      .ttd-dialog-panel-button-container:not(.invisible) {
+        margin-bottom: 0.5rem !important;
+      }
+    }
+
+    textarea {
+      height: 100%;
+      resize: none;
+      border-radius: var(--border-radius-lg);
+      border: 1px solid var(--dialog-border-color);
+      white-space: pre-wrap;
+      padding: 0.85rem;
+      box-sizing: border-box;
+      width: 100%;
+      font-family: monospace;
+
+      @media screen and (max-width: $verticalBreakpoint) {
+        width: auto;
+        height: 10rem;
+      }
+    }
+  }
+
+  .ttd-dialog-panel-button-container {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+
+    &.invisible {
+      .ttd-dialog-panel-button {
+        display: none;
+
+        @media screen and (min-width: $verticalBreakpoint) {
+          display: block;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+
+  .ttd-dialog-panel-button {
+    &.excalidraw-button {
+      font-family: inherit;
+      font-weight: 600;
+      height: 2.5rem;
+
+      font-size: 12px;
+      color: $oc-white;
+      background-color: var(--color-primary);
+      width: 100%;
+
+      &:hover {
+        background-color: var(--color-primary-darker);
+      }
+      &:active {
+        background-color: var(--color-primary-darkest);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+
+        &:hover {
+          background-color: var(--color-primary);
+        }
+      }
+
+      @media screen and (min-width: $verticalBreakpoint) {
+        width: auto;
+        min-width: 7.5rem;
+      }
+
+      @at-root .excalidraw.theme--dark#{&} {
+        color: var(--color-gray-100);
+      }
+    }
+
+    position: relative;
+
+    div {
+      display: contents;
+
+      &.invisible {
+        visibility: hidden;
+      }
+
+      &.Spinner {
+        display: flex !important;
+        position: absolute;
+        inset: 0;
+
+        --spinner-color: white;
+
+        @at-root .excalidraw.theme--dark#{&} {
+          --spinner-color: var(--color-gray-100);
+        }
+      }
+
+      span {
+        padding-left: 0.5rem;
+        display: flex;
+      }
+    }
+  }
+
+  .ttd-dialog-submit-shortcut {
+    margin-inline-start: 0.5rem;
+    font-size: 0.625rem;
+    opacity: 0.6;
+    display: flex;
+    gap: 0.125rem;
+
+    &__key {
+      border: 1px solid gray;
+      padding: 2px 3px;
+      border-radius: 4px;
+    }
+  }
+}