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

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { memo, useEffect, useRef, useState } from "react";
+import { useDevice } from "./App";
+import "./LibraryUnit.scss";
+import { CheckboxItem } from "./CheckboxItem";
+import { PlusIcon } from "./icons";
+import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
+export const LibraryUnit = memo(({ id, elements, isPending, onClick, selected, onToggle, onDrag, svgCache, }) => {
+    const ref = useRef(null);
+    const svg = useLibraryItemSvg(id, elements, svgCache);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node) {
+            return;
+        }
+        if (svg) {
+            node.innerHTML = svg.outerHTML;
+        }
+        return () => {
+            node.innerHTML = "";
+        };
+    }, [svg]);
+    const [isHovered, setIsHovered] = useState(false);
+    const isMobile = useDevice().editor.isMobile;
+    const adder = isPending && (_jsx("div", { className: "library-unit__adder", children: PlusIcon }));
+    return (_jsxs("div", { className: clsx("library-unit", {
+            "library-unit__active": elements,
+            "library-unit--hover": elements && isHovered,
+            "library-unit--selected": selected,
+            "library-unit--skeleton": !svg,
+        }), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { className: clsx("library-unit__dragger", {
+                    "library-unit__pulse": !!isPending,
+                }), ref: ref, draggable: !!elements, onClick: !!elements || !!isPending
+                    ? (event) => {
+                        if (id && event.shiftKey) {
+                            onToggle(id, event);
+                        }
+                        else {
+                            onClick(id);
+                        }
+                    }
+                    : undefined, onDragStart: (event) => {
+                    if (!id) {
+                        event.preventDefault();
+                        return;
+                    }
+                    setIsHovered(false);
+                    onDrag(id, event);
+                } }), adder, id && elements && (isHovered || isMobile || selected) && (_jsx(CheckboxItem, { checked: selected, onChange: (checked, event) => onToggle(id, event), className: "library-unit__checkbox" }))] }));
+});
+export const EmptyLibraryUnit = () => (_jsx("div", { className: "library-unit library-unit--skeleton" }));

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

@@ -0,0 +1,185 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .library-unit {
+    align-items: center;
+    border: 1px solid transparent;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 55px;
+    height: 55px;
+    box-sizing: border-box;
+    border-radius: var(--border-radius-lg);
+
+    svg {
+      // to prevent clicks on links and such
+      pointer-events: none;
+    }
+
+    &--hover {
+      border-color: var(--color-primary);
+    }
+
+    &--selected {
+      border-color: var(--color-primary);
+      border-width: 1px;
+    }
+
+    &--skeleton {
+      opacity: 0.5;
+      background: linear-gradient(
+        -45deg,
+        var(--color-gray-10),
+        var(--color-gray-20),
+        var(--color-gray-10)
+      );
+      background-size: 200% 200%;
+      animation: library-unit__skeleton-opacity-animation 0.2s linear;
+    }
+  }
+
+  &.theme--dark .library-unit--skeleton {
+    background-image: linear-gradient(
+      -45deg,
+      var(--color-gray-100),
+      var(--color-gray-80),
+      var(--color-gray-100)
+    );
+  }
+
+  .library-unit__dragger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  .library-unit__dragger > svg {
+    filter: var(--theme-filter);
+    flex-grow: 1;
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  .library-unit__checkbox-container,
+  .library-unit__checkbox-container:hover,
+  .library-unit__checkbox-container:active {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--icon-fill-color);
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0.5rem;
+    position: absolute;
+    left: 2rem;
+    bottom: 2rem;
+    cursor: pointer;
+
+    input {
+      cursor: pointer;
+    }
+  }
+
+  .library-unit__checkbox {
+    position: absolute;
+    top: 0.125rem;
+    right: 0.125rem;
+    margin: 0;
+
+    .Checkbox-box {
+      margin: 0;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 4px;
+      background-color: var(--color-primary-light);
+      border: 1px solid var(--color-primary);
+      box-shadow: none !important;
+      padding: 2px;
+    }
+
+    &.Checkbox:hover {
+      .Checkbox-box {
+        background-color: var(--color-primary-light);
+      }
+    }
+
+    &.is-checked {
+      .Checkbox-box {
+        background-color: var(--color-primary) !important;
+
+        svg {
+          color: var(--color-primary-light);
+        }
+      }
+    }
+  }
+
+  .library-unit__removeFromLibrary > svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  .library-unit__adder {
+    transform: scale(1);
+    animation: library-unit__adder-animation 1s ease-in infinite;
+
+    position: absolute;
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: var(--color-primary);
+    border-radius: var(--border-radius-md);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    pointer-events: none;
+
+    svg {
+      color: var(--color-primary-light);
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .library-unit:active .library-unit__adder {
+    animation: none;
+    transform: scale(0.8);
+  }
+
+  .library-unit__active {
+    cursor: pointer;
+  }
+
+  @keyframes library-unit__adder-animation {
+    0% {
+      transform: scale(0.85);
+    }
+
+    50% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0.85);
+    }
+  }
+
+  @keyframes library-unit__skeleton-opacity-animation {
+    0% {
+      opacity: 0;
+    }
+
+    75% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0.5;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from "../i18n";
+import { useState, useEffect } from "react";
+import Spinner from "./Spinner";
+import clsx from "clsx";
+import { THEME } from "../constants";
+export const LoadingMessage = ({ delay, theme, }) => {
+    const [isWaiting, setIsWaiting] = useState(!!delay);
+    useEffect(() => {
+        if (!delay) {
+            return;
+        }
+        const timer = setTimeout(() => {
+            setIsWaiting(false);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [delay]);
+    if (isWaiting) {
+        return null;
+    }
+    return (_jsxs("div", { className: clsx("LoadingMessage", {
+            "LoadingMessage--dark": theme === THEME.DARK,
+        }), children: [_jsx("div", { children: _jsx(Spinner, {}) }), _jsx("div", { className: "LoadingMessage-text", children: t("labels.loadingScene") })] }));
+};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ToolIcon.scss";
+import clsx from "clsx";
+import { LockedIcon, UnlockedIcon } from "./icons";
+const DEFAULT_SIZE = "medium";
+const ICONS = {
+    CHECKED: LockedIcon,
+    UNCHECKED: UnlockedIcon,
+};
+export const LockButton = (props) => {
+    return (_jsxs("label", { className: clsx("ToolIcon ToolIcon__lock", `ToolIcon_size_${DEFAULT_SIZE}`, {
+            "is-mobile": props.isMobile,
+        }), title: `${props.title} — Q`, children: [_jsx("input", { className: "ToolIcon_type_checkbox", type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked, "aria-label": props.title, "data-testid": "toolbar-lock" }), _jsx("div", { className: "ToolIcon__icon", children: props.checked ? ICONS.CHECKED : ICONS.UNCHECKED })] }));
+};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ToolIcon.scss";
+import clsx from "clsx";
+const DEFAULT_SIZE = "small";
+export const ElementCanvasButton = (props) => {
+    return (_jsxs("label", { className: clsx("ToolIcon ToolIcon__MagicButton", `ToolIcon_size_${DEFAULT_SIZE}`, {
+            "is-mobile": props.isMobile,
+        }), title: `${props.title}`, children: [_jsx("input", { className: "ToolIcon_type_checkbox", type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked, "aria-label": props.title }), _jsx("div", { className: "ToolIcon__icon", children: props.icon })] }));
+};

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Dialog } from "./Dialog";
+import { TextField } from "./TextField";
+import { MagicIcon, OpenAIIcon } from "./icons";
+import { FilledButton } from "./FilledButton";
+import { CheckboxItem } from "./CheckboxItem";
+import { KEYS } from "../keys";
+import { useUIAppState } from "../context/ui-appState";
+import { InlineIcon } from "./InlineIcon";
+import { Paragraph } from "./Paragraph";
+import "./MagicSettings.scss";
+import TTDDialogTabs from "./TTDDialog/TTDDialogTabs";
+import { TTDDialogTab } from "./TTDDialog/TTDDialogTab";
+export const MagicSettings = (props) => {
+    const [keyInputValue, setKeyInputValue] = useState(props.openAIKey || "");
+    const [shouldPersist, setShouldPersist] = useState(props.isPersisted);
+    const appState = useUIAppState();
+    const onConfirm = () => {
+        props.onConfirm(keyInputValue.trim(), shouldPersist);
+    };
+    if (appState.openDialog?.name !== "settings") {
+        return null;
+    }
+    return (_jsx(Dialog, { onCloseRequest: () => {
+            props.onClose();
+            props.onConfirm(keyInputValue.trim(), shouldPersist);
+        }, title: _jsxs("div", { style: { display: "flex" }, children: ["Wireframe to Code (AI)", " ", _jsx("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        padding: "0.1rem 0.5rem",
+                        marginLeft: "1rem",
+                        fontSize: 14,
+                        borderRadius: "12px",
+                        color: "#000",
+                        background: "pink",
+                    }, children: "Experimental" })] }), className: "MagicSettings", autofocus: false, children: _jsx(TTDDialogTabs, { dialog: "settings", tab: appState.openDialog.tab, children: _jsxs(TTDDialogTab
+            //  className="ttd-dialog-content"
+            , { 
+                //  className="ttd-dialog-content"
+                tab: "diagram-to-code", children: [_jsxs(Paragraph, { children: ["For the diagram-to-code feature we use", " ", _jsx(InlineIcon, { icon: OpenAIIcon }), "OpenAI."] }), _jsxs(Paragraph, { children: ["While the OpenAI API is in beta, its use is strictly limited \u2014 as such we require you use your own API key. You can create an", " ", _jsx("a", { href: "https://platform.openai.com/login?launch", rel: "noopener noreferrer", target: "_blank", children: "OpenAI account" }), ", add a small credit (5 USD minimum), and", " ", _jsx("a", { href: "https://platform.openai.com/api-keys", rel: "noopener noreferrer", target: "_blank", children: "generate your own API key" }), "."] }), _jsx(Paragraph, { children: "Your OpenAI key does not leave the browser, and you can also set your own limit in your OpenAI account dashboard if needed." }), _jsx(TextField, { isRedacted: true, value: keyInputValue, placeholder: "Paste your API key here", label: "OpenAI API key", onChange: (value) => {
+                            setKeyInputValue(value);
+                            props.onChange(value.trim(), shouldPersist);
+                        }, selectOnRender: true, onKeyDown: (event) => event.key === KEYS.ENTER && onConfirm() }), _jsx(Paragraph, { children: "By default, your API token is not persisted anywhere so you'll need to insert it again after reload. But, you can persist locally in your browser below." }), _jsx(CheckboxItem, { checked: shouldPersist, onChange: setShouldPersist, children: "Persist API key in browser storage" }), _jsxs(Paragraph, { children: ["Once API key is set, you can use the ", _jsx(InlineIcon, { icon: MagicIcon }), " ", "tool to wrap your elements in a frame that will then allow you to turn it into code. This dialog can be accessed using the", " ", _jsx("b", { children: "AI Settings" }), " ", _jsx(InlineIcon, { icon: OpenAIIcon }), "."] }), _jsx(FilledButton, { className: "MagicSettings__confirm", size: "large", label: "Confirm", onClick: onConfirm })] }) }) }));
+};

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

@@ -0,0 +1,18 @@
+.excalidraw {
+  .MagicSettings {
+    .Island {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .MagicSettings-confirm {
+    padding: 0.5rem 1rem;
+  }
+
+  .MagicSettings__confirm {
+    margin-top: 2rem;
+    margin-right: auto;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { t } from "../i18n";
+import Stack from "./Stack";
+import { showSelectedShapeActions } from "../element";
+import { FixedSideContainer } from "./FixedSideContainer";
+import { Island } from "./Island";
+import { HintViewer } from "./HintViewer";
+import { calculateScrollCenter } from "../scene";
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import { Section } from "./Section";
+import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
+import { LockButton } from "./LockButton";
+import { PenModeButton } from "./PenModeButton";
+import { Stats } from "./Stats";
+import { actionToggleStats } from "../actions";
+import { HandButton } from "./HandButton";
+import { isHandToolActive } from "../appState";
+import { useTunnels } from "../context/tunnels";
+export const MobileMenu = ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, renderTopRightUI, renderCustomStats, renderSidebars, device, renderWelcomeScreen, UIOptions, app, }) => {
+    const { WelcomeScreenCenterTunnel, MainMenuTunnel, DefaultSidebarTriggerTunnel, } = useTunnels();
+    const renderToolbar = () => {
+        return (_jsxs(FixedSideContainer, { side: "top", className: "App-top-bar", children: [renderWelcomeScreen && _jsx(WelcomeScreenCenterTunnel.Out, {}), _jsx(Section, { heading: "shapes", children: (heading) => (_jsx(Stack.Col, { gap: 4, align: "center", children: _jsxs(Stack.Row, { gap: 1, className: "App-toolbar-container", children: [_jsxs(Island, { padding: 1, className: "App-toolbar App-toolbar--mobile", children: [heading, _jsx(Stack.Row, { gap: 1, children: _jsx(ShapesSwitcher, { appState: appState, activeTool: appState.activeTool, UIOptions: UIOptions, app: app }) })] }), renderTopRightUI && renderTopRightUI(true, appState), _jsxs("div", { className: "mobile-misc-tools-container", children: [!appState.viewModeEnabled && (_jsx(DefaultSidebarTriggerTunnel.Out, {})), _jsx(PenModeButton, { checked: appState.penMode, onChange: () => onPenModeToggle(null), title: t("toolBar.penMode"), isMobile: true, penDetected: appState.penDetected }), _jsx(LockButton, { checked: appState.activeTool.locked, onChange: onLockToggle, title: t("toolBar.lock"), isMobile: true }), _jsx(HandButton, { checked: isHandToolActive(appState), onChange: () => onHandToolToggle(), title: t("toolBar.hand"), isMobile: true })] })] }) })) }), _jsx(HintViewer, { appState: appState, isMobile: true, device: device, app: app })] }));
+    };
+    const renderAppToolbar = () => {
+        if (appState.viewModeEnabled) {
+            return (_jsx("div", { className: "App-toolbar-content", children: _jsx(MainMenuTunnel.Out, {}) }));
+        }
+        return (_jsxs("div", { className: "App-toolbar-content", children: [_jsx(MainMenuTunnel.Out, {}), actionManager.renderAction("toggleEditMenu"), actionManager.renderAction("undo"), actionManager.renderAction("redo"), actionManager.renderAction(appState.multiElement ? "finalize" : "duplicateSelection"), actionManager.renderAction("deleteSelectedElements")] }));
+    };
+    return (_jsxs(_Fragment, { children: [renderSidebars(), !appState.viewModeEnabled && renderToolbar(), !appState.openMenu && appState.showStats && (_jsx(Stats, { appState: appState, setAppState: setAppState, elements: elements, onClose: () => {
+                    actionManager.executeAction(actionToggleStats);
+                }, renderCustomStats: renderCustomStats })), _jsx("div", { className: "App-bottom-bar", style: {
+                    marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+                    marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+                    marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+                }, children: _jsxs(Island, { padding: 0, children: [appState.openMenu === "shape" &&
+                            !appState.viewModeEnabled &&
+                            showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elements: elements, renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
+                                    !appState.openMenu &&
+                                    !appState.openSidebar && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                                        setAppState((appState) => ({
+                                            ...calculateScrollCenter(elements, appState),
+                                        }));
+                                    }, children: t("buttons.scrollBackToContent") }))] })] }) })] }));
+};

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Modal.scss";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { KEYS } from "../keys";
+import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
+export const Modal = (props) => {
+    const { closeOnClickOutside = true } = props;
+    const modalRoot = useCreatePortalContainer({
+        className: "excalidraw-modal-container",
+    });
+    if (!modalRoot) {
+        return null;
+    }
+    const handleKeydown = (event) => {
+        if (event.key === KEYS.ESCAPE) {
+            event.nativeEvent.stopImmediatePropagation();
+            event.stopPropagation();
+            props.onCloseRequest();
+        }
+    };
+    return createPortal(_jsxs("div", { className: clsx("Modal", props.className), role: "dialog", "aria-modal": "true", onKeyDown: handleKeydown, "aria-labelledby": props.labelledBy, "data-prevent-outside-click": true, children: [_jsx("div", { className: "Modal__background", onClick: closeOnClickOutside ? props.onCloseRequest : undefined }), _jsx("div", { className: "Modal__content", style: { "--max-width": `${props.maxWidth}px` }, tabIndex: 0, children: props.children })] }), modalRoot);
+};

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

@@ -0,0 +1,121 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  &.excalidraw-modal-container {
+    position: absolute;
+    z-index: var(--zIndex-modal);
+  }
+
+  .Modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    padding: calc(var(--space-factor) * 10);
+
+    display: flex;
+    flex-direction: column;
+
+    .Island {
+      padding: 2.5rem;
+    }
+  }
+
+  .Modal__background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: rgba(#121212, 0.2);
+
+    animation: Modal__background__fade-in 0.125s linear forwards;
+  }
+
+  .Modal__content {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    max-width: var(--max-width);
+    max-height: 100%;
+
+    opacity: 0;
+    transform: translateY(10px);
+    animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
+    position: relative;
+    overflow-y: auto;
+
+    // for modals, reset blurry bg
+    background: var(--island-bg-color);
+
+    border: 1px solid var(--dialog-border-color);
+    box-shadow: var(--modal-shadow);
+    border-radius: 6px;
+    box-sizing: border-box;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  @keyframes Modal__background__fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes Modal__content_fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .Modal__close {
+    color: var(--icon-fill-color);
+    margin: 0;
+    padding: 0.375rem;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    border: 0;
+    background-color: transparent;
+    line-height: 0;
+    cursor: pointer;
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  .Dialog--fullscreen {
+    .Modal {
+      padding: 0;
+    }
+
+    .Modal__content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      max-width: 100%;
+      border: 0;
+      border-radius: 0;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAtom } from "jotai";
+import { useTunnels } from "../../context/tunnels";
+import { jotaiScope } from "../../jotai";
+import { Dialog } from "../Dialog";
+import { withInternalFallback } from "../hoc/withInternalFallback";
+import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
+import { FilledButton } from "../FilledButton";
+import { alertTriangleIcon } from "../icons";
+import { Actions, Action } from "./OverwriteConfirmActions";
+import "./OverwriteConfirm.scss";
+const OverwriteConfirmDialog = Object.assign(withInternalFallback("OverwriteConfirmDialog", ({ children }) => {
+    const { OverwriteConfirmDialogTunnel } = useTunnels();
+    const [overwriteConfirmState, setState] = useAtom(overwriteConfirmStateAtom, jotaiScope);
+    if (!overwriteConfirmState.active) {
+        return null;
+    }
+    const handleClose = () => {
+        overwriteConfirmState.onClose();
+        setState((state) => ({ ...state, active: false }));
+    };
+    const handleConfirm = () => {
+        overwriteConfirmState.onConfirm();
+        setState((state) => ({ ...state, active: false }));
+    };
+    return (_jsx(OverwriteConfirmDialogTunnel.In, { children: _jsx(Dialog, { onCloseRequest: handleClose, title: false, size: 916, children: _jsxs("div", { className: "OverwriteConfirm", children: [_jsx("h3", { children: overwriteConfirmState.title }), _jsxs("div", { className: `OverwriteConfirm__Description OverwriteConfirm__Description--color-${overwriteConfirmState.color}`, children: [_jsx("div", { className: "OverwriteConfirm__Description__icon", children: alertTriangleIcon }), _jsx("div", { children: overwriteConfirmState.description }), _jsx("div", { className: "OverwriteConfirm__Description__spacer" }), _jsx(FilledButton, { color: overwriteConfirmState.color, size: "large", label: overwriteConfirmState.actionLabel, onClick: handleConfirm })] }), _jsx(Actions, { children: children })] }) }) }));
+}), {
+    Actions,
+    Action,
+});
+export { OverwriteConfirmDialog };