@excalidraw/excalidraw 0.17.1-7441-e31f307 → 0.17.1-7441-4c9a6f4

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

@@ -0,0 +1,145 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, forwardRef, useImperativeHandle, useCallback, } from "react";
+import { Island } from "../Island";
+import { atom, useSetAtom } from "jotai";
+import { jotaiScope } from "../../jotai";
+import { SidebarPropsContext, } from "./common";
+import { SidebarHeader } from "./SidebarHeader";
+import clsx from "clsx";
+import { useDevice, useExcalidrawSetAppState } from "../App";
+import { updateObject } from "../../utils";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+import { SidebarTrigger } from "./SidebarTrigger";
+import { SidebarTabTriggers } from "./SidebarTabTriggers";
+import { SidebarTabTrigger } from "./SidebarTabTrigger";
+import { SidebarTabs } from "./SidebarTabs";
+import { SidebarTab } from "./SidebarTab";
+import { useUIAppState } from "../../context/ui-appState";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
+import "./Sidebar.scss";
+/**
+ * Flags whether the currently rendered Sidebar is docked or not, for use
+ * in upstream components that need to act on this (e.g. LayerUI to shift the
+ * UI). We use an atom because of potential host app sidebars (for the default
+ * sidebar we could just read from appState.defaultSidebarDockedPreference).
+ *
+ * Since we can only render one Sidebar at a time, we can use a simple flag.
+ */
+export const isSidebarDockedAtom = atom(false);
+export const SidebarInner = forwardRef(({ name, children, onDock, docked, className, ...rest }, ref) => {
+    if (import.meta.env.DEV && onDock && docked == null) {
+        console.warn("Sidebar: `docked` must be set when `onDock` is supplied for the sidebar to be user-dockable. To hide this message, either pass `docked` or remove `onDock`");
+    }
+    const setAppState = useExcalidrawSetAppState();
+    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
+    useLayoutEffect(() => {
+        setIsSidebarDockedAtom(!!docked);
+        return () => {
+            setIsSidebarDockedAtom(false);
+        };
+    }, [setIsSidebarDockedAtom, docked]);
+    const headerPropsRef = useRef({});
+    headerPropsRef.current.onCloseRequest = () => {
+        setAppState({ openSidebar: null });
+    };
+    headerPropsRef.current.onDock = (isDocked) => onDock?.(isDocked);
+    // renew the ref object if the following props change since we want to
+    // rerender. We can't pass down as component props manually because
+    // the <Sidebar.Header/> can be rendered upstream.
+    headerPropsRef.current = updateObject(headerPropsRef.current, {
+        docked,
+        // explicit prop to rerender on update
+        shouldRenderDockButton: !!onDock && docked != null,
+    });
+    const islandRef = useRef(null);
+    useImperativeHandle(ref, () => {
+        return islandRef.current;
+    });
+    const device = useDevice();
+    const closeLibrary = useCallback(() => {
+        const isDialogOpen = !!document.querySelector(".Dialog");
+        // Prevent closing if any dialog is open
+        if (isDialogOpen) {
+            return;
+        }
+        setAppState({ openSidebar: null });
+    }, [setAppState]);
+    useOutsideClick(islandRef, useCallback((event) => {
+        // If click on the library icon, do nothing so that LibraryButton
+        // can toggle library menu
+        if (event.target.closest(".sidebar-trigger")) {
+            return;
+        }
+        if (!docked || !device.editor.canFitSidebar) {
+            closeLibrary();
+        }
+    }, [closeLibrary, docked, device.editor.canFitSidebar]));
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === KEYS.ESCAPE &&
+                (!docked || !device.editor.canFitSidebar)) {
+                closeLibrary();
+            }
+        };
+        document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
+        return () => {
+            document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
+        };
+    }, [closeLibrary, docked, device.editor.canFitSidebar]);
+    return (_jsx(Island, { ...rest, className: clsx("sidebar", { "sidebar--docked": docked }, className), ref: islandRef, children: _jsx(SidebarPropsContext.Provider, { value: headerPropsRef.current, children: children }) }));
+});
+SidebarInner.displayName = "SidebarInner";
+export const Sidebar = Object.assign(forwardRef((props, ref) => {
+    const appState = useUIAppState();
+    const { onStateChange } = props;
+    const refPrevOpenSidebar = useRef(appState.openSidebar);
+    useEffect(() => {
+        if (
+        // closing sidebar
+        ((!appState.openSidebar &&
+            refPrevOpenSidebar?.current?.name === props.name) ||
+            // opening current sidebar
+            (appState.openSidebar?.name === props.name &&
+                refPrevOpenSidebar?.current?.name !== props.name) ||
+            // switching tabs or switching to a different sidebar
+            refPrevOpenSidebar.current?.name === props.name) &&
+            appState.openSidebar !== refPrevOpenSidebar.current) {
+            onStateChange?.(appState.openSidebar?.name !== props.name
+                ? null
+                : appState.openSidebar);
+        }
+        refPrevOpenSidebar.current = appState.openSidebar;
+    }, [appState.openSidebar, onStateChange, props.name]);
+    const [mounted, setMounted] = useState(false);
+    useLayoutEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
+    // We want to render in the next tick (hence `mounted` flag) so that it's
+    // guaranteed to happen after unmount of the previous sidebar (in case the
+    // previous sidebar is mounted after the next one). This is necessary to
+    // prevent flicker of subcomponents that support fallbacks
+    // (e.g. SidebarHeader). This is because we're using flags to determine
+    // whether prefer the fallback component or not (otherwise both will render
+    // initially), and the flag won't be reset in time if the unmount order
+    // it not correct.
+    //
+    // Alternative, and more general solution would be to namespace the fallback
+    // HoC so that state is not shared between subcomponents when the wrapping
+    // component is of the same type (e.g. Sidebar -> SidebarHeader).
+    const shouldRender = mounted && appState.openSidebar?.name === props.name;
+    if (!shouldRender) {
+        return null;
+    }
+    return _createElement(SidebarInner, { ...props, ref: ref, key: props.name });
+}), {
+    Header: SidebarHeader,
+    TabTriggers: SidebarTabTriggers,
+    TabTrigger: SidebarTabTrigger,
+    Tabs: SidebarTabs,
+    Tab: SidebarTab,
+    Trigger: SidebarTrigger,
+});
+Sidebar.displayName = "Sidebar";

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

@@ -0,0 +1,176 @@
+@import "open-color/open-color";
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 5;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+    background-color: var(--sidebar-bg-color);
+    box-shadow: var(--sidebar-shadow);
+
+    pointer-events: var(--ui-pointerEvents);
+
+    :root[dir="rtl"] & {
+      left: 0;
+      right: auto;
+    }
+
+    &--docked {
+      box-shadow: none;
+    }
+
+    overflow: hidden;
+    border-radius: 0;
+    width: calc(#{$right-sidebar-width} - var(--space-factor) * 2);
+
+    border-left: 1px solid var(--sidebar-border-color);
+
+    :root[dir="rtl"] & {
+      border-right: 1px solid var(--sidebar-border-color);
+      border-left: 0;
+    }
+  }
+
+  // ---------------------------- sidebar header ------------------------------
+
+  .sidebar__header {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 1rem 0.75rem;
+    position: relative;
+
+    &::after {
+      content: "";
+      width: calc(100% - 1.5rem);
+      height: 1px;
+      background: var(--sidebar-border-color);
+      position: absolute;
+      bottom: -1px;
+    }
+  }
+
+  .sidebar__header__buttons {
+    gap: 0;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+
+    button {
+      @include outlineButtonStyles;
+      --button-bg: transparent;
+      border: 0 !important;
+
+      width: var(--lg-button-size);
+      height: var(--lg-button-size);
+      padding: 0;
+
+      svg {
+        width: var(--lg-icon-size);
+        height: var(--lg-icon-size);
+      }
+
+      &:hover {
+        background: var(--button-hover-bg, var(--island-bg-color));
+      }
+    }
+
+    .sidebar__dock.selected {
+      svg {
+        stroke: var(--color-primary);
+        fill: var(--color-primary);
+      }
+    }
+  }
+
+  // ---------------------------- sidebar tabs ------------------------------
+
+  .sidebar-tabs-root {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    padding: 1rem 0;
+
+    [role="tabpanel"] {
+      flex: 1;
+      outline: none;
+
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      outline: none;
+    }
+
+    [role="tabpanel"][data-state="inactive"] {
+      display: none !important;
+    }
+
+    [role="tablist"] {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+  }
+
+  .sidebar-tabs-root > .sidebar__header {
+    padding-top: 0;
+    padding-bottom: 1rem;
+  }
+
+  .sidebar-tab-trigger {
+    --button-width: auto;
+    --button-bg: transparent;
+    --button-hover-bg: transparent;
+    --button-active-bg: var(--color-primary);
+    --button-hover-color: var(--color-primary);
+    --button-hover-border: var(--color-primary);
+
+    &[data-state="active"] {
+      --button-bg: var(--color-primary);
+      --button-hover-bg: var(--color-primary-darker);
+      --button-hover-color: var(--color-icon-white);
+      --button-border: var(--color-primary);
+      color: var(--color-icon-white);
+    }
+  }
+
+  // ---------------------------- default sidebar ------------------------------
+
+  .default-sidebar {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-triggers {
+      $padding: 2px;
+      $border: 1px;
+      display: flex;
+      gap: 0;
+      padding: $padding;
+      // offset by padding + border to vertically center the list with sibling
+      // buttons (both from top and bototm, due to flex layout)
+      margin-top: -#{$padding + $border};
+      margin-bottom: -#{$padding + $border};
+      border: $border solid var(--sidebar-border-color);
+      background: var(--default-bg-color);
+      border-radius: 0.625rem;
+
+      .sidebar-tab-trigger {
+        height: var(--lg-button-size);
+        width: var(--lg-button-size);
+
+        border: none;
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/Sidebar/SidebarHeader.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useContext } from "react";
+import { t } from "../../i18n";
+import { useDevice } from "../App";
+import { SidebarPropsContext } from "./common";
+import { CloseIcon, PinIcon } from "../icons";
+import { Tooltip } from "../Tooltip";
+import { Button } from "../Button";
+export const SidebarHeader = ({ children, className, }) => {
+    const device = useDevice();
+    const props = useContext(SidebarPropsContext);
+    const renderDockButton = !!(device.editor.canFitSidebar && props.shouldRenderDockButton);
+    return (_jsxs("div", { className: clsx("sidebar__header", className), "data-testid": "sidebar-header", children: [children, _jsxs("div", { className: "sidebar__header__buttons", children: [renderDockButton && (_jsx(Tooltip, { label: t("labels.sidebarLock"), children: _jsx(Button, { onSelect: () => props.onDock?.(!props.docked), selected: !!props.docked, className: "sidebar__dock", "data-testid": "sidebar-dock", "aria-label": t("labels.sidebarLock"), children: PinIcon }) })), _jsx(Button, { "data-testid": "sidebar-close", className: "sidebar__close", onSelect: props.onCloseRequest, "aria-label": t("buttons.close"), children: CloseIcon })] })] }));
+};
+SidebarHeader.displayName = "SidebarHeader";

package/dist/packages/excalidraw/components/Sidebar/SidebarTab.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+export const SidebarTab = ({ tab, children, ...rest }) => {
+    return (_jsx(RadixTabs.Content, { ...rest, value: tab, children: children }));
+};
+SidebarTab.displayName = "SidebarTab";

package/dist/packages/excalidraw/components/Sidebar/SidebarTabTrigger.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+export const SidebarTabTrigger = ({ children, tab, onSelect, ...rest }) => {
+    return (_jsx(RadixTabs.Trigger, { value: tab, asChild: true, onSelect: onSelect, children: _jsx("button", { type: "button", className: `excalidraw-button sidebar-tab-trigger`, ...rest, children: children }) }));
+};
+SidebarTabTrigger.displayName = "SidebarTabTrigger";

package/dist/packages/excalidraw/components/Sidebar/SidebarTabTriggers.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+export const SidebarTabTriggers = ({ children, ...rest }) => {
+    return (_jsx(RadixTabs.List, { className: "sidebar-triggers", ...rest, children: children }));
+};
+SidebarTabTriggers.displayName = "SidebarTabTriggers";

package/dist/packages/excalidraw/components/Sidebar/SidebarTabs.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { useUIAppState } from "../../context/ui-appState";
+import { useExcalidrawSetAppState } from "../App";
+export const SidebarTabs = ({ children, ...rest }) => {
+    const appState = useUIAppState();
+    const setAppState = useExcalidrawSetAppState();
+    if (!appState.openSidebar) {
+        return null;
+    }
+    const { name } = appState.openSidebar;
+    return (_jsx(RadixTabs.Root, { className: "sidebar-tabs-root", value: appState.openSidebar.tab, onValueChange: (tab) => setAppState((state) => ({
+            ...state,
+            openSidebar: { ...state.openSidebar, name, tab },
+        })), ...rest, children: children }));
+};
+SidebarTabs.displayName = "SidebarTabs";

package/dist/packages/excalidraw/components/Sidebar/SidebarTrigger.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useExcalidrawSetAppState } from "../App";
+import { useUIAppState } from "../../context/ui-appState";
+import clsx from "clsx";
+import "./SidebarTrigger.scss";
+export const SidebarTrigger = ({ name, tab, icon, title, children, onToggle, className, style, }) => {
+    const setAppState = useExcalidrawSetAppState();
+    const appState = useUIAppState();
+    return (_jsxs("label", { title: title, className: "sidebar-trigger__label-element", children: [_jsx("input", { className: "ToolIcon_type_checkbox", type: "checkbox", onChange: (event) => {
+                    document
+                        .querySelector(".layer-ui__wrapper")
+                        ?.classList.remove("animate");
+                    const isOpen = event.target.checked;
+                    setAppState({ openSidebar: isOpen ? { name, tab } : null });
+                    onToggle?.(isOpen);
+                }, checked: appState.openSidebar?.name === name, "aria-label": title, "aria-keyshortcuts": "0" }), _jsxs("div", { className: clsx("sidebar-trigger", className), style: style, children: [icon && _jsx("div", { children: icon }), children && _jsx("div", { className: "sidebar-trigger__label", children: children })] })] }));
+};
+SidebarTrigger.displayName = "SidebarTrigger";

package/dist/packages/excalidraw/components/Sidebar/SidebarTrigger.scss

@@ -0,0 +1,37 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .sidebar-trigger {
+    @include outlineButtonStyles;
+    @include filledButtonOnCanvas;
+
+    width: auto;
+    height: var(--lg-button-size);
+
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    line-height: 0;
+
+    font-size: 0.75rem;
+    letter-spacing: 0.4px;
+
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+
+    &__label-element {
+      align-self: flex-start;
+    }
+  }
+
+  .default-sidebar-trigger .sidebar-trigger__label {
+    display: block;
+  }
+
+  &.excalidraw--mobile .default-sidebar-trigger .sidebar-trigger__label {
+    display: none;
+  }
+}

package/dist/packages/excalidraw/components/Sidebar/common.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const SidebarPropsContext = React.createContext({});

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Spinner.scss";
+const Spinner = ({ size = "1em", circleWidth = 8, synchronized = false, }) => {
+    const mountTime = React.useRef(Date.now());
+    const mountDelay = -(mountTime.current % 1600);
+    return (_jsx("div", { className: "Spinner", children: _jsx("svg", { viewBox: "0 0 100 100", style: {
+                width: size,
+                height: size,
+                // fix for remounting causing spinner flicker
+                ["--spinner-delay"]: synchronized ? `${mountDelay}ms` : 0,
+            }, children: _jsx("circle", { cx: "50", cy: "50", r: 50 - circleWidth / 2, strokeWidth: circleWidth, fill: "none", strokeMiterlimit: "10" }) }) }));
+};
+export default Spinner;

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

@@ -0,0 +1,49 @@
+@import "open-color/open-color.scss";
+
+$duration: 1.6s;
+
+.excalidraw {
+  .Spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    --spinner-color: var(--icon-fill-color);
+
+    svg {
+      animation: rotate $duration linear infinite;
+      animation-delay: var(--spinner-delay);
+      transform-origin: center center;
+    }
+
+    circle {
+      stroke: var(--spinner-color);
+      animation: dash $duration linear 0s infinite;
+      stroke-linecap: round;
+    }
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 300;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 150, 300;
+      stroke-dashoffset: -200;
+    }
+    100% {
+      stroke-dasharray: 1, 300;
+      stroke-dashoffset: -280;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Stack.scss";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const RowStack = forwardRef(({ children, gap, align, justifyContent, className, style }, ref) => {
+    return (_jsx("div", { className: clsx("Stack Stack_horizontal", className), style: {
+            "--gap": gap,
+            alignItems: align,
+            justifyContent,
+            ...style,
+        }, ref: ref, children: children }));
+});
+const ColStack = forwardRef(({ children, gap, align, justifyContent, className, style }, ref) => {
+    return (_jsx("div", { className: clsx("Stack Stack_vertical", className), style: {
+            "--gap": gap,
+            justifyItems: align,
+            justifyContent,
+            ...style,
+        }, ref: ref, children: children }));
+});
+export default {
+    Row: RowStack,
+    Col: ColStack,
+};

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

@@ -0,0 +1,19 @@
+.excalidraw {
+  .Stack {
+    --gap: 0;
+    display: grid;
+    gap: calc(var(--space-factor) * var(--gap));
+  }
+
+  .Stack_vertical {
+    grid-template-columns: auto;
+    grid-auto-flow: row;
+    grid-auto-rows: min-content;
+  }
+
+  .Stack_horizontal {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+    grid-auto-columns: min-content;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getCommonBounds } from "../element/bounds";
+import { t } from "../i18n";
+import { getTargetElements } from "../scene";
+import { CloseIcon } from "./icons";
+import { Island } from "./Island";
+import "./Stats.scss";
+export const Stats = (props) => {
+    const boundingBox = getCommonBounds(props.elements);
+    const selectedElements = getTargetElements(props.elements, props.appState);
+    const selectedBoundingBox = getCommonBounds(selectedElements);
+    return (_jsx("div", { className: "Stats", children: _jsxs(Island, { padding: 2, children: [_jsx("div", { className: "close", onClick: props.onClose, children: CloseIcon }), _jsx("h3", { children: t("stats.title") }), _jsx("table", { children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("th", { colSpan: 2, children: t("stats.scene") }) }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.elements") }), _jsx("td", { children: props.elements.length })] }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.width") }), _jsx("td", { children: Math.round(boundingBox[2]) - Math.round(boundingBox[0]) })] }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.height") }), _jsx("td", { children: Math.round(boundingBox[3]) - Math.round(boundingBox[1]) })] }), selectedElements.length === 1 && (_jsx("tr", { children: _jsx("th", { colSpan: 2, children: t("stats.element") }) })), selectedElements.length > 1 && (_jsxs(_Fragment, { children: [_jsx("tr", { children: _jsx("th", { colSpan: 2, children: t("stats.selected") }) }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.elements") }), _jsx("td", { children: selectedElements.length })] })] })), selectedElements.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { children: "x" }), _jsx("td", { children: Math.round(selectedBoundingBox[0]) })] }), _jsxs("tr", { children: [_jsx("td", { children: "y" }), _jsx("td", { children: Math.round(selectedBoundingBox[1]) })] }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.width") }), _jsx("td", { children: Math.round(selectedBoundingBox[2] - selectedBoundingBox[0]) })] }), _jsxs("tr", { children: [_jsx("td", { children: t("stats.height") }), _jsx("td", { children: Math.round(selectedBoundingBox[3] - selectedBoundingBox[1]) })] })] })), selectedElements.length === 1 && (_jsxs("tr", { children: [_jsx("td", { children: t("stats.angle") }), _jsx("td", { children: `${Math.round((selectedElements[0].angle * 180) / Math.PI)}°` })] })), props.renderCustomStats?.(props.elements, props.appState)] }) })] }) }));
+};

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

@@ -0,0 +1,54 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .Stats {
+    position: absolute;
+    top: 64px;
+    right: 12px;
+    font-size: 12px;
+    z-index: 10;
+    pointer-events: var(--ui-pointerEvents);
+
+    h3 {
+      margin: 0 24px 8px 0;
+      white-space: nowrap;
+    }
+
+    .close {
+      float: right;
+      height: 16px;
+      width: 16px;
+      cursor: pointer;
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    table {
+      width: 100%;
+      th {
+        border-bottom: 1px solid var(--input-border-color);
+        padding: 4px;
+      }
+      tr {
+        td:nth-child(2) {
+          min-width: 24px;
+          text-align: right;
+        }
+      }
+    }
+
+    :root[dir="rtl"] & {
+      left: 12px;
+      right: initial;
+
+      h3 {
+        margin: 0 0 8px 24px;
+      }
+      .close {
+        float: left;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import "./Switch.scss";
+export const Switch = ({ title, name, checked, onChange, disabled = false, }) => {
+    return (_jsx("div", { className: clsx("Switch", { toggled: checked, disabled }), children: _jsx("input", { name: name, id: name, title: title, type: "checkbox", checked: checked, disabled: disabled, onChange: () => onChange(!checked), onKeyDown: (event) => {
+                if (event.key === " ") {
+                    onChange(!checked);
+                }
+            } }) }));
+};