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

package/dist/packages/excalidraw/components/footer/Footer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { actionShortcuts } from "../../actions";
+import { ExitZenModeAction, FinalizeAction, UndoRedoActions, ZoomActions, } from "../Actions";
+import { useDevice } from "../App";
+import { useTunnels } from "../../context/tunnels";
+import { HelpButton } from "../HelpButton";
+import { Section } from "../Section";
+import Stack from "../Stack";
+const Footer = ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, }) => {
+    const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
+    const device = useDevice();
+    const showFinalize = !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
+    return (_jsxs("footer", { role: "contentinfo", className: "layer-ui__wrapper__footer App-menu App-menu_bottom", children: [_jsx("div", { className: clsx("layer-ui__wrapper__footer-left zen-mode-transition", {
+                    "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled,
+                }), children: _jsx(Stack.Col, { gap: 2, children: _jsxs(Section, { heading: "canvasActions", children: [_jsx(ZoomActions, { renderAction: actionManager.renderAction, zoom: appState.zoom }), !appState.viewModeEnabled && (_jsx(UndoRedoActions, { renderAction: actionManager.renderAction, className: clsx("zen-mode-transition", {
+                                    "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled,
+                                }) })), showFinalize && (_jsx(FinalizeAction, { renderAction: actionManager.renderAction, className: clsx("zen-mode-transition", {
+                                    "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled,
+                                }) }))] }) }) }), _jsx(FooterCenterTunnel.Out, {}), _jsx("div", { className: clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
+                    "transition-right": appState.zenModeEnabled,
+                }), children: _jsxs("div", { style: { position: "relative" }, children: [renderWelcomeScreen && _jsx(WelcomeScreenHelpHintTunnel.Out, {}), _jsx(HelpButton, { onClick: () => actionManager.executeAction(actionShortcuts) })] }) }), _jsx(ExitZenModeAction, { actionManager: actionManager, showExitZenModeBtn: showExitZenModeBtn })] }));
+};
+export default Footer;
+Footer.displayName = "Footer";

package/dist/packages/excalidraw/components/footer/FooterCenter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTunnels } from "../../context/tunnels";
+import "./FooterCenter.scss";
+import { useUIAppState } from "../../context/ui-appState";
+const FooterCenter = ({ children }) => {
+    const { FooterCenterTunnel } = useTunnels();
+    const appState = useUIAppState();
+    return (_jsx(FooterCenterTunnel.In, { children: _jsx("div", { className: clsx("footer-center zen-mode-transition", {
+                "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled,
+            }), children: children }) }));
+};
+export default FooterCenter;
+FooterCenter.displayName = "FooterCenter";

package/dist/packages/excalidraw/components/footer/FooterCenter.scss

@@ -0,0 +1,11 @@
+.footer-center {
+  pointer-events: none;
+  & > * {
+    pointer-events: var(--ui-pointerEvents);
+  }
+
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin-inline-end: 0.6rem;
+}

package/dist/packages/excalidraw/components/hoc/withInternalFallback.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { atom, useAtom } from "jotai";
+import { useLayoutEffect, useRef } from "react";
+import { useTunnels } from "../../context/tunnels";
+export const withInternalFallback = (componentName, Component) => {
+    const renderAtom = atom(0);
+    const WrapperComponent = (props) => {
+        const { jotaiScope } = useTunnels();
+        // for rerenders
+        const [, setCounter] = useAtom(renderAtom, jotaiScope);
+        // for initial & subsequent renders. Tracked as component state
+        // due to excalidraw multi-instance scanerios.
+        const metaRef = useRef({
+            // flag set on initial render to tell the fallback component to skip the
+            // render until mount counter are initialized. This is because the counter
+            // is initialized in an effect, and thus we could end rendering both
+            // components at the same time until counter is initialized.
+            preferHost: false,
+            counter: 0,
+        });
+        useLayoutEffect(() => {
+            const meta = metaRef.current;
+            setCounter((c) => {
+                const next = c + 1;
+                meta.counter = next;
+                return next;
+            });
+            return () => {
+                setCounter((c) => {
+                    const next = c - 1;
+                    meta.counter = next;
+                    if (!next) {
+                        meta.preferHost = false;
+                    }
+                    return next;
+                });
+            };
+        }, [setCounter]);
+        if (!props.__fallback) {
+            metaRef.current.preferHost = true;
+        }
+        // ensure we don't render fallback and host components at the same time
+        if (
+        // either before the counters are initialized
+        (!metaRef.current.counter &&
+            props.__fallback &&
+            metaRef.current.preferHost) ||
+            // or after the counters are initialized, and both are rendered
+            // (this is the default when host renders as well)
+            (metaRef.current.counter > 1 && props.__fallback)) {
+            return null;
+        }
+        return _jsx(Component, { ...props });
+    };
+    WrapperComponent.displayName = componentName;
+    return WrapperComponent;
+};

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

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+//
+// All icons are imported from https://fontawesome.com/icons?d=gallery
+// Icons are under the license https://fontawesome.com/license
+//
+// Note: when adding new icons, review https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines
+// to determine whether or not the icons should be mirrored in right-to-left languages.
+import React from "react";
+import oc from "open-color";
+import clsx from "clsx";
+import { THEME } from "../constants";
+export const iconFillColor = (theme) => "var(--icon-fill-color)";
+const handlerColor = (theme) => theme === THEME.LIGHT ? oc.white : "#1e1e1e";
+export const createIcon = (d, opts = 512) => {
+    const { width = 512, height = width, mirror, style, ...rest } = typeof opts === "number" ? { width: opts } : opts;
+    return (_jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", viewBox: `0 0 ${width} ${height}`, className: clsx({ "rtl-mirror": mirror }), style: style, ...rest, children: typeof d === "string" ? _jsx("path", { fill: "currentColor", d: d }) : d }));
+};
+const tablerIconProps = {
+    width: 24,
+    height: 24,
+    fill: "none",
+    strokeWidth: 2,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+};
+const modifiedTablerIconProps = {
+    width: 20,
+    height: 20,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+};
+// -----------------------------------------------------------------------------
+// tabler-icons: present
+export const PlusPromoIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("rect", { x: 3, y: 8, width: 18, height: 4, rx: 1 }), _jsx("line", { x1: 12, y1: 8, x2: 12, y2: 21 }), _jsx("path", { d: "M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7" }), _jsx("path", { d: "M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5" })] }), tablerIconProps);
+// tabler-icons: book
+export const LibraryIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" }), _jsx("path", { d: "M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" }), _jsx("line", { x1: "3", y1: "6", x2: "3", y2: "19" }), _jsx("line", { x1: "12", y1: "6", x2: "12", y2: "19" }), _jsx("line", { x1: "21", y1: "6", x2: "21", y2: "19" })] }), tablerIconProps);
+// tabler-icons: plus
+export const PlusIcon = createIcon(_jsxs("svg", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }), tablerIconProps);
+// tabler-icons: dots-vertical
+export const DotsIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "12", cy: "19", r: "1" }), _jsx("circle", { cx: "12", cy: "5", r: "1" })] }), tablerIconProps);
+// tabler-icons: pinned
+export const PinIcon = createIcon(_jsxs("svg", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M9 4v6l-2 4v2h10v-2l-2 -4v-6" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "21" }), _jsx("line", { x1: "8", y1: "4", x2: "16", y2: "4" })] }), tablerIconProps);
+// tabler-icons: lock-open (via Figma)
+export const UnlockedIcon = createIcon(_jsxs("g", { children: [_jsx("path", { d: "M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "UnlockedIcon", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: 6, y: 1, width: 9, height: 9, children: _jsx("path", { stroke: "none", d: "M6.399 9.561V5.175c0-.93.401-1.823 1.116-2.48a3.981 3.981 0 0 1 2.693-1.028c1.01 0 1.98.37 2.694 1.027.715.658 1.116 1.55 1.116 2.481", fill: "#fff" }) }), _jsx("g", { mask: "url(#UnlockedIcon)", children: _jsx("path", { stroke: "none", d: "M5.149 9.561v1.25h2.5v-1.25h-2.5Zm5.06-7.894V.417v1.25Zm2.559 3.508v1.25h2.5v-1.25h-2.5ZM7.648 8.51V5.175h-2.5V8.51h2.5Zm0-3.334c0-.564.243-1.128.713-1.561L6.668 1.775c-.959.883-1.52 2.104-1.52 3.4h2.5Zm.713-1.561a2.732 2.732 0 0 1 1.847-.697v-2.5c-1.31 0-2.585.478-3.54 1.358L8.36 3.614Zm1.847-.697c.71 0 1.374.26 1.847.697l1.694-1.839a5.231 5.231 0 0 0-3.54-1.358v2.5Zm1.847.697c.47.433.713.997.713 1.561h2.5c0-1.296-.56-2.517-1.52-3.4l-1.693 1.839Z", fill: "currentColor" }) })] }), modifiedTablerIconProps);
+// tabler-icons: lock (via Figma)
+export const LockedIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z" }), _jsx("path", { d: "M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z" }), _jsx("path", { d: "M6.667 8.333V5.417C6.667 3.806 8.159 2.5 10 2.5c1.841 0 3.333 1.306 3.333 2.917v2.916" })] }), modifiedTablerIconProps);
+// custom
+export const WelcomeScreenMenuArrow = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { d: "M38.5 83.5c-14-2-17.833-10.473-21-22.5C14.333 48.984 12 22 12 12.5", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m12.005 10.478 7.905 14.423L6 25.75l6.005-15.273Z", fill: "currentColor" }), _jsx("path", { d: "M12.005 10.478c1.92 3.495 3.838 7 7.905 14.423m-7.905-14.423c3.11 5.683 6.23 11.368 7.905 14.423m0 0c-3.68.226-7.35.455-13.91.85m13.91-.85c-5.279.33-10.566.647-13.91.85m0 0c1.936-4.931 3.882-9.86 6.005-15.273M6 25.75c2.069-5.257 4.135-10.505 6.005-15.272", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" })] }), { width: 41, height: 94, fill: "none" });
+// custom
+export const WelcomeScreenHelpArrow = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { d: "M18.026 1.232c-5.268 13.125-5.548 33.555 3.285 42.311 8.823 8.75 33.31 12.304 42.422 13.523", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m72.181 59.247-13.058-10-2.948 13.62 16.006-3.62Z", fill: "currentColor" }), _jsx("path", { d: "M72.181 59.247c-3.163-2.429-6.337-4.856-13.058-10m13.058 10c-5.145-3.936-10.292-7.882-13.058-10m0 0c-.78 3.603-1.563 7.196-2.948 13.62m2.948-13.62c-1.126 5.168-2.24 10.346-2.948 13.62m0 0c5.168-1.166 10.334-2.343 16.006-3.62m-16.006 3.62c5.51-1.248 11.01-2.495 16.006-3.62", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" })] }), { width: 85, height: 71, fill: "none" });
+// custom
+export const WelcomeScreenTopToolbarArrow = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { d: "M1 77c14-2 31.833-11.973 35-24 3.167-12.016-6-35-9.5-43.5", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m24.165 1.093-2.132 16.309 13.27-4.258-11.138-12.05Z", fill: "currentColor" }), _jsx("path", { d: "M24.165 1.093c-.522 3.953-1.037 7.916-2.132 16.309m2.131-16.309c-.835 6.424-1.68 12.854-2.13 16.308m0 0c3.51-1.125 7.013-2.243 13.27-4.257m-13.27 4.257c5.038-1.608 10.08-3.232 13.27-4.257m0 0c-3.595-3.892-7.197-7.777-11.14-12.05m11.14 12.05c-3.837-4.148-7.667-8.287-11.14-12.05", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" })] }), { width: 38, height: 78, fill: "none" });
+// custom
+export const ExcalLogo = createIcon(_jsx("g", { fill: "currentColor", children: _jsx("path", { d: "M39.9 32.889a.326.326 0 0 0-.279-.056c-2.094-3.083-4.774-6-7.343-8.833l-.419-.472a.212.212 0 0 0-.056-.139.586.586 0 0 0-.167-.111l-.084-.083-.056-.056c-.084-.167-.28-.278-.475-.167-.782.39-1.507.973-2.206 1.528-.92.722-1.842 1.445-2.708 2.25a8.405 8.405 0 0 0-.977 1.028c-.14.194-.028.361.14.444-.615.611-1.23 1.223-1.843 1.861a.315.315 0 0 0-.084.223c0 .083.056.166.111.194l1.09.833v.028c1.535 1.528 4.244 3.611 7.12 5.861.418.334.865.667 1.284 1 .195.223.39.473.558.695.084.11.28.139.391.055.056.056.14.111.196.167a.398.398 0 0 0 .167.056.255.255 0 0 0 .224-.111.394.394 0 0 0 .055-.167c.029 0 .028.028.056.028a.318.318 0 0 0 .224-.084l5.082-5.528a.309.309 0 0 0 0-.444Zm-14.63-1.917a.485.485 0 0 0 .111.14c.586.5 1.2 1 1.843 1.555l-2.569-1.945-.251-.166c-.056-.028-.112-.084-.168-.111l-.195-.167.056-.056.055-.055.112-.111c.866-.861 2.346-2.306 3.1-3.028-.81.805-2.43 3.167-2.095 3.944Zm8.767 6.89-2.122-1.612a44.713 44.713 0 0 0-2.625-2.5c1.145.861 2.122 1.611 2.262 1.75 1.117.972 1.06.806 1.815 1.445l.921.666a1.06 1.06 0 0 1-.251.25Zm.558.416-.056-.028c.084-.055.168-.111.252-.194l-.196.222ZM1.089 5.75c.055.361.14.722.195 1.056.335 1.833.67 3.5 1.284 4.75l.252.944c.084.361.223.806.363.917 1.424 1.25 3.602 3.11 5.947 4.889a.295.295 0 0 0 .363 0s0 .027.028.027a.254.254 0 0 0 .196.084.318.318 0 0 0 .223-.084c2.988-3.305 5.221-6.027 6.813-8.305.112-.111.14-.278.14-.417.111-.111.195-.25.307-.333.111-.111.111-.306 0-.39l-.028-.027c0-.055-.028-.139-.084-.167-.698-.666-1.2-1.138-1.731-1.638-.922-.862-1.871-1.75-3.881-3.75l-.028-.028c-.028-.028-.056-.056-.112-.056-.558-.194-1.703-.389-3.127-.639C6.087 2.223 3.21 1.723.614.944c0 0-.168 0-.196.028l-.083.084c-.028.027-.056.055-.224.11h.056-.056c.028.167.028.278.084.473 0 .055.112.5.112.555l.782 3.556Zm15.496 3.278-.335-.334c.084.112.196.195.335.334Zm-3.546 4.666-.056.056c0-.028.028-.056.056-.056Zm-2.038-10c.168.167.866.834 1.033.973-.726-.334-2.54-1.167-3.379-1.445.838.167 1.983.334 2.346.472ZM1.424 2.306c.419.722.754 3.222 1.089 5.666-.196-.778-.335-1.555-.503-2.278-.251-1.277-.503-2.416-.838-3.416.056 0 .14 0 .252.028Zm-.168-.584c-.112 0-.223-.028-.307-.028 0-.027 0-.055-.028-.055.14 0 .223.028.335.083Zm-1.089.222c0-.027 0-.027 0 0ZM39.453 1.333c.028-.11-.558-.61-.363-.639.42-.027.42-.666 0-.666-.558.028-1.144.166-1.675.25-.977.194-1.982.389-2.96.61-2.205.473-4.383.973-6.561 1.557-.67.194-1.424.333-2.066.666-.224.111-.196.333-.084.472-.056.028-.084.028-.14.056-.195.028-.363.056-.558.083-.168.028-.252.167-.224.334 0 .027.028.083.028.11-1.173 1.556-2.485 3.195-3.909 4.945-1.396 1.611-2.876 3.306-4.356 5.056-4.719 5.5-10.052 11.75-15.943 17.25a.268.268 0 0 0 0 .389c.028.027.056.055.084.055-.084.084-.168.14-.252.222-.056.056-.084.111-.084.167a.605.605 0 0 0-.111.139c-.112.111-.112.305.028.389.111.11.307.11.39-.028.029-.028.029-.056.056-.056a.44.44 0 0 1 .615 0c.335.362.67.723.977 1.028l-.698-.583c-.112-.111-.307-.083-.39.028-.113.11-.085.305.027.389l7.427 6.194c.056.056.112.056.196.056s.14-.028.195-.084l.168-.166c.028.027.083.027.111.027.084 0 .14-.027.196-.083 10.052-10.055 18.15-17.639 27.42-24.417.083-.055.111-.166.111-.25.112 0 .196-.083.251-.194 1.704-5.194 2.039-9.806 2.15-12.083v-.028c0-.028.028-.056.028-.083.028-.056.028-.084.028-.084a1.626 1.626 0 0 0-.111-1.028ZM21.472 9.5c.446-.5.893-1.028 1.34-1.5-2.876 3.778-7.65 9.583-14.408 16.5 4.607-5.083 9.242-10.333 13.068-15ZM5.193 35.778h.084-.084Zm3.462 3.194c-.027-.028-.027-.028 0-.028v.028Zm4.16-3.583c.224-.25.448-.472.699-.722 0 0 0 .027.028.027-.252.223-.475.445-.726.695Zm1.146-1.111c.14-.14.279-.334.446-.5l.028-.028c1.648-1.694 3.351-3.389 5.082-5.111l.028-.028c.419-.333.921-.694 1.368-1.028a379.003 379.003 0 0 0-6.952 6.695ZM24.794 6.472c-.921 1.195-1.954 2.778-2.82 4.028-2.736 3.944-11.532 13.583-11.727 13.75a1976.983 1976.983 0 0 1-8.042 7.639l-.167.167c-.14-.167-.14-.417.028-.556C14.49 19.861 22.03 10.167 25.074 5.917c-.084.194-.14.36-.28.555Zm4.83 5.695c-1.116-.64-1.646-1.64-1.34-2.611l.084-.334c.028-.083.084-.194.14-.277.307-.5.754-.917 1.257-1.167.027 0 .055 0 .083-.028-.028-.056-.028-.139-.028-.222.028-.167.14-.278.335-.278.335 0 1.369.306 1.76.639.111.083.223.194.335.305.14.167.363.445.474.667.056.028.112.306.196.445.056.222.111.472.084.694-.028.028 0 .194-.028.194a2.668 2.668 0 0 1-.363 1.028c-.028.028-.028.056-.056.084l-.028.027c-.14.223-.335.417-.53.556-.643.444-1.369.583-2.095.389 0 0-.195-.084-.28-.111Zm8.154-.834a39.098 39.098 0 0 1-.893 3.167c0 .028-.028.083 0 .111-.056 0-.084.028-.14.056-2.206 1.61-4.356 3.305-6.506 5.028 1.843-1.64 3.686-3.306 5.613-4.945.558-.5.949-1.139 1.06-1.861l.28-1.667v-.055c.14-.334.67-.195.586.166Z", fill: "currentColor" }) }), { width: 40, height: 40, fill: "none" });
+// custom
+export const SelectionIcon = createIcon(_jsxs("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 6l4.153 11.793a0.365 .365 0 0 0 .331 .207a0.366 .366 0 0 0 .332 -.207l2.184 -4.793l4.787 -1.994a0.355 .355 0 0 0 .213 -.323a0.355 .355 0 0 0 -.213 -.323l-11.787 -4.36z" }), _jsx("path", { d: "M13.5 13.5l4.5 4.5" })] }), { fill: "none", width: 22, height: 22, strokeWidth: 1.25 });
+// tabler-icons: square
+export const RectangleIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" })] }), tablerIconProps);
+// tabler-icons: square-rotated
+export const DiamondIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10.5 20.4l-6.9 -6.9c-.781 -.781 -.781 -2.219 0 -3l6.9 -6.9c.781 -.781 2.219 -.781 3 0l6.9 6.9c.781 .781 .781 2.219 0 3l-6.9 6.9c-.781 .781 -2.219 .781 -3 0z" })] }), tablerIconProps);
+// tabler-icons: circle
+export const EllipseIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("circle", { cx: "12", cy: "12", r: "9" })] }), tablerIconProps);
+// tabler-icons: arrow-narrow-right
+export const ArrowIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), _jsx("line", { x1: "15", y1: "16", x2: "19", y2: "12" }), _jsx("line", { x1: "15", y1: "8", x2: "19", y2: "12" })] }), tablerIconProps);
+// custom?
+export const LineIcon = createIcon(_jsx("path", { d: "M4.167 10h11.666", strokeWidth: "1.5" }), modifiedTablerIconProps);
+export const PenModeIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z" }), _jsx("path", { d: "M16 7h4" }), _jsx("path", { d: "M18 19h-13a2 2 0 1 1 0 -4h4a2 2 0 1 0 0 -4h-3" })] }), tablerIconProps);
+// modified tabler-icons: pencil
+export const FreedrawIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { clipRule: "evenodd", d: "m7.643 15.69 7.774-7.773a2.357 2.357 0 1 0-3.334-3.334L4.31 12.357a3.333 3.333 0 0 0-.977 2.357v1.953h1.953c.884 0 1.732-.352 2.357-.977Z" }), _jsx("path", { d: "m11.25 5.417 3.333 3.333" })] }), modifiedTablerIconProps);
+// tabler-icons: typography
+export const TextIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "20", x2: "7", y2: "20" }), _jsx("line", { x1: "14", y1: "20", x2: "21", y2: "20" }), _jsx("line", { x1: "6.9", y1: "15", x2: "13.8", y2: "15" }), _jsx("line", { x1: "10.2", y1: "6.3", x2: "16", y2: "20" }), _jsx("polyline", { points: "5 20 11 4 13 4 20 20" })] }), tablerIconProps);
+// modified tabler-icons: photo
+export const ImageIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M12.5 6.667h.01" }), _jsx("path", { d: "M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z" }), _jsx("path", { d: "m3.333 12.5 3.334-3.333c.773-.745 1.726-.745 2.5 0l4.166 4.166" }), _jsx("path", { d: "m11.667 11.667.833-.834c.774-.744 1.726-.744 2.5 0l1.667 1.667" })] }), modifiedTablerIconProps);
+// tabler-icons: eraser
+export const EraserIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M19 20h-10.5l-4.21 -4.3a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9.2 9.3" }), _jsx("path", { d: "M18 13.3l-6.3 -6.3" })] }), tablerIconProps);
+export const ZoomInIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M10 4.167v11.666M4.167 10h11.666" }), modifiedTablerIconProps);
+export const ZoomOutIcon = createIcon(_jsx("path", { d: "M5 10h10", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const TrashIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M3.333 5.833h13.334M8.333 9.167v5M11.667 9.167v5M4.167 5.833l.833 10c0 .92.746 1.667 1.667 1.667h6.666c.92 0 1.667-.746 1.667-1.667l.833-10M7.5 5.833v-2.5c0-.46.373-.833.833-.833h3.334c.46 0 .833.373.833.833v2.5" }), modifiedTablerIconProps);
+export const EmbedIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("polyline", { points: "12 16 18 10 12 4" }), _jsx("polyline", { points: "8 4 2 10 8 16" })] }), modifiedTablerIconProps);
+export const DuplicateIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M14.375 6.458H8.958a2.5 2.5 0 0 0-2.5 2.5v5.417a2.5 2.5 0 0 0 2.5 2.5h5.417a2.5 2.5 0 0 0 2.5-2.5V8.958a2.5 2.5 0 0 0-2.5-2.5Z" }), _jsx("path", { clipRule: "evenodd", d: "M11.667 3.125c.517 0 .986.21 1.325.55.34.338.55.807.55 1.325v1.458H8.333c-.485 0-.927.185-1.26.487-.343.312-.57.75-.609 1.24l-.005 5.357H5a1.87 1.87 0 0 1-1.326-.55 1.87 1.87 0 0 1-.549-1.325V5c0-.518.21-.987.55-1.326.338-.34.807-.549 1.325-.549h6.667Z" })] }), modifiedTablerIconProps);
+export const MoonIcon = createIcon(_jsx("path", { clipRule: "evenodd", d: "M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z", stroke: "currentColor" }), modifiedTablerIconProps);
+export const SunIcon = createIcon(_jsx("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667" }) }), modifiedTablerIconProps);
+export const HamburgerMenuIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }), _jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }), _jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })] }), tablerIconProps);
+export const ExportIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10" }), modifiedTablerIconProps);
+export const HelpIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("line", { x1: "12", y1: "17", x2: "12", y2: "17.01" }), _jsx("path", { d: "M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" })] }), tablerIconProps);
+export const ExternalLinkIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M9.167 5.833H5.833c-1.254 0-2.5 1.282-2.5 2.5v5.834c0 1.283 1.252 2.5 2.5 2.5h5.834c1.251 0 2.5-1.25 2.5-2.5v-3.334M8.333 11.667l8.334-8.334M12.5 3.333h4.167V7.5" }), modifiedTablerIconProps);
+export const GithubIcon = createIcon(_jsx("path", { d: "M7.5 15.833c-3.583 1.167-3.583-2.083-5-2.5m10 4.167v-2.917c0-.833.083-1.166-.417-1.666 2.334-.25 4.584-1.167 4.584-5a3.833 3.833 0 0 0-1.084-2.667 3.5 3.5 0 0 0-.083-2.667s-.917-.25-2.917 1.084a10.25 10.25 0 0 0-5.166 0C5.417 2.333 4.5 2.583 4.5 2.583a3.5 3.5 0 0 0-.083 2.667 3.833 3.833 0 0 0-1.084 2.667c0 3.833 2.25 4.75 4.584 5-.5.5-.5 1-.417 1.666V17.5", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const DiscordIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M7.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM12.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM6.25 6.25c2.917-.833 4.583-.833 7.5 0M5.833 13.75c2.917.833 5.417.833 8.334 0" }), _jsx("path", { d: "M12.917 14.167c0 .833 1.25 2.5 1.666 2.5 1.25 0 2.361-1.39 2.917-2.5.556-1.39.417-4.861-1.25-9.584-1.214-.846-2.5-1.116-3.75-1.25l-.833 2.084M7.083 14.167c0 .833-1.13 2.5-1.526 2.5-1.191 0-2.249-1.39-2.778-2.5-.529-1.39-.397-4.861 1.19-9.584 1.157-.846 2.318-1.116 3.531-1.25l.833 2.084" })] }), modifiedTablerIconProps);
+export const TwitterIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" })] }), tablerIconProps);
+export const checkIcon = createIcon(_jsx("polyline", { fill: "none", stroke: "currentColor", points: "20 6 9 17 4 12" }), {
+    width: 24,
+    height: 24,
+});
+export const LinkIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M8.333 11.667a2.917 2.917 0 0 0 4.167 0l3.333-3.334a2.946 2.946 0 1 0-4.166-4.166l-.417.416" }), _jsx("path", { d: "M11.667 8.333a2.917 2.917 0 0 0-4.167 0l-3.333 3.334a2.946 2.946 0 0 0 4.166 4.166l.417-.416" })] }), modifiedTablerIconProps);
+export const save = createIcon("M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z", { width: 448, height: 512 });
+export const saveAs = createIcon("M252 54L203 8a28 27 0 00-20-8H28C12 0 0 12 0 27v195c0 15 12 26 28 26h204c15 0 28-11 28-26V73a28 27 0 00-8-19zM130 213c-21 0-37-16-37-36 0-19 16-35 37-35 20 0 37 16 37 35 0 20-17 36-37 36zm56-169v56c0 4-4 6-7 6H44c-4 0-7-2-7-6V42c0-4 3-7 7-7h133l4 2 3 2a7 7 0 012 5z M296 201l87 95-188 205-78 9c-10 1-19-8-18-20l9-84zm141-14l-41-44a31 31 0 00-46 0l-38 41 87 95 38-42c13-14 13-36 0-50z", { width: 448, height: 512 });
+// tabler-icon: folder
+export const LoadIcon = createIcon(_jsx("path", { d: "m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const clipboard = createIcon("M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z", { width: 384, height: 512 });
+export const palette = createIcon("M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z");
+export const ExportImageIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15 8h.01" }), _jsx("path", { d: "M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v5" }), _jsx("path", { d: "M4 15l4 -4c.928 -.893 2.072 -.893 3 0l4 4" }), _jsx("path", { d: "M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598" }), _jsx("path", { d: "M19 16v6" }), _jsx("path", { d: "M22 19l-3 3l-3 -3" })] }), tablerIconProps);
+export const exportToFileIcon = createIcon("M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z", { width: 512, height: 512 });
+export const zoomIn = createIcon("M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z", { width: 448, height: 512 });
+export const zoomOut = createIcon("M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z", { width: 448, height: 512 });
+export const done = createIcon("M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z");
+export const menu = createIcon("M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z");
+export const UndoIcon = createIcon(_jsx("path", { d: "M7.5 10.833 4.167 7.5 7.5 4.167M4.167 7.5h9.166a3.333 3.333 0 0 1 0 6.667H12.5", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const RedoIcon = createIcon(_jsx("path", { d: "M12.5 10.833 15.833 7.5 12.5 4.167M15.833 7.5H6.667a3.333 3.333 0 1 0 0 6.667H7.5", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const questionCircle = createIcon("M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z", { mirror: true });
+export const share = createIcon(_jsx("path", { d: "M5 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 17.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM7.25 8.917l5.5-2.834M7.25 11.083l5.5 2.834", strokeWidth: "1.5" }), modifiedTablerIconProps);
+export const shareIOS = createIcon("M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z", { width: 24, height: 24 });
+export const shareWindows = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { fill: "currentColor", d: "M40 5.6v6.1l-4.1.7c-8.9 1.4-16.5 6.9-20.6 15C13 32 10.9 43 12.4 43c.4 0 2.4-1.3 4.4-3 5-3.9 12.1-7 18.2-7.7l5-.6v12.8l11.2-11.3L62.5 22 51.2 10.8 40-.5v6.1zm10.2 22.6L44 34.5v-6.8l-6.9.6c-3.9.3-9.8 1.7-13.2 3.1-3.5 1.4-6.5 2.4-6.7 2.2-.9-1 3-7.5 6.4-10.8C28 18.6 34.4 16 40.1 16c3.7 0 3.9-.1 3.9-3.2V9.5l6.2 6.3 6.3 6.2-6.3 6.2z" }), _jsx("path", { stroke: "currentColor", fill: "currentColor", d: "M0 36v20h48v-6.2c0-6 0-6.1-2-4.3-1.1 1-2 2.9-2 4.2V52H4V34c0-17.3-.1-18-2-18s-2 .7-2 20z" })] }), { width: 64, height: 64 });
+// Icon imported form Storybook
+// Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
+export const resetZoom = createIcon(_jsx("path", { stroke: "currentColor", strokeWidth: "40", fill: "currentColor", d: "M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z" }), { width: 1024 });
+export const BringForwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z", fill: "currentColor" }), _jsx("path", { d: "M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const SendBackwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388", fill: "currentColor" }), _jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const BringToFrontIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z", fill: "currentColor" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const SendToBackIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "SendToBackIcon", fill: "#fff", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z" }) }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z", fill: "currentColor" }), _jsx("path", { d: "M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z", fill: "currentColor", mask: "url(#SendToBackIcon)" }), _jsx("path", { d: "M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z", stroke: "currentColor", strokeWidth: "1.25" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+//
+// Align action icons created from scratch to match those of z-index actions
+// Note: vertical align icons are flipped so the larger item is always the
+// first one the user sees. Horizontal align icons should not be flipped since
+// that would make them lie about their function.
+//
+export const AlignTopIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M3.333 3.333h13.334", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v7.083c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V8.125c0-.92-.746-1.667-1.666-1.667ZM6.875 6.458h-.417c-.92 0-1.666.747-1.666 1.667v3.75c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667v-3.75c0-.92-.747-1.667-1.667-1.667Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const AlignBottomIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M3.333 16.667h13.334", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.875 3.125h-.417c-.92 0-1.666.746-1.666 1.667v7.083c0 .92.746 1.667 1.666 1.667h.417c.92 0 1.667-.746 1.667-1.667V4.792c0-.92-.747-1.667-1.667-1.667ZM13.542 5.817h-.417c-.92 0-1.667.747-1.667 1.667v4.391c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667V7.484c0-.92-.746-1.667-1.666-1.667Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const AlignLeftIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M3.333 3.333v13.334", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M15.208 4.792H8.125c-.92 0-1.667.746-1.667 1.666v.417c0 .92.747 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM12.516 11.458H8.125c-.92 0-1.667.746-1.667 1.667v.417c0 .92.747 1.666 1.667 1.666h4.391c.92 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.667-1.667Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const AlignRightIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M16.667 3.333v13.334", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M11.875 4.792H4.792c-.92 0-1.667.746-1.667 1.666v.417c0 .92.746 1.667 1.667 1.667h7.083c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666ZM11.683 11.458H7.292c-.92 0-1.667.746-1.667 1.667v.417c0 .92.746 1.666 1.667 1.666h4.39c.921 0 1.667-.746 1.667-1.666v-.417c0-.92-.746-1.667-1.666-1.667Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const DistributeHorizontallyIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M16.667 3.333v13.334M3.333 3.333v13.334", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.375 10.208v-.416c0-.92-.746-1.667-1.667-1.667H7.292c-.92 0-1.667.746-1.667 1.667v.416c0 .92.746 1.667 1.667 1.667h5.416c.92 0 1.667-.746 1.667-1.667Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const DistributeVerticallyIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M3.333 3.333h13.334M3.333 16.667h13.334", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.208 5.625h-.416c-.92 0-1.667.746-1.667 1.667v5.416c0 .92.746 1.667 1.667 1.667h.416c.92 0 1.667-.746 1.667-1.667V7.292c0-.92-.746-1.667-1.667-1.667Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const CenterVerticallyIcon = createIcon(_jsxs("g", { stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M1.667 10h2.916", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M8.333 10h3.334", strokeLinejoin: "round" }), _jsx("path", { d: "M15.417 10h2.916", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.875 4.792h-.417c-.92 0-1.666.746-1.666 1.666v7.084c0 .92.746 1.666 1.666 1.666h.417c.92 0 1.667-.746 1.667-1.666V6.458c0-.92-.747-1.666-1.667-1.666ZM13.542 6.458h-.417c-.92 0-1.667.747-1.667 1.667v3.75c0 .92.746 1.667 1.667 1.667h.417c.92 0 1.666-.746 1.666-1.667v-3.75c0-.92-.746-1.667-1.666-1.667Z" })] }), modifiedTablerIconProps);
+export const CenterHorizontallyIcon = createIcon(_jsxs("g", { stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M10 18.333v-2.916", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10 11.667V8.333", strokeLinejoin: "round" }), _jsx("path", { d: "M10 4.583V1.667", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4.792 13.125v.417c0 .92.746 1.666 1.666 1.666h7.084c.92 0 1.666-.746 1.666-1.666v-.417c0-.92-.746-1.667-1.666-1.667H6.458c-.92 0-1.666.746-1.666 1.667ZM6.458 6.458v.417c0 .92.747 1.667 1.667 1.667h3.75c.92 0 1.667-.747 1.667-1.667v-.417c0-.92-.746-1.666-1.667-1.666h-3.75c-.92 0-1.667.746-1.667 1.666Z" })] }), modifiedTablerIconProps);
+export const usersIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("circle", { cx: "9", cy: "7", r: "4" }), _jsx("path", { d: "M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" }), _jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" }), _jsx("path", { d: "M21 21v-2a4 4 0 0 0 -3 -3.85" })] }), tablerIconProps);
+// not mirrored because it's inspired by a playback control, which is always RTL
+export const start = createIcon("M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z");
+export const stop = createIcon("M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z");
+export const CloseIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M15 5 5 15M5 5l10 10" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const back = createIcon("M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z", { width: 320, height: 512, style: { marginLeft: "-0.2rem" }, mirror: true });
+export const clone = createIcon("M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z", { mirror: true });
+// modified https://feathericons.com/?query=shield
+export const shield = createIcon("M11.553 22.894a.998.998 0 00.894 0s3.037-1.516 5.465-4.097C19.616 16.987 21 14.663 21 12V5a1 1 0 00-.649-.936l-8-3a.998.998 0 00-.702 0l-8 3A1 1 0 003 5v7c0 2.663 1.384 4.987 3.088 6.797 2.428 2.581 5.465 4.097 5.465 4.097zm-1.303-8.481l6.644-6.644a.856.856 0 111.212 1.212l-7.25 7.25a.856.856 0 01-1.212 0l-3.75-3.75a.856.856 0 111.212-1.212l3.144 3.144z", { width: 24 });
+export const file = createIcon("M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm32-48h224V288l-23.5-23.5c-4.7-4.7-12.3-4.7-17 0L176 352l-39.5-39.5c-4.7-4.7-12.3-4.7-17 0L80 352v64zm48-240c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z", { width: 384, height: 512 });
+// TODO barnabasmolnar/editor-redesign
+// couldn't find a new icon for this
+export const GroupIcon = React.memo(({ theme }) => createIcon(_jsxs(_Fragment, { children: [_jsx("path", { d: "M25 26H111V111H25", fill: iconFillColor(theme) }), _jsx("path", { d: "M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z", stroke: iconFillColor(theme), strokeWidth: "2" }), _jsx("path", { d: "M100 100H160V160H100", fill: iconFillColor(theme) }), _jsx("path", { d: "M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z", stroke: iconFillColor(theme), strokeWidth: "2" }), _jsxs("g", { fill: handlerColor(theme), stroke: iconFillColor(theme), strokeWidth: "6", children: [_jsx("rect", { x: "2.5", y: "2.5", width: "30", height: "30" }), _jsx("rect", { x: "2.5", y: "149.5", width: "30", height: "30" }), _jsx("rect", { x: "147.5", y: "149.5", width: "30", height: "30" }), _jsx("rect", { x: "147.5", y: "2.5", width: "30", height: "30" })] })] }), { width: 182, height: 182, mirror: true }));
+export const UngroupIcon = React.memo(({ theme }) => createIcon(_jsxs(_Fragment, { children: [_jsx("path", { d: "M25 26H111V111H25", fill: iconFillColor(theme) }), _jsx("path", { d: "M25 111C25 80.2068 25 49.4135 25 26M25 26C48.6174 26 72.2348 26 111 26H25ZM25 26C53.3671 26 81.7343 26 111 26H25ZM111 26C111 52.303 111 78.606 111 111V26ZM111 26C111 51.2947 111 76.5893 111 111V26ZM111 111C87.0792 111 63.1585 111 25 111H111ZM111 111C87.4646 111 63.9293 111 25 111H111ZM25 111C25 81.1514 25 51.3028 25 26V111Z", stroke: iconFillColor(theme), strokeWidth: "2" }), _jsx("path", { d: "M100 100H160V160H100", fill: iconFillColor(theme) }), _jsx("path", { d: "M100 160C100 144.106 100 128.211 100 100M100 100C117.706 100 135.412 100 160 100H100ZM100 100C114.214 100 128.428 100 160 100H100ZM160 100C160 120.184 160 140.369 160 160V100ZM160 100C160 113.219 160 126.437 160 160V100ZM160 160C145.534 160 131.068 160 100 160H160ZM160 160C143.467 160 126.934 160 100 160H160ZM100 160C100 143.661 100 127.321 100 100V160Z", stroke: iconFillColor(theme), strokeWidth: "2" }), _jsxs("g", { fill: handlerColor(theme), stroke: iconFillColor(theme), strokeWidth: "6", children: [_jsx("rect", { x: "2.5", y: "2.5", width: "30", height: "30" }), _jsx("rect", { x: "78.5", y: "149.5", width: "30", height: "30" }), _jsx("rect", { x: "147.5", y: "149.5", width: "30", height: "30" }), _jsx("rect", { x: "147.5", y: "78.5", width: "30", height: "30" }), _jsx("rect", { x: "105.5", y: "2.5", width: "30", height: "30" }), _jsx("rect", { x: "2.5", y: "102.5", width: "30", height: "30" })] })] }), { width: 182, height: 182, mirror: true }));
+export const FillZigZagIcon = createIcon(_jsx("g", { strokeWidth: 1.25, children: _jsx("path", { d: "M5.879 2.625h8.242a3.27 3.27 0 0 1 3.254 3.254v8.242a3.27 3.27 0 0 1-3.254 3.254H5.88a3.27 3.27 0 0 1-3.254-3.254V5.88A3.27 3.27 0 0 1 5.88 2.626l-.001-.001ZM4.518 16.118l7.608-12.83m.198 13.934 5.051-9.897M2.778 9.675l9.348-6.387m-7.608 12.83 12.857-8.793" }) }), modifiedTablerIconProps);
+export const FillHachureIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { d: "M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "FillHachureIcon", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: 2, y: 2, width: 16, height: 16, children: _jsx("path", { d: "M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }) }), _jsx("g", { mask: "url(#FillHachureIcon)", children: _jsx("path", { d: "M2.258 15.156 15.156 2.258M7.324 20.222 20.222 7.325m-20.444 5.35L12.675-.222m-8.157 18.34L17.416 5.22", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), modifiedTablerIconProps);
+export const FillCrossHatchIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { d: "M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "FillCrossHatchIcon", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: -1, y: -1, width: 22, height: 22, children: _jsx("path", { d: "M2.426 15.044 15.044 2.426M7.383 20 20 7.383M0 12.617 12.617 0m-7.98 17.941L17.256 5.324m-2.211 12.25L2.426 4.956M20 12.617 7.383 0m5.234 20L0 7.383m17.941 7.98L5.324 2.745", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("g", { mask: "url(#FillCrossHatchIcon)", children: _jsx("path", { d: "M14.121 2H5.88A3.879 3.879 0 0 0 2 5.879v8.242A3.879 3.879 0 0 0 5.879 18h8.242A3.879 3.879 0 0 0 18 14.121V5.88A3.879 3.879 0 0 0 14.121 2Z", fill: "currentColor" }) })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const FillSolidIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z", stroke: "currentColor", strokeWidth: "1.25" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), { ...modifiedTablerIconProps, fill: "currentColor" });
+export const StrokeWidthBaseIcon = createIcon(_jsx(_Fragment, { children: _jsx("path", { d: "M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), modifiedTablerIconProps);
+export const StrokeWidthBoldIcon = createIcon(_jsx("path", { d: "M5 10h10", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }), modifiedTablerIconProps);
+export const StrokeWidthExtraBoldIcon = createIcon(_jsx("path", { d: "M5 10h10", stroke: "currentColor", strokeWidth: "3.75", strokeLinecap: "round", strokeLinejoin: "round" }), modifiedTablerIconProps);
+export const StrokeStyleSolidIcon = React.memo(({ theme }) => createIcon(_jsx("path", { d: "M6 10H34", stroke: iconFillColor(theme), strokeWidth: 2, fill: "none", strokeLinecap: "round" }), {
+    width: 40,
+    height: 20,
+}));
+export const StrokeStyleDashedIcon = createIcon(_jsxs("g", { strokeWidth: "2", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M5 12h2" }), _jsx("path", { d: "M17 12h2" }), _jsx("path", { d: "M11 12h2" })] }), tablerIconProps);
+// tabler-icons: line-dotted
+export const StrokeStyleDottedIcon = createIcon(_jsxs("g", { strokeWidth: "2", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 12v.01" }), _jsx("path", { d: "M8 12v.01" }), _jsx("path", { d: "M12 12v.01" }), _jsx("path", { d: "M16 12v.01" }), _jsx("path", { d: "M20 12v.01" })] }), tablerIconProps);
+export const SloppinessArchitectIcon = createIcon(_jsx("path", { d: "M2.5 12.038c1.655-.885 5.9-3.292 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const SloppinessArtistIcon = createIcon(_jsx("path", { d: "M2.5 12.563c1.655-.886 5.9-3.293 8.568-4.355 2.668-1.062.101 2.822 1.32 3.105 1.218.283 5.112-1.814 5.112-1.814m-13.469 2.23c2.963-1.586 6.13-5.62 7.468-4.998 1.338.623-1.153 4.11-.132 5.595 1.02 1.487 6.133-1.43 6.133-1.43", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const SloppinessCartoonistIcon = createIcon(_jsx("path", { d: "M2.5 11.936c1.737-.879 8.627-5.346 10.42-5.268 1.795.078-.418 5.138.345 5.736.763.598 3.53-1.789 4.235-2.147M2.929 9.788c1.164-.519 5.47-3.28 6.987-3.114 1.519.165 1 3.827 2.121 4.109 1.122.281 3.839-2.016 4.606-2.42", strokeWidth: "1.25" }), modifiedTablerIconProps);
+export const EdgeSharpIcon = createIcon(_jsxs("svg", { strokeWidth: "1.5", children: [_jsx("path", { d: "M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10" }), _jsx("path", { d: "M13.3333 3.33331V3.34331" }), _jsx("path", { d: "M16.6667 3.33331V3.34331" }), _jsx("path", { d: "M16.6667 6.66669V6.67669" }), _jsx("path", { d: "M16.6667 10V10.01" }), _jsx("path", { d: "M3.33334 13.3333V13.3433" }), _jsx("path", { d: "M16.6667 13.3333V13.3433" }), _jsx("path", { d: "M3.33334 16.6667V16.6767" }), _jsx("path", { d: "M6.66666 16.6667V16.6767" }), _jsx("path", { d: "M10 16.6667V16.6767" }), _jsx("path", { d: "M13.3333 16.6667V16.6767" }), _jsx("path", { d: "M16.6667 16.6667V16.6767" })] }), modifiedTablerIconProps);
+// tabler-icons: border-radius
+export const EdgeRoundIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 12v-4a4 4 0 0 1 4 -4h4" }), _jsx("line", { x1: "16", y1: "4", x2: "16", y2: "4.01" }), _jsx("line", { x1: "20", y1: "4", x2: "20", y2: "4.01" }), _jsx("line", { x1: "20", y1: "8", x2: "20", y2: "8.01" }), _jsx("line", { x1: "20", y1: "12", x2: "20", y2: "12.01" }), _jsx("line", { x1: "4", y1: "16", x2: "4", y2: "16.01" }), _jsx("line", { x1: "20", y1: "16", x2: "20", y2: "16.01" }), _jsx("line", { x1: "4", y1: "20", x2: "4", y2: "20.01" }), _jsx("line", { x1: "8", y1: "20", x2: "8", y2: "20.01" }), _jsx("line", { x1: "12", y1: "20", x2: "12", y2: "20.01" }), _jsx("line", { x1: "16", y1: "20", x2: "16", y2: "20.01" }), _jsx("line", { x1: "20", y1: "20", x2: "20", y2: "20.01" })] }), tablerIconProps);
+export const ArrowheadNoneIcon = createIcon(_jsx("path", { d: "M6 10H34", stroke: "currentColor", strokeWidth: 2, fill: "none" }), {
+    width: 40,
+    height: 20,
+});
+export const ArrowheadArrowIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { transform: flip ? "translate(40, 0) scale(-1, 1)" : "", stroke: "currentColor", strokeWidth: 2, fill: "none", children: [_jsx("path", { d: "M34 10H6M34 10L27 5M34 10L27 15" }), _jsx("path", { d: "M27.5 5L34.5 10L27.5 15" })] }), { width: 40, height: 20 }));
+export const ArrowheadCircleIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "currentColor", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", children: [_jsx("path", { d: "M32 10L6 10", strokeWidth: 2 }), _jsx("circle", { r: "4", transform: "matrix(-1 0 0 1 30 10)" })] }), { width: 40, height: 20 }));
+export const ArrowheadCircleOutlineIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeWidth: 2, children: [_jsx("path", { d: "M26 10L6 10" }), _jsx("circle", { r: "4", transform: "matrix(-1 0 0 1 30 10)" })] }), { width: 40, height: 20 }));
+export const ArrowheadBarIcon = React.memo(({ flip = false }) => createIcon(_jsx("g", { transform: flip ? "translate(40, 0) scale(-1, 1)" : "", children: _jsx("path", { d: "M34 10H5.99996M34 10L34 5M34 10L34 15", stroke: "currentColor", strokeWidth: 2, fill: "none" }) }), { width: 40, height: 20 }));
+export const ArrowheadTriangleIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "currentColor", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", children: [_jsx("path", { d: "M32 10L6 10", strokeWidth: 2 }), _jsx("path", { d: "M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5" })] }), { width: 40, height: 20 }));
+export const ArrowheadTriangleOutlineIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeWidth: 2, strokeLinejoin: "round", children: [_jsx("path", { d: "M6,9.5H27" }), _jsx("path", { d: "M27,5L34,10L27,14Z", fill: "none" })] }), { width: 40, height: 20 }));
+export const ArrowheadDiamondIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "currentColor", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { d: "M6,9.5H20" }), _jsx("path", { d: "M27,5L34,10L27,14L20,9.5Z" })] }), { width: 40, height: 20 }));
+export const ArrowheadDiamondOutlineIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { d: "M6,9.5H20" }), _jsx("path", { d: "M27,5L34,10L27,14L20,9.5Z" })] }), { width: 40, height: 20 }));
+export const FontSizeSmallIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M14.167 6.667a3.333 3.333 0 0 0-3.334-3.334H9.167a3.333 3.333 0 0 0 0 6.667h1.666a3.333 3.333 0 0 1 0 6.667H9.167a3.333 3.333 0 0 1-3.334-3.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const FontSizeMediumIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M5 16.667V3.333L10 15l5-11.667v13.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const FontSizeLargeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M5.833 3.333v13.334h8.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const FontSizeExtraLargeIcon = createIcon(_jsx(_Fragment, { children: _jsx("path", { d: "m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), modifiedTablerIconProps);
+export const FontFamilyNormalIcon = createIcon(_jsx(_Fragment, { children: _jsx("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334" }) }) }), modifiedTablerIconProps);
+export const FontFamilyCodeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+export const TextAlignLeftIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "8", x2: "20", y2: "8" }), _jsx("line", { x1: "4", y1: "12", x2: "12", y2: "12" }), _jsx("line", { x1: "4", y1: "16", x2: "16", y2: "16" })] }), tablerIconProps);
+export const TextAlignCenterIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "8", x2: "20", y2: "8" }), _jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" }), _jsx("line", { x1: "6", y1: "16", x2: "18", y2: "16" })] }), tablerIconProps);
+export const TextAlignRightIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "8", x2: "20", y2: "8" }), _jsx("line", { x1: "10", y1: "12", x2: "20", y2: "12" }), _jsx("line", { x1: "8", y1: "16", x2: "20", y2: "16" })] }), tablerIconProps);
+// tabler-icons: layout-align-top
+export const TextAlignTopIcon = React.memo(({ theme }) => createIcon(_jsxs("g", { strokeWidth: "1.5", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "4", x2: "20", y2: "4" }), _jsx("rect", { x: "9", y: "8", width: "6", height: "12", rx: "2" })] }), tablerIconProps));
+// tabler-icons: layout-align-bottom
+export const TextAlignBottomIcon = React.memo(({ theme }) => createIcon(_jsxs("g", { strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20" }), _jsx("rect", { x: "9", y: "4", width: "6", height: "12", rx: "2" })] }), tablerIconProps));
+// tabler-icons: layout-align-middle
+export const TextAlignMiddleIcon = React.memo(({ theme }) => createIcon(_jsxs("g", { strokeWidth: "1.5", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "12", x2: "9", y2: "12" }), _jsx("line", { x1: "15", y1: "12", x2: "20", y2: "12" }), _jsx("rect", { x: "9", y: "6", width: "6", height: "12", rx: "2" })] }), tablerIconProps));
+export const publishIcon = createIcon(_jsx("path", { d: "M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z", fill: "currentColor" }), { width: 640, height: 512 });
+export const eraser = createIcon(_jsx("path", { d: "M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z" }));
+export const handIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" }), _jsx("path", { d: "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" }), _jsx("path", { d: "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" }), _jsx("path", { d: "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" })] }), tablerIconProps);
+export const downloadIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" }), _jsx("path", { d: "M7 11l5 5l5 -5" }), _jsx("path", { d: "M12 4l0 12" })] }), tablerIconProps);
+export const copyIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }), _jsx("path", { d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" })] }), tablerIconProps);
+export const helpIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }), _jsx("path", { d: "M12 17l0 .01" }), _jsx("path", { d: "M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" })] }), tablerIconProps);
+export const playerPlayIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M7 4v16l13 -8z" })] }), tablerIconProps);
+export const playerStopFilledIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", strokeWidth: "0", fill: "currentColor" })] }), tablerIconProps);
+export const tablerCheckIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M5 12l5 5l10 -10" })] }), tablerIconProps);
+export const alertTriangleIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" }), _jsx("path", { d: "M12 9v4" }), _jsx("path", { d: "M12 17h.01" })] }), tablerIconProps);
+export const eyeDropperIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M11 7l6 6" }), _jsx("path", { d: "M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z" })] }), tablerIconProps);
+export const extraToolsIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 3l-4 7h8z" }), _jsx("path", { d: "M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" }), _jsx("path", { d: "M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" })] }), tablerIconProps);
+export const frameToolIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 7l16 0" }), _jsx("path", { d: "M4 17l16 0" }), _jsx("path", { d: "M7 4l0 16" }), _jsx("path", { d: "M17 4l0 16" })] }), tablerIconProps);
+export const mermaidLogoIcon = createIcon(_jsx("path", { fill: "currentColor", d: "M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" }));
+export const ArrowRightIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M4.16602 10H15.8327" }), _jsx("path", { d: "M12.5 13.3333L15.8333 10" }), _jsx("path", { d: "M12.5 6.66666L15.8333 9.99999" })] }), modifiedTablerIconProps);
+export const laserPointerToolIcon = createIcon(_jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", transform: "rotate(90 10 10)", children: [_jsx("path", { clipRule: "evenodd", d: "m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z" }), _jsx("path", { d: "m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13" })] }), 20);
+export const MagicIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M6 21l15 -15l-3 -3l-15 15l3 3" }), _jsx("path", { d: "M15 6l3 3" }), _jsx("path", { d: "M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" }), _jsx("path", { d: "M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" })] }), tablerIconProps);
+export const OpenAIIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35" }), _jsx("path", { d: "M5.214 15.014a3.501 3.501 0 0 0 4.446 5.266l4.34 -2.534v-6.946" }), _jsx("path", { d: "M6 7.63c-1.391 -.236 -2.787 .395 -3.534 1.689a3.474 3.474 0 0 0 1.271 4.745l4.263 2.514l6 -3.348" }), _jsx("path", { d: "M12.783 4.616a3.501 3.501 0 0 0 -6.783 1.217v5.067l6 3.45" }), _jsx("path", { d: "M18.786 8.986a3.501 3.501 0 0 0 -4.446 -5.266l-4.34 2.534v6.946" }), _jsx("path", { d: "M18 16.302c1.391 .236 2.787 -.395 3.534 -1.689a3.474 3.474 0 0 0 -1.271 -4.745l-4.308 -2.514l-5.955 3.42" })] }), tablerIconProps);
+export const fullscreenIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2" }), _jsx("path", { d: "M4 16v2a2 2 0 0 0 2 2h2" }), _jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v2" }), _jsx("path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2" })] }), tablerIconProps);
+export const eyeIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }), _jsx("path", { d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" })] }), tablerIconProps);
+export const eyeClosedIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10.585 10.587a2 2 0 0 0 2.829 2.828" }), _jsx("path", { d: "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" }), _jsx("path", { d: "M3 3l18 18" })] }), tablerIconProps);
+export const brainIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8" }), _jsx("path", { d: "M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8" }), _jsx("path", { d: "M17.5 16a3.5 3.5 0 0 0 0 -7h-.5" }), _jsx("path", { d: "M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0" }), _jsx("path", { d: "M6.5 16a3.5 3.5 0 0 1 0 -7h.5" }), _jsx("path", { d: "M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10" })] }), tablerIconProps);
+export const searchIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }), _jsx("path", { d: "M21 21l-6 -6" })] }), tablerIconProps);

package/dist/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from "../../i18n";
+import { usersIcon } from "../icons";
+import { Button } from "../Button";
+import clsx from "clsx";
+import "./LiveCollaborationTrigger.scss";
+import { useUIAppState } from "../../context/ui-appState";
+const LiveCollaborationTrigger = ({ isCollaborating, onSelect, ...rest }) => {
+    const appState = useUIAppState();
+    return (_jsxs(Button, { ...rest, className: clsx("collab-button", { active: isCollaborating }), type: "button", onSelect: onSelect, style: { position: "relative" }, title: t("labels.liveCollaboration"), children: [usersIcon, appState.collaborators.size > 0 && (_jsx("div", { className: "CollabButton-collaborators", children: appState.collaborators.size }))] }));
+};
+export default LiveCollaborationTrigger;
+LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

package/dist/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss

@@ -0,0 +1,72 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .collab-button {
+    --button-bg: var(--color-primary);
+    --button-color: white;
+    --button-border: var(--color-primary);
+
+    --button-width: var(--lg-button-size);
+    --button-height: var(--lg-button-size);
+
+    --button-hover-bg: var(--color-primary-darker);
+    --button-hover-border: var(--color-primary-darker);
+
+    --button-active-bg: var(--color-primary-darker);
+
+    box-shadow: 0 0 0 1px var(--color-surface-lowest);
+
+    flex-shrink: 0;
+
+    // double .active to force specificity
+    &.active.active {
+      background-color: #0fb884;
+      border-color: #0fb884;
+
+      svg {
+        color: #fff;
+      }
+
+      &:hover,
+      &:active {
+        background-color: #0fb884;
+        border-color: #0fb884;
+      }
+    }
+  }
+
+  &.theme--dark {
+    .collab-button {
+      color: var(--color-gray-90);
+    }
+  }
+
+  .CollabButton.is-collaborating {
+    background-color: var(--button-special-active-bg-color);
+
+    .ToolIcon__icon svg,
+    .ToolIcon__label {
+      color: var(--icon-green-fill-color);
+    }
+  }
+
+  .CollabButton-collaborators {
+    :root[dir="ltr"] & {
+      right: -5px;
+    }
+    :root[dir="rtl"] & {
+      left: -5px;
+    }
+    min-width: 1em;
+    min-height: 1em;
+    line-height: 1;
+    position: absolute;
+    bottom: -5px;
+    padding: 3px;
+    border-radius: 50%;
+    background-color: $oc-green-2;
+    color: $oc-green-9;
+    font-size: 0.6rem;
+    font-family: "Cascadia";
+  }
+}