@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.32

package/dist/components/MenuBar.js

@@ -1,6 +1,6 @@
 import { PIE_TOOLBAR__CLASS as e } from "../constants.js";
 import { DoneButton as t } from "./common/done-button.js";
-import n from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { clsx as n } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
 import { ToolbarIcon as r } from "./respArea/ToolbarIcon.js";
 import { spanishConfig as i, specialConfig as a } from "./characters/characterUtils.js";
 import o from "./icons/TextAlign.js";
@@ -13,44 +13,49 @@ import { styled as v, useTheme as y } from "@mui/material/styles";
 import { NodeSelection as b } from "prosemirror-state";
 import x from "@mui/icons-material/Delete";
 import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import w from "@mui/icons-material/FormatBold";
-import T from "@mui/icons-material/FormatItalic";
-import E from "@mui/icons-material/FormatStrikethrough";
-import D from "@mui/icons-material/Code";
-import O from "@mui/icons-material/GridOn";
-import k from "@mui/icons-material/FormatListBulleted";
-import A from "@mui/icons-material/FormatListNumbered";
-import j from "@mui/icons-material/FormatUnderlined";
-import M from "@mui/icons-material/Functions";
-import N from "@mui/icons-material/Image";
-import P from "@mui/icons-material/Redo";
-import F from "@mui/icons-material/Undo";
-import ee from "@mui/icons-material/FormatQuote";
-import I from "@mui/icons-material/Theaters";
-import L from "@mui/icons-material/VolumeUp";
-import R from "@mui/icons-material/BorderAll";
+import { color as w } from "@pie-lib/render-ui";
+import T from "@mui/icons-material/FormatBold";
+import E from "@mui/icons-material/FormatItalic";
+import D from "@mui/icons-material/FormatStrikethrough";
+import O from "@mui/icons-material/Code";
+import k from "@mui/icons-material/GridOn";
+import A from "@mui/icons-material/FormatListBulleted";
+import j from "@mui/icons-material/FormatListNumbered";
+import M from "@mui/icons-material/FormatUnderlined";
+import N from "@mui/icons-material/Functions";
+import P from "@mui/icons-material/Image";
+import F from "@mui/icons-material/Redo";
+import ee from "@mui/icons-material/Undo";
+import I from "@mui/icons-material/FormatQuote";
+import L from "@mui/icons-material/Theaters";
+import R from "@mui/icons-material/VolumeUp";
+import z from "@mui/icons-material/BorderAll";
 //#region src/components/MenuBar.tsx
-var z = () => /* @__PURE__ */ S("svg", {
+var B = () => /* @__PURE__ */ S("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	height: "24px",
 	viewBox: "0 0 24 24",
 	width: "24px",
 	fill: "none",
+	"aria-hidden": "true",
+	focusable: "false",
 	children: /* @__PURE__ */ S("path", {
 		d: "M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z",
 		fill: "currentColor"
 	})
-}), B = () => /* @__PURE__ */ S("svg", {
+}), V = () => /* @__PURE__ */ S("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	height: "24px",
 	viewBox: "0 0 24 24",
 	width: "24px",
 	fill: "none",
+	"aria-hidden": "true",
+	focusable: "false",
 	children: /* @__PURE__ */ S("path", {
 		d: "M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z",
 		fill: "currentColor"
 	})
-}), V = () => /* @__PURE__ */ S("svg", {
+}), H = () => /* @__PURE__ */ S("svg", {
 	width: "30",
 	height: "28",
 	viewBox: "0 0 30 28",
@@ -60,12 +65,14 @@ var z = () => /* @__PURE__ */ S("svg", {
 		width: "20px",
 		height: "18px"
 	},
+	"aria-hidden": "true",
+	focusable: "false",
 	children: /* @__PURE__ */ S("path", {
 		d: "M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z",
 		fill: "currentColor"
 	})
 });
-function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAreaProps: W, onChange: G, autoWidthToolbar: K }) {
+function U({ editor: v, classes: y, activePlugins: w, toolbarOpts: U, responseAreaProps: W, onChange: G, autoWidthToolbar: K }) {
 	let [q, J] = g(!1), Y = U ?? {}, X = _({
 		editor: v,
 		selector: (e) => {
@@ -78,6 +85,7 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 				hideDefaultToolbar: r,
 				hasTextSelectionInTable: i,
 				isFocused: e.editor?.isFocused,
+				toolbarOpened: e.editor?._toolbarOpened ?? !1,
 				isBold: e.editor.isActive("bold") ?? !1,
 				canBold: e.editor.can().chain().toggleBold().run() ?? !1,
 				isTable: e.editor.isActive("table") ?? !1,
@@ -113,7 +121,7 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		[y.toolbarWithNoDone]: !0,
 		[y.toolbarTop]: Y.position === "top",
 		[y.toolbarRight]: Y.alignment === "right",
-		[y.focused]: Y.alwaysVisible || X.isFocused && !v._toolbarOpened && !X.hideDefaultToolbar,
+		[y.focused]: Y.alwaysVisible || X.isFocused && !X.toolbarOpened && !X.hideDefaultToolbar,
 		[y.autoWidth]: Z,
 		[y.fullWidth]: !Z,
 		[y.hidden]: Y.isHidden === !0
@@ -121,18 +129,20 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		e.preventDefault();
 	}, ne = h(() => [
 		{
-			icon: /* @__PURE__ */ S(O, {}),
+			icon: /* @__PURE__ */ S(k, {}),
+			label: "Insert table",
 			onClick: (e) => e.chain().focus().insertTable({
 				rows: 2,
 				cols: 2,
 				withHeaderRow: !1
 			}).run(),
-			hidden: (e) => !H?.includes("table") || e.isTable,
+			hidden: (e) => !w?.includes("table") || e.isTable,
 			isActive: (e) => e.isTable,
 			isDisabled: (e) => !e.canTable
 		},
 		{
 			icon: /* @__PURE__ */ S(l, {}),
+			label: "Add table row",
 			onClick: (e) => e.chain().focus().addRowAfter().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
 			isActive: (e) => e.isTable,
@@ -140,6 +150,7 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		},
 		{
 			icon: /* @__PURE__ */ S(d, {}),
+			label: "Remove table row",
 			onClick: (e) => e.chain().focus().deleteRow().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
 			isActive: (e) => e.isTable,
@@ -147,6 +158,7 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		},
 		{
 			icon: /* @__PURE__ */ S(c, {}),
+			label: "Add table column",
 			onClick: (e) => e.chain().focus().addColumnAfter().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
 			isActive: (e) => e.isTable,
@@ -154,6 +166,7 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		},
 		{
 			icon: /* @__PURE__ */ S(u, {}),
+			label: "Remove table column",
 			onClick: (e) => e.chain().focus().deleteColumn().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
 			isActive: (e) => e.isTable,
@@ -161,13 +174,16 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		},
 		{
 			icon: /* @__PURE__ */ S(f, {}),
+			label: "Remove table",
 			onClick: (e) => e.chain().focus().deleteTable().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
 			isActive: (e) => e.isTable,
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ S(R, {}),
+			icon: /* @__PURE__ */ S(z, {}),
+			label: "Table borders",
+			toggle: !0,
 			onClick: (e) => {
 				let t = e.getAttributes("table"), n = {
 					...t,
@@ -180,64 +196,81 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ S(w, {}),
+			icon: /* @__PURE__ */ S(T, {}),
+			label: "Bold",
+			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleBold().run(),
-			hidden: () => !H?.includes("bold"),
+			hidden: () => !w?.includes("bold"),
 			isActive: (e) => e.isBold,
 			isDisabled: (e) => !e.canBold
 		},
 		{
-			icon: /* @__PURE__ */ S(T, {}),
+			icon: /* @__PURE__ */ S(E, {}),
+			label: "Italic",
+			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleItalic().run(),
-			hidden: () => !H?.includes("italic"),
+			hidden: () => !w?.includes("italic"),
 			isActive: (e) => e.isItalic,
 			isDisabled: (e) => !e.canItalic
 		},
 		{
-			icon: /* @__PURE__ */ S(E, {}),
+			icon: /* @__PURE__ */ S(D, {}),
+			label: "Strikethrough",
+			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleStrike().run(),
-			hidden: () => !H?.includes("strikethrough"),
+			hidden: () => !w?.includes("strikethrough"),
 			isActive: (e) => e.isStrike,
 			isDisabled: (e) => !e.canStrike
 		},
 		{
-			icon: /* @__PURE__ */ S(D, {}),
+			icon: /* @__PURE__ */ S(O, {}),
+			label: "Code",
+			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleCode().run(),
-			hidden: () => !H?.includes("code"),
+			hidden: () => !w?.includes("code"),
 			isActive: (e) => e.isCode,
 			isDisabled: (e) => !e.canCode
 		},
 		{
-			icon: /* @__PURE__ */ S(j, {}),
+			icon: /* @__PURE__ */ S(M, {}),
+			label: "Underline",
+			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleUnderline().run(),
-			hidden: () => !H?.includes("underline"),
+			hidden: () => !w?.includes("underline"),
 			isActive: (e) => e.isUnderline
 		},
 		{
-			icon: /* @__PURE__ */ S(B, {}),
+			icon: /* @__PURE__ */ S(V, {}),
+			label: "Subscript",
+			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleSubscript().run(),
-			hidden: () => !H?.includes("subscript"),
+			hidden: () => !w?.includes("subscript"),
 			isActive: (e) => e.isSubScript
 		},
 		{
-			icon: /* @__PURE__ */ S(z, {}),
+			icon: /* @__PURE__ */ S(B, {}),
+			label: "Superscript",
+			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleSuperscript().run(),
-			hidden: () => !H?.includes("superscript"),
+			hidden: () => !w?.includes("superscript"),
 			isActive: (e) => e.isSuperScript
 		},
 		{
-			icon: /* @__PURE__ */ S(N, {}),
-			hidden: () => !H?.includes("image"),
+			icon: /* @__PURE__ */ S(P, {}),
+			label: "Insert image",
+			hidden: () => !w?.includes("image"),
 			onClick: (e) => e.chain().focus().setImageUploadNode().run()
 		},
 		{
-			icon: /* @__PURE__ */ S(I, {}),
-			hidden: () => !H?.includes("video"),
+			icon: /* @__PURE__ */ S(L, {}),
+			label: "Insert video",
+			hidden: () => !w?.includes("video"),
 			onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
 		},
 		{
-			icon: /* @__PURE__ */ S(L, {}),
-			hidden: () => !H?.includes("audio"),
+			icon: /* @__PURE__ */ S(R, {}),
+			label: "Insert audio",
+			hidden: () => !w?.includes("audio"),
 			onClick: (e) => e.chain().focus().insertMedia({
 				type: "audio",
 				tag: "audio"
@@ -245,66 +278,81 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		},
 		{
 			icon: /* @__PURE__ */ S(s, {}),
-			hidden: () => !H?.includes("css"),
+			label: "CSS classes",
+			hidden: () => !w?.includes("css"),
 			onClick: (e) => e.commands.openCSSClassDialog()
 		},
 		{
-			icon: /* @__PURE__ */ S(ee, {}),
-			hidden: () => !H?.includes("blockquote"),
+			icon: /* @__PURE__ */ S(I, {}),
+			label: "Blockquote",
+			toggle: !0,
+			hidden: () => !w?.includes("blockquote"),
 			onClick: (e) => e.chain().focus().toggleBlockquote().run(),
 			isActive: (e) => e.isBlockquote
 		},
 		{
-			icon: /* @__PURE__ */ S(V, {}),
-			hidden: () => !H?.includes("h3"),
+			icon: /* @__PURE__ */ S(H, {}),
+			label: "Heading",
+			toggle: !0,
+			hidden: () => !w?.includes("h3"),
 			onClick: (e) => e.chain().focus().toggleHeadingParagraph().run(),
 			isActive: (e) => e.isHeadingParagraph
 		},
 		{
-			icon: /* @__PURE__ */ S(M, {}),
-			hidden: () => !H?.includes("math"),
+			icon: /* @__PURE__ */ S(N, {}),
+			label: "Insert math",
+			hidden: () => !w?.includes("math"),
 			onClick: (e) => e.chain().focus().insertMath("").run()
 		},
 		{
 			icon: /* @__PURE__ */ S(p, { letter: "ñ" }),
-			hidden: () => !H?.includes("languageCharacters"),
+			label: "Spanish characters (ñ)",
+			hidden: () => !w?.includes("languageCharacters"),
 			onClick: () => J(i)
 		},
 		{
 			icon: /* @__PURE__ */ S(p, { letter: "€" }),
-			hidden: () => H?.filter((e) => e === "languageCharacters").length !== 2,
+			label: "Special characters (€)",
+			hidden: () => w?.filter((e) => e === "languageCharacters").length !== 2,
 			onClick: () => J(a)
 		},
 		{
 			icon: /* @__PURE__ */ S(o, { editor: v }),
-			hidden: () => !H?.includes("text-align"),
+			label: "Text alignment",
+			hidden: () => !w?.includes("text-align"),
 			onClick: () => {}
 		},
 		{
-			icon: /* @__PURE__ */ S(k, {}),
-			hidden: () => !H?.includes("bulleted-list"),
+			icon: /* @__PURE__ */ S(A, {}),
+			label: "Bulleted list",
+			toggle: !0,
+			hidden: () => !w?.includes("bulleted-list"),
 			onClick: (e) => e.chain().focus().toggleBulletList().run(),
 			isActive: (e) => e.isBulletList
 		},
 		{
-			icon: /* @__PURE__ */ S(A, {}),
-			hidden: () => !H?.includes("numbered-list"),
+			icon: /* @__PURE__ */ S(j, {}),
+			label: "Numbered list",
+			toggle: !0,
+			hidden: () => !w?.includes("numbered-list"),
 			onClick: (e) => e.chain().focus().toggleOrderedList().run(),
 			isActive: (e) => e.isOrderedList
 		},
 		{
-			icon: /* @__PURE__ */ S(F, {}),
-			hidden: () => !H?.includes("undo"),
+			icon: /* @__PURE__ */ S(ee, {}),
+			label: "Undo",
+			hidden: () => !w?.includes("undo"),
 			onClick: (e) => e.chain().focus().undo().run(),
 			isDisabled: (e) => !e.canUndo
 		},
 		{
-			icon: /* @__PURE__ */ S(P, {}),
-			hidden: () => !H?.includes("redo"),
+			icon: /* @__PURE__ */ S(F, {}),
+			label: "Redo",
+			hidden: () => !w?.includes("redo"),
 			onClick: (e) => e.chain().focus().redo().run(),
 			isDisabled: (e) => !e.canRedo
 		}
-	], [H, v]), re = X.hideDefaultToolbar && X.currentNode?.type?.name === "drag_in_the_blank";
+	], [w, v]), re = X.hideDefaultToolbar && X.currentNode?.type?.name === "drag_in_the_blank";
 	return /* @__PURE__ */ C("div", {
 		className: Q,
 		style: { ...$ },
@@ -322,6 +370,7 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 							e.preventDefault(), v.chain().focus().deleteSelection().run(), G?.(v.getHTML());
 						},
 						"aria-label": "Delete response area",
+						title: "Delete response area",
 						children: /* @__PURE__ */ S(x, {})
 					})
 				})
@@ -335,7 +384,11 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 						children: ne.filter((e) => !e.hidden?.(X)).map((e, t) => {
 							let r = e.isDisabled?.(X), i = e.isActive?.(X);
 							return /* @__PURE__ */ S("button", {
+								type: "button",
 								disabled: r,
+								"aria-label": e.label,
+								title: e.label,
+								"aria-pressed": e.toggle ? !!i : void 0,
 								onClick: (t) => {
 									t.preventDefault(), e.onClick(v);
 								},
@@ -344,7 +397,10 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 							}, t);
 						})
 					}),
-					H?.includes("responseArea") && /* @__PURE__ */ S("button", {
+					w?.includes("responseArea") && /* @__PURE__ */ S("button", {
+						type: "button",
+						"aria-label": "Insert response area",
+						title: "Insert response area",
 						onClick: () => {
 							v.chain().focus().insertResponseArea(W.type).run();
 						},
@@ -368,12 +424,12 @@ function H({ editor: v, classes: y, activePlugins: H, toolbarOpts: U, responseAr
 		]
 	});
 }
-var U = (e) => {
+var W = (e) => {
 	y();
 	let t = {
 		defaultToolbar: "defaultToolbar",
 		buttonsContainer: "buttonsContainer",
-		button: "button",
+		button: "toolbarButton",
 		active: "active",
 		disabled: "disabled",
 		isActive: "isActive",
@@ -389,11 +445,11 @@ var U = (e) => {
 		label: "label",
 		shared: "shared"
 	};
-	return /* @__PURE__ */ S(W, { children: /* @__PURE__ */ S(H, {
+	return /* @__PURE__ */ S(G, { children: /* @__PURE__ */ S(U, {
 		...e,
 		classes: t
 	}) });
-}, W = v("div")(({ theme: e }) => ({
+}, G = v("div")(() => ({
 	"& .defaultToolbar": {
 		display: "flex",
 		width: "100%",
@@ -404,21 +460,25 @@ var U = (e) => {
 		display: "flex",
 		width: "100%"
 	},
-	"& .button": {
+	"& .toolbarButton": {
 		color: "grey",
 		display: "inline-flex",
 		padding: "2px",
 		background: "none",
 		border: "none",
 		cursor: "pointer",
-		"&:hover": { color: "black" },
-		"&:focus": { outline: `2px solid ${e.palette.grey[700]}` }
+		"& svg": {
+			width: "24px",
+			height: "24px"
+		},
+		"&:hover": { color: w.text() },
+		"&:focus": { outline: `2px solid ${w.buttonFocusOutline()}` }
 	},
-	"& .active": { color: "black" },
+	"& .active": { color: w.text() },
 	"& .disabled": {
 		opacity: .7,
 		cursor: "not-allowed",
-		"& :hover": { color: "grey" }
+		"& :hover": { color: w.disabled() }
 	},
 	"& .isActive": {
 		background: "var(--purple)",
@@ -459,4 +519,4 @@ var U = (e) => {
 	"& .shared": { display: "flex" }
 }));
 //#endregion
-export { U as default };
+export { W as default };

package/dist/components/TiptapContainer.js

@@ -74,12 +74,12 @@ var u = o("div", { shouldForwardProp: (e) => !["noBorder", "error"].includes(e)
 		color: l.text(),
 		backgroundColor: l.background()
 	},
-	"& table:not([border=\"1\"]) tr": { borderTop: "1px solid #dfe2e5" },
+	"& table:not([border=\"1\"]) tr": { borderTop: `1px solid ${l.tableGridLight()}` },
 	"& td, th": {
 		padding: ".6em 1em",
 		textAlign: "center"
 	},
-	"& table:not([border=\"1\"]) td, th": { border: "1px solid #dfe2e5" },
+	"& table:not([border=\"1\"]) td, th": { border: `1px solid ${l.tableGridLight()}` },
 	...n && { border: `2px solid ${e.palette.error.main} !important` }
 })), d = o("div", { shouldForwardProp: (e) => !["disableScrollbar", "highlightShape"].includes(e) })(({ theme: e, disableScrollbar: t, highlightShape: n }) => ({
 	position: "relative",
@@ -104,7 +104,20 @@ function p(o) {
 	}, [h, S]), n(() => {
 		if (o.adjustWidthForLimit) {
 			let e = document.createElement("p");
-			e.style.visibility = "hidden", e.style.position = "absolute", e.textContent = "W".repeat(o.charactersLimit), m.current.appendChild(e), p(`${e.offsetWidth + 27}px`), e.remove();
+			e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.textContent = "W".repeat(o.charactersLimit);
+			let t = window.getComputedStyle(m.current);
+			[
+				"fontFamily",
+				"fontSize",
+				"fontWeight",
+				"fontStyle",
+				"letterSpacing",
+				"wordSpacing",
+				"textTransform",
+				"lineHeight"
+			].forEach((n) => {
+				e.style[n] = t[n];
+			}), document.body.appendChild(e), p(`${e.offsetWidth + 27}px`), e.remove();
 		}
 	}, [o.adjustWidthForLimit, o.charactersLimit]);
 	let j = r(() => ({

package/dist/components/common/done-button.js

@@ -23,4 +23,4 @@ o.propTypes = {
 };
 var s = o;
 //#endregion
-export { s as DoneButton };
+export { s as DoneButton, o as RawDoneButton };

package/dist/components/common/toolbar-buttons.js

@@ -2,23 +2,28 @@ import e from "react";
 import { styled as t } from "@mui/material/styles";
 import n from "prop-types";
 import { jsx as r } from "react/jsx-runtime";
-import i from "debug";
+import { color as i } from "@pie-lib/render-ui";
+import a from "debug";
 //#region src/components/common/toolbar-buttons.tsx
-var a = t("button", { shouldForwardProp: (e) => ![
+var o = t("button", { shouldForwardProp: (e) => ![
 	"active",
 	"disabled",
 	"extraStyles"
-].includes(e) })(({ theme: e, active: t, disabled: n }) => ({
-	color: t ? "black" : "grey",
+].includes(e) })(({ active: e, disabled: t }) => ({
+	color: e ? i.text() : i.disabled(),
 	display: "inline-flex",
 	padding: "2px",
 	background: "none",
 	border: "none",
-	cursor: n ? "not-allowed" : "pointer",
-	"&:hover": { color: n ? "grey" : "black" },
-	"&:focus": { outline: `2px solid ${e.palette.grey[700]}` },
-	...n && { opacity: .7 }
-})), o = i("pie-elements:editable-html:raw-button");
+	cursor: t ? "not-allowed" : "pointer",
+	"& svg": {
+		width: "24px",
+		height: "24px"
+	},
+	"&:hover": { color: t ? i.disabled() : i.text() },
+	"&:focus": { outline: `2px solid ${i.buttonFocusOutline()}` },
+	...t && { opacity: .7 }
+})), s = a("pie-elements:editable-html:raw-button");
 (class extends e.Component {
 	static propTypes = {
 		onClick: n.func.isRequired,
@@ -31,33 +36,33 @@ var a = t("button", { shouldForwardProp: (e) => ![
 		super(e);
 	}
 	onClick = (e) => {
-		o("[onClick]"), e.preventDefault();
+		s("[onClick]"), e.preventDefault();
 		let { onClick: t } = this.props;
 		t(e);
 	};
 	onKeyDown = (e) => {
 		if (e.key === "Enter" || e.key === " ") {
-			o("[onKeyDown]"), e.preventDefault();
+			s("[onKeyDown]"), e.preventDefault();
 			let { onClick: t } = this.props;
 			t(e);
 		}
 	};
 	render() {
-		let { active: e, children: t, disabled: n, extraStyles: i, ariaLabel: o } = this.props;
-		return /* @__PURE__ */ r(a, {
+		let { active: e, children: t, disabled: n, extraStyles: i, ariaLabel: a } = this.props;
+		return /* @__PURE__ */ r(o, {
 			style: i,
 			active: e,
 			disabled: n,
 			onMouseDown: this.onClick,
 			onKeyDown: this.onKeyDown,
-			"aria-label": o,
+			"aria-label": a,
 			"aria-pressed": e,
 			tabIndex: 0,
 			children: t
 		});
 	}
 });
-var s = class extends e.Component {
+var c = class extends e.Component {
 	static propTypes = {
 		onToggle: n.func.isRequired,
 		mark: n.string,
@@ -76,7 +81,7 @@ var s = class extends e.Component {
 	};
 	render() {
 		let { children: e, active: t, label: n } = this.props;
-		return /* @__PURE__ */ r(a, {
+		return /* @__PURE__ */ r(o, {
 			active: t,
 			onMouseDown: this.onToggle,
 			"aria-pressed": t,
@@ -86,6 +91,6 @@ var s = class extends e.Component {
 			children: e
 		});
 	}
-};
+}, l = c;
 //#endregion
-export { s as MarkButton };
+export { l as MarkButton, c as RawMarkButton };

package/dist/components/icons/TableIcons.js

@@ -11,6 +11,8 @@ var n = e("path")({
 	width: "24",
 	height: "24",
 	viewBox: "0 0 24 24",
+	"aria-hidden": "true",
+	focusable: "false",
 	children: /* @__PURE__ */ t(e, { ...n })
 }), i = r((e) => /* @__PURE__ */ t(n, {
 	...e,