@livepreso/react-plugin-textfield 0.0.2

package/constants.js

@@ -0,0 +1,198 @@
+export const CELL_MIN_WIDTH = 35;
+
+export const TOOLBAR_COMPONENT_TYPES = Object.freeze({
+	BUTTON: "button",
+	TOGGLE: "toggle",
+	TOGGLE_GROUP: "toggleGroup",
+	POPOVER: "popover",
+	SUB: "sub",
+	CUSTOM: "custom",
+});
+
+/**
+ * What a toolbar option can affect, and where they will appear in the editor.
+ *
+ * "default":    Appears above the editor, can affect anything in the content - eg. text colour.
+ * "table":      Appears under focused table - eg. delete table, evenly distribute columns.
+ * "table_cell": Appears in focused table cell - eg. bg colour, add row below etc.
+ */
+export const TOOLBAR_SCOPES = Object.freeze({
+	DEFAULT: "default",
+	TABLE: "table",
+	TABLE_CELL: "table_cell",
+});
+
+export const EDITABLE_OUTER_SELECTOR = "sp-textfield";
+
+// Primary groups
+export const UNDO_REDO = "undo";
+export const BLOCK = "block";
+export const TEXT_STYLE = "text-style";
+export const ALIGNMENT = "alignment";
+export const LINK = "link";
+export const LIST = "list";
+export const CLEAR_FORMATTING = "clear-formatting";
+export const TABLE = "table";
+
+// Primary toolbar items
+export const PRIMARY_TOOLBAR_IDS = Object.freeze({
+	UNDO: "undo",
+	REDO: "redo",
+	HEADING: "heading",
+	BOLD: "bold",
+	ITALIC: "italic",
+	UNDERLINE: "underline",
+	SUPERSCRIPT: "superscript",
+	SUBSCRIPT: "subscript",
+	TEXT_COLOR: "textColor",
+	TEXT_ALIGN: "textAlign",
+	INSERT_LINK: "insertLink",
+	REMOVE_LINK: "unlink",
+	ORDERED_LIST: "orderedList",
+	UNORDERED_LIST: "unorderedList",
+	INSERT_TABLE: "insertTable",
+	CLEAR_FORMATTING: "clearFormatting",
+});
+
+// Table editing & formatting groups
+export const TABLE_SIZE = "tableSize";
+export const DELETE_TABLE = "deleteTable";
+export const COLUMN = "column";
+export const ROW = "row";
+export const CELL = "cell";
+
+export const TABLE_TOOLBAR_IDS = Object.freeze({
+	FULL_WIDTH: "fullWidthTable",
+	EQUAL_WIDTH_COLUMNS: "equalWidthColumns",
+	DELETE_TABLE: DELETE_TABLE,
+	ADD_COLUMN_LEFT: "addColumnLeft",
+	ADD_COLUMN_RIGHT: "addColumnRight",
+	REMOVE_COLUMN: "removeColumn",
+	ADD_ROW_ABOVE: "addRowAbove",
+	ADD_ROW_BELOW: "addRowBelow",
+	REMOVE_ROW: "removeRow",
+	EQUAL_WIDTH_SELECTION: "equalWidthSelection",
+	MERGE_CELLS: "mergeCells",
+	SPLIT_CELLS: "splitCells",
+	CELL_BG_COLOR: "cellBackgroundColor",
+	CELL_VALIGN: "cellVerticalAlignment",
+});
+
+// Default group configurations
+const PRIMARY_TOOLBAR_GROUPS = Object.freeze({
+	[UNDO_REDO]: {
+		items: [PRIMARY_TOOLBAR_IDS.UNDO, PRIMARY_TOOLBAR_IDS.REDO],
+	},
+	[BLOCK]: { label: "Block type", items: [PRIMARY_TOOLBAR_IDS.HEADING] },
+	[LIST]: {
+		label: "Lists",
+		items: [
+			PRIMARY_TOOLBAR_IDS.ORDERED_LIST,
+			PRIMARY_TOOLBAR_IDS.UNORDERED_LIST,
+		],
+	},
+	[TEXT_STYLE]: {
+		label: "Text style",
+		items: [
+			PRIMARY_TOOLBAR_IDS.BOLD,
+			PRIMARY_TOOLBAR_IDS.ITALIC,
+			PRIMARY_TOOLBAR_IDS.UNDERLINE,
+			PRIMARY_TOOLBAR_IDS.TEXT_COLOR,
+			PRIMARY_TOOLBAR_IDS.SUPERSCRIPT,
+			PRIMARY_TOOLBAR_IDS.SUBSCRIPT,
+		],
+	},
+	[ALIGNMENT]: { label: "Alignment", items: [PRIMARY_TOOLBAR_IDS.TEXT_ALIGN] },
+	[LINK]: {
+		label: "Links",
+		items: [PRIMARY_TOOLBAR_IDS.INSERT_LINK, PRIMARY_TOOLBAR_IDS.REMOVE_LINK],
+	},
+	[TABLE]: { label: "Insert table", items: [PRIMARY_TOOLBAR_IDS.INSERT_TABLE] },
+	[CLEAR_FORMATTING]: {
+		label: "Clear formatting",
+		items: [PRIMARY_TOOLBAR_IDS.CLEAR_FORMATTING],
+	},
+});
+
+const TABLE_TOOLBAR_GROUPS = Object.freeze({
+	[TABLE_SIZE]: {
+		items: [
+			TABLE_TOOLBAR_IDS.FULL_WIDTH,
+			TABLE_TOOLBAR_IDS.EQUAL_WIDTH_COLUMNS,
+		],
+	},
+	[DELETE_TABLE]: {
+		items: [TABLE_TOOLBAR_IDS.DELETE_TABLE],
+	},
+});
+
+const TABLE_MENU_GROUPS = Object.freeze({
+	[COLUMN]: {
+		items: [
+			TABLE_TOOLBAR_IDS.ADD_COLUMN_LEFT,
+			TABLE_TOOLBAR_IDS.ADD_COLUMN_RIGHT,
+			TABLE_TOOLBAR_IDS.REMOVE_COLUMN,
+		],
+	},
+	[ROW]: {
+		items: [
+			TABLE_TOOLBAR_IDS.ADD_ROW_ABOVE,
+			TABLE_TOOLBAR_IDS.ADD_ROW_BELOW,
+			TABLE_TOOLBAR_IDS.REMOVE_ROW,
+			// TABLE_TOOLBAR_IDS.EQUAL_WIDTH_SELECTION,
+		],
+	},
+	[CELL]: {
+		items: [
+			TABLE_TOOLBAR_IDS.MERGE_CELLS,
+			TABLE_TOOLBAR_IDS.SPLIT_CELLS,
+			TABLE_TOOLBAR_IDS.CELL_BG_COLOR,
+			TABLE_TOOLBAR_IDS.CELL_VALIGN,
+		],
+	},
+});
+
+export const DEFAULT_TOOLBAR_GROUPS = {
+	...PRIMARY_TOOLBAR_GROUPS,
+	...TABLE_TOOLBAR_GROUPS,
+	...TABLE_MENU_GROUPS,
+};
+
+// Default group order of table-wide and table-cell editors
+const TABLE_OPTIONS = [TABLE_SIZE, DELETE_TABLE];
+const TABLE_CELL_OPTIONS = [COLUMN, ROW, CELL];
+
+// Complete set of toolbar configurations
+export const COMPLETE_TOOLBAR_CONFIG = [
+	UNDO_REDO,
+	BLOCK,
+	LIST,
+	TEXT_STYLE,
+	ALIGNMENT,
+	LINK,
+	TABLE,
+	CLEAR_FORMATTING,
+];
+
+export const COMPLETE_TABLE_TOOLBAR_CONFIG = [
+	...TABLE_OPTIONS,
+	...TABLE_CELL_OPTIONS,
+];
+
+// Default toolbar configurations (currently complete list of options)
+export const DEFAULT_TOOLBAR_CONFIG = [...COMPLETE_TOOLBAR_CONFIG];
+export const DEFAULT_TABLE_TOOLBAR_CONFIG = [...COMPLETE_TABLE_TOOLBAR_CONFIG];
+
+// Alternative toolbar configurations
+export const MINIMAL_TOOLBAR_CONFIG = [UNDO_REDO];
+export const SIMPLE_TOOLBAR_CONFIG = [UNDO_REDO, TEXT_STYLE, CLEAR_FORMATTING];
+
+export const SIMPLE_TABLE_TOOLBAR_CONFIG = [
+	DELETE_TABLE,
+	COLUMN,
+	[
+		TABLE_TOOLBAR_IDS.ADD_ROW_ABOVE,
+		TABLE_TOOLBAR_IDS.ADD_ROW_BELOW,
+		TABLE_TOOLBAR_IDS.REMOVE_ROW,
+	],
+];

package/eslint.config.mjs

@@ -0,0 +1,15 @@
+import livepresoConfig from "@livepreso/eslint-config";
+
+export default [
+	...livepresoConfig,
+	{
+		languageOptions: {
+			globals: {
+				Bridge: true,
+			},
+		},
+		rules: {
+			"no-console": "off",
+		},
+	},
+];

package/icons/AddColumnLeft.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const AddColumnLeft = (props) => (
+	<svg
+		id="Layer_2"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24px"
+		height="24px"
+		{...props}
+	>
+		<polygon points="3.5 14.8 5 14.8 5 12.8 7 12.8 7 11.3 5 11.3 5 9.3 3.5 9.3 3.5 11.3 1.5 11.3 1.5 12.8 3.5 12.8 3.5 14.8" />
+		<path d="M3.5,3.5v3.6h1.5v-2.1h6.3v14h-6.3v-2.1h-1.5v3.6h17V3.5H3.5ZM19,19h-6.2V5h6.2v14Z" />
+	</svg>
+);
+export default AddColumnLeft;

package/icons/AddColumnRight.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const AddColumnRight = (props) => (
+	<svg
+		id="Layer_2"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24px"
+		height="24px"
+		{...props}
+	>
+		<path d="M19,19h-6.2V5h6.2v2.1h1.5v-3.6H3.5v17h17v-3.6h-1.5v2.1ZM5,5h6.3v14h-6.3V5Z" />
+		<polygon points="20.5 11.3 20.5 9.3 19 9.3 19 11.3 17 11.3 17 12.8 19 12.8 19 14.8 20.5 14.8 20.5 12.8 22.5 12.8 22.5 11.3 20.5 11.3" />
+	</svg>
+);
+export default AddColumnRight;

package/icons/AddRowAbove.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const AddRowAbove = (props) => (
+	<svg
+		id="Layer_3"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24px"
+		height="24px"
+		{...props}
+	>
+		<polygon points="11.3 7 12.8 7 12.8 5 14.8 5 14.8 3.5 12.8 3.5 12.8 1.5 11.3 1.5 11.3 3.5 9.3 3.5 9.3 5 11.3 5 11.3 7" />
+		<path d="M16.9,3.5v1.5h2.1v6.2H5v-6.2h2.1v-1.5h-3.6v17h17V3.5h-3.6ZM5,19v-6.3h14v6.3H5Z" />
+	</svg>
+);
+export default AddRowAbove;

package/icons/AddRowBelow.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const AddRowBelow = (props) => (
+	<svg
+		id="Layer_2"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24px"
+		height="24px"
+		{...props}
+	>
+		<polygon points="12.8 17 11.3 17 11.3 19 9.3 19 9.3 20.5 11.3 20.5 11.3 22.5 12.8 22.5 12.8 20.5 14.8 20.5 14.8 19 12.8 19 12.8 17" />
+		<path d="M3.5,3.5v17h3.6v-1.5h-2.1v-6.3h14v6.3h-2.1v1.5h3.6V3.5H3.5ZM5,11.2v-6.2h14v6.2H5Z" />
+	</svg>
+);
+export default AddRowBelow;

package/icons/AlignHorizontalCenter.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const AlignHorizontalCenter = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M450-100v-193.85H260v-100.76h190v-170.78H140v-100.76h310V-860h60v193.85h310v100.76H510v170.78h190v100.76H510V-100h-60Z" />
+	</svg>
+);
+export default AlignHorizontalCenter;

package/icons/AlignHorizontalLeft.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const AlignHorizontalLeft = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M115.39-100v-760h60v760h-60Zm151.54-193.85v-100.76h337.68v100.76H266.93Zm0-271.54v-100.76h577.68v100.76H266.93Z" />
+	</svg>
+);
+export default AlignHorizontalLeft;

package/icons/AlignHorizontalRight.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const AlignHorizontalRight = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M784.61-100v-760h60v760h-60ZM355.39-293.85v-100.76h337.68v100.76H355.39Zm-240-271.54v-100.76h577.68v100.76H115.39Z" />
+	</svg>
+);
+export default AlignHorizontalRight;

package/icons/AlignVerticalBottom.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const AlignVerticalBottom = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M100-110v-60h760v60H100Zm193.85-151.54v-588.84h100.76v588.84H293.85Zm271.54 0v-348.84h100.76v348.84H565.39Z" />
+	</svg>
+);
+export default AlignVerticalBottom;

package/icons/AlignVerticalCenter.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const AlignVerticalCenter = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M291.92-140v-310H100v-60h191.92v-310h100.77v310h174.62v-190h100.77v190H860v60H668.08v190H567.31v-190H392.69v310H291.92Z" />
+	</svg>
+);
+export default AlignVerticalCenter;

package/icons/AlignVerticalTop.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const AlignVerticalTop = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M293.85-110v-588.84h100.76V-110H293.85Zm271.54-240v-348.84h100.76V-350H565.39ZM100-790.38v-60h760v60H100Z" />
+	</svg>
+);
+export default AlignVerticalTop;

package/icons/Backspace.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const Backspace = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M323.77-220 140-480l184.54-260H820v520H323.77Zm32-60H760v-400H355.77L213.38-480l142.39 200Zm93.31-53.85 104-104 104 104L699.23-376l-104-104 104-104-42.15-42.15-104 104-104-104L406.92-584l104 104-104 104 42.16 42.15ZM760-280v-400 400Z" />
+	</svg>
+);
+export default Backspace;

package/icons/Bold.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+const Bold = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		width="24px"
+		height="24px"
+		{...props}
+	>
+		<path d="M8 11H12.5C13.8807 11 15 9.88071 15 8.5C15 7.11929 13.8807 6 12.5 6H8V11ZM18 15.5C18 17.9853 15.9853 20 13.5 20H6V4H12.5C14.9853 4 17 6.01472 17 8.5C17 9.70431 16.5269 10.7981 15.7564 11.6058C17.0979 12.3847 18 13.837 18 15.5ZM8 13V18H13.5C14.8807 18 16 16.8807 16 15.5C16 14.1193 14.8807 13 13.5 13H8Z" />
+	</svg>
+);
+export default Bold;

package/icons/BorderAll.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderAll = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-680h680v680H140Zm620-60v-250H510v250h250Zm0-560H510v250h250v-250Zm-560 0v250h250v-250H200Zm0 560h250v-250H200v250Z" />
+	</svg>
+);
+export default BorderAll;

package/icons/BorderBottom.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderBottom = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-60h680v60H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84v-64.62h64.62v64.62H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84V-820h64.62v64.62H140Zm153.85 307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61Zm153.84 461.53v-64.61h64.62v64.61h-64.62Zm0-153.84v-64.62h64.62v64.62h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84V-820h64.62v64.62h-64.62Zm153.85 307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61Zm153.84 461.53v-64.61H820v64.61h-64.62Zm0-153.84v-64.62H820v64.62h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84V-820H820v64.62h-64.62Z" />
+	</svg>
+);
+export default BorderBottom;

package/icons/BorderClear.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderClear = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-64.62h64.62V-140H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84v-64.62h64.62v64.62H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84V-820h64.62v64.62H140ZM293.85-140v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM447.69-140v-64.62h64.62V-140h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84v-64.62h64.62v64.62h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84V-820h64.62v64.62h-64.62ZM601.54-140v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM755.38-140v-64.62H820V-140h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84v-64.62H820v64.62h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84V-820H820v64.62h-64.62Z" />
+	</svg>
+);
+export default BorderClear;

package/icons/BorderHorizontal.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderHorizontal = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-64.62h64.62V-140H140Zm0-153.85v-64.61h64.62v64.61H140ZM140-450v-60h680v60H140Zm0-151.54v-64.61h64.62v64.61H140Zm0-153.84V-820h64.62v64.62H140ZM293.85-140v-64.62h64.61V-140h-64.61Zm0-615.38V-820h64.61v64.62h-64.61ZM447.69-140v-64.62h64.62V-140h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-307.69v-64.61h64.62v64.61h-64.62Zm0-153.84V-820h64.62v64.62h-64.62ZM601.54-140v-64.62h64.61V-140h-64.61Zm0-615.38V-820h64.61v64.62h-64.61ZM755.38-140v-64.62H820V-140h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-307.69v-64.61H820v64.61h-64.62Zm0-153.84V-820H820v64.62h-64.62Z" />
+	</svg>
+);
+export default BorderHorizontal;

package/icons/BorderInner.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderInner = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-64.62h64.62V-140H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-307.69v-64.61h64.62v64.61H140Zm0-153.84V-820h64.62v64.62H140ZM293.85-140v-64.62h64.61V-140h-64.61Zm0-615.38V-820h64.61v64.62h-64.61ZM601.54-140v-64.62h64.61V-140h-64.61Zm153.84 0v-64.62H820V-140h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-307.69v-64.61H820v64.61h-64.62Zm0-153.84V-820H820v64.62h-64.62Zm-153.84 0V-820h64.61v64.62h-64.61ZM450-140v-310H140v-60h310v-310h60v310h310v60H510v310h-60Z" />
+	</svg>
+);
+export default BorderInner;

package/icons/BorderLeft.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderLeft = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-680h60v680h-60Zm153.85 0v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM447.69-140v-64.62h64.62V-140h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84v-64.62h64.62v64.62h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84V-820h64.62v64.62h-64.62ZM601.54-140v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM755.38-140v-64.62H820V-140h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84v-64.62H820v64.62h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84V-820H820v64.62h-64.62Z" />
+	</svg>
+);
+export default BorderLeft;

package/icons/BorderOuter.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderOuter = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M200-200h560v-560H200v560Zm-60 60v-680h680v680H140Zm153.85-307.69v-64.62h64.61v64.62h-64.61Zm153.84 153.84v-64.61h64.62v64.61h-64.62Zm0-153.84v-64.62h64.62v64.62h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm153.85 153.85v-64.62h64.61v64.62h-64.61Z" />
+	</svg>
+);
+export default BorderOuter;

package/icons/BorderRight.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderRight = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-64.62h64.62V-140H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84v-64.62h64.62v64.62H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84V-820h64.62v64.62H140ZM293.85-140v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM447.69-140v-64.62h64.62V-140h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84v-64.62h64.62v64.62h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84V-820h64.62v64.62h-64.62ZM601.54-140v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM760-140v-680h60v680h-60Z" />
+	</svg>
+);
+export default BorderRight;

package/icons/BorderTop.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderTop = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-64.62h64.62V-140H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84v-64.62h64.62v64.62H140Zm0-153.85v-64.61h64.62v64.61H140ZM140-760v-60h680v60H140Zm153.85 620v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61ZM447.69-140v-64.62h64.62V-140h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62Zm0-153.84v-64.62h64.62v64.62h-64.62Zm0-153.85v-64.61h64.62v64.61h-64.62ZM601.54-140v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61ZM755.38-140v-64.62H820V-140h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84v-64.62H820v64.62h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Z" />
+	</svg>
+);
+export default BorderTop;

package/icons/BorderVertical.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const BorderVertical = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-64.62h64.62V-140H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84v-64.62h64.62v64.62H140Zm0-153.85v-64.61h64.62v64.61H140Zm0-153.84V-820h64.62v64.62H140ZM293.85-140v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM450-140v-680h60v680h-60Zm151.54 0v-64.62h64.61V-140h-64.61Zm0-307.69v-64.62h64.61v64.62h-64.61Zm0-307.69V-820h64.61v64.62h-64.61ZM755.38-140v-64.62H820V-140h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84v-64.62H820v64.62h-64.62Zm0-153.85v-64.61H820v64.61h-64.62Zm0-153.84V-820H820v64.62h-64.62Z" />
+	</svg>
+);
+export default BorderVertical;

package/icons/Close.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const Close = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M256-213.85 213.85-256l224-224-224-224L256-746.15l224 224 224-224L746.15-704l-224 224 224 224L704-213.85l-224-224-224 224Z" />
+	</svg>
+);
+export default Close;

package/icons/Delete.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const Delete = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M220-140v-580h-40v-60h180v-35.38h240V-780h180v60h-40v580H220Zm60-60h400v-520H280v520Zm96.16-80h59.99v-360h-59.99v360Zm147.69 0h59.99v-360h-59.99v360ZM280-720v520-520Z" />
+	</svg>
+);
+export default Delete;

package/icons/EvenlyDistribute.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+const EvenlyDistribute = (props) => (
+	<svg
+		id="Layer_1"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24px"
+		height="24px"
+		{...props}
+	>
+		<path d="M4,19h4.3V5h-4.3v14ZM9.8,19h4.3V5h-4.3s0,14,0,14ZM15.7,19h4.3V5h-4.3s0,14,0,14ZM21.5,20.5H2.5V3.5h19v17Z" />
+	</svg>
+);
+export default EvenlyDistribute;

package/icons/FitWidth.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const FitWidth = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-680h64.62v680H140Zm615.38 0v-680H820v680h-64.62ZM293.85-447.69v-64.62h64.61v64.62h-64.61Zm153.84 0v-64.62h64.62v64.62h-64.62Zm153.85 0v-64.62h64.61v64.62h-64.61Z" />
+	</svg>
+);
+export default FitWidth;

package/icons/FitWidthArrows.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const FitWidthArrows = (props) => (
+	<svg
+		id="Layer_1"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24px"
+		height="24px"
+		{...props}
+	>
+		<g id="Layer_11" data-name="Layer_1">
+			<rect x={2.5} y={3.5} width={1.6} height={17} />
+			<rect x={19.9} y={3.5} width={1.6} height={17} />
+		</g>
+		<g id="Layer_3">
+			<polygon points="15.2 15.5 14.1 14.4 15.8 12.8 10.3 12.8 10.3 11.3 15.8 11.3 14.1 9.6 15.2 8.5 18.6 12 15.2 15.5" />
+			<polygon points="8.8 15.5 5.4 12 8.8 8.5 9.9 9.6 8.2 11.3 13.8 11.3 13.8 12.8 8.2 12.8 9.9 14.4 8.8 15.5" />
+		</g>
+	</svg>
+);
+export default FitWidthArrows;

package/icons/FormatAlignCenter.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const FormatAlignCenter = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-60h680v60H140Zm160-155v-60h360v60H300ZM140-450v-60h680v60H140Zm160-155v-60h360v60H300ZM140-760v-60h680v60H140Z" />
+	</svg>
+);
+export default FormatAlignCenter;

package/icons/FormatAlignJustify.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const FormatAlignJustify = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M140-140v-60h680v60H140Zm0-155v-60h680v60H140Zm0-155v-60h680v60H140Zm0-155v-60h680v60H140Zm0-155v-60h680v60H140Z" />
+	</svg>
+);
+export default FormatAlignJustify;