@yorab/react-paint 0.13.0 → 0.14.0

package/dist/common/types/Mode.d.ts

@@ -1,4 +1,4 @@
-import type { Point, ShapeEntity } from './Shapes';
+import type { Point, SelectionType } from './Shapes';
 export type SelectionModeDefault = {
     mode: 'default';
 };
@@ -17,21 +17,21 @@ export type SelectionModeEditText = {
 };
 export type SelectionModeResize<AnchorType extends Point | number = Point> = {
     mode: 'resize';
-    isCreating: boolean;
     cursorStartPosition: Point;
-    originalShape: ShapeEntity;
+    originalShape: SelectionType;
     anchor: AnchorType;
 };
 export type SelectionModeRotate = {
     mode: 'rotate';
     cursorStartPosition: Point;
-    originalShape: ShapeEntity;
+    originalShape: SelectionType;
     center: Point;
 };
 export type SelectionModeTranslate = {
     mode: 'translate';
     cursorStartPosition: Point;
-    originalShape: ShapeEntity;
+    originalShape: SelectionType;
+    dateStart: number;
 };
 export type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeSelectionFrame | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText | SelectionModePreview;
 export type HoverModeData = {

package/dist/common/types/Shapes.d.ts

@@ -22,11 +22,11 @@ export type Triangle = {
 };
 export type Polygon = {
     points: Point[];
-    tempPoint?: Point;
+    tempPoint?: Point | undefined;
 };
 export type Curve = {
     points: Point[];
-    tempPoint?: Point;
+    tempPoint?: Point | undefined;
 };
 export type Brush = {
     points: Point[][];
@@ -56,7 +56,7 @@ export type StyleShape = {
 };
 export type SelectionDefaultType = {
     border: Path2D;
-    line: Path2D;
+    line: Path2D | undefined;
     shapePath: Path2D | undefined;
     anchors: Path2D[];
 };
@@ -70,57 +70,61 @@ export type DrawableShape<T extends ShapeType = ShapeType> = {
     visible?: boolean;
     locked?: boolean;
     rotation: number;
-    style?: StyleShape;
+    style?: StyleShape | undefined;
 } & (T extends 'line' ? Line & {
     type: 'line';
-    selection?: SelectionLinesType;
+    selection?: SelectionLinesType | undefined;
     path?: Path2D;
     arrows?: DrawableShape<'triangle'>[];
 } : T extends 'picture' ? Picture & {
     type: 'picture';
     img: HTMLImageElement;
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
 } : T extends 'text' ? Text & {
     type: 'text';
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
 } : T extends 'rect' ? Rect & {
     type: 'rect';
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
     path?: Path2D;
 } : T extends 'square' ? Rect & {
     type: 'square';
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
     path?: Path2D;
 } : T extends 'circle' ? Circle & {
     type: 'circle';
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
     path?: Path2D;
 } : T extends 'ellipse' ? Ellipse & {
     type: 'ellipse';
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
     path?: Path2D;
 } : T extends 'triangle' ? Triangle & {
     type: 'triangle';
     path?: Path2D;
 } : T extends 'polygon' ? Polygon & {
     type: 'polygon';
-    selection?: SelectionLinesType;
+    selection?: SelectionLinesType | undefined;
     path?: Path2D;
 } : T extends 'curve' ? Curve & {
     type: 'curve';
-    selection?: SelectionLinesType;
+    selection?: SelectionLinesType | undefined;
     path?: Path2D;
 } : T extends 'brush' ? Brush & {
     type: 'brush';
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
     path?: Path2D;
     scaleX?: number;
     scaleY?: number;
+} : T extends 'group' ? Rect & {
+    type: 'group';
+    selection?: SelectionDefaultType | undefined;
+    path?: Path2D;
+    shapes: ShapeEntity[];
 } : never);
 export type ExportedDrawableShape<T extends ShapeType = ShapeType> = T extends 'picture' ? Omit<DrawableShape<'picture'>, 'img'> : DrawableShape<T>;
 export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<ShapeType, 'triangle'>> = {
     id: string;
-    toolId?: string;
 } & DrawableShape<T>;
 export type StateData = {
     shapes?: DrawableShape[];
@@ -129,3 +133,4 @@ export type StateData = {
         height: number;
     };
 };
+export type SelectionType = ShapeEntity;

package/dist/common/types/tools.d.ts

@@ -68,6 +68,9 @@ export type CustomTool = {
 } | {
     type: 'picture';
     settings: ToolsSettingsType<'picture'>;
+} | {
+    type: 'group';
+    settings: ToolsSettingsType<'group'>;
 });
 export type SettingsOpacity = {
     opacity: {
@@ -149,7 +152,8 @@ export type ToolsPolygonSettings = SettingsOpacity & SettingsStrokeColor & Setti
 export type ToolsCurveSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsClosedPoints;
 export type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
 export type ToolsPictureSettings = SettingsOpacity;
-export type ToolsSettingsType<T extends ShapeType> = T extends 'rect' ? ToolsRectSettings : T extends 'square' ? ToolsSquareSettings : T extends 'circle' ? ToolsCircleSettings : T extends 'ellipse' ? ToolsEllipseSettings : T extends 'text' ? ToolsTextSettings : T extends 'line' ? ToolsLineSettings : T extends 'brush' ? ToolsBrushSettings : T extends 'polygon' ? ToolsPolygonSettings : T extends 'curve' ? ToolsCurveSettings : T extends 'triangle' ? ToolsTriangleSettings : T extends 'picture' ? ToolsPictureSettings : never;
+export type ToolsGroupSettings = Partial<SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsLineArrow>;
+export type ToolsSettingsType<T extends ShapeType> = T extends 'rect' ? ToolsRectSettings : T extends 'square' ? ToolsSquareSettings : T extends 'circle' ? ToolsCircleSettings : T extends 'ellipse' ? ToolsEllipseSettings : T extends 'text' ? ToolsTextSettings : T extends 'line' ? ToolsLineSettings : T extends 'brush' ? ToolsBrushSettings : T extends 'polygon' ? ToolsPolygonSettings : T extends 'curve' ? ToolsCurveSettings : T extends 'triangle' ? ToolsTriangleSettings : T extends 'picture' ? ToolsPictureSettings : T extends 'group' ? ToolsGroupSettings : never;
 export type ActionsType = 'selection' | 'undo' | 'redo' | 'clear' | 'export' | 'loadfile' | 'savefile' | 'move' | 'uploadpicture' | 'addurlpicture';
 export type ActionsTool = {
     id: string;

package/dist/editor/components/common/Button.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import './Button.css';
 type CommonType = {
-    hidden?: boolean;
-    disabled?: boolean;
-    selected?: boolean;
-    icon?: string;
+    hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selected?: boolean | undefined;
+    icon?: string | undefined;
 };
 type ButtonType = CommonType & React.ButtonHTMLAttributes<HTMLButtonElement>;
 type FileInputType = CommonType & {

package/dist/editor/components/common/Panel.d.ts

@@ -9,7 +9,7 @@ type PanelType = {
     className?: string;
     fitContainer?: boolean;
     position?: 'bottom' | 'top';
-    alignment?: 'left' | 'right' | 'center';
+    alignment?: 'left' | 'right' | 'center' | undefined;
 };
 declare const Panel: ({ children, title, className, position, fitContainer, alignment, style, ...props }: PanelType) => import("react/jsx-runtime").JSX.Element;
 export default Panel;

package/dist/editor/components/settings/ClosedPointsField.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 type ClosedPointsType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     defaultValue?: number | undefined;
     valueChanged: (field: string, value: string | number) => void;
 };

package/dist/editor/components/settings/ColorField.d.ts

@@ -4,7 +4,7 @@ type ShapeStyleColorType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
     title?: string;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     field: string;
     mode?: 'fill' | 'stroke';
     value?: string | undefined;

package/dist/editor/components/settings/DeleteButton.d.ts

@@ -1,8 +1,8 @@
-import type { ShapeEntity } from './../../../common/types/Shapes';
+import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
 type DeleteShapeButtonType = {
     disabled?: boolean;
-    selectedShape: ShapeEntity;
-    removeShape: (shape: ShapeEntity) => void;
+    selectedShape: SelectionType;
+    removeShape: (shape: ShapeEntity[]) => void;
 };
 declare const DeleteButton: ({ disabled, selectedShape, removeShape }: DeleteShapeButtonType) => import("react/jsx-runtime").JSX.Element;
 export default DeleteButton;

package/dist/editor/components/settings/FontFamilyField.d.ts

@@ -3,7 +3,7 @@ import './FontFamilyField.css';
 type FontFamilyFieldType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     values: string[];
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;

package/dist/editor/components/settings/Layouts.d.ts

@@ -1,4 +1,4 @@
-import type { ShapeEntity } from './../../../common/types/Shapes';
+import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
 import type { GridLabelType } from './../../../editor/constants/grid';
 import './Layouts.css';
 import type { UtilsSettings } from './../../../canvas/constants/app';
@@ -7,13 +7,13 @@ type LayoutsType = {
     setGridFormat: (value: GridLabelType) => void;
     settings: UtilsSettings;
     shapes: ShapeEntity[];
-    removeShape: (shape: ShapeEntity) => void;
-    toggleShapeVisibility: (shape: ShapeEntity) => void;
-    toggleShapeLock: (shape: ShapeEntity) => void;
-    selectedShape: ShapeEntity | undefined;
-    selectShape: (shape: ShapeEntity) => void;
+    removeShape: (shape: ShapeEntity[]) => void;
+    toggleShapeVisibility: (shape: ShapeEntity[]) => void;
+    toggleShapeLock: (shape: ShapeEntity[]) => void;
+    selectedShapes: SelectionType | undefined;
+    selectShapes: (shapes: ShapeEntity[]) => void;
     moveShapes: (firstShapeId: string, lastShapeId: string) => void;
     isLayoutPanelShown: boolean;
 };
-declare const Layouts: ({ gridFormat, setGridFormat, settings, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShape, moveShapes, selectShape, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
+declare const Layouts: ({ gridFormat, setGridFormat, settings, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShapes, moveShapes, selectShapes, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
 export default Layouts;

package/dist/editor/components/settings/LineArrowField.d.ts

@@ -3,7 +3,7 @@ import './LineArrowField.css';
 type LineArrowType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     values: number[];
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;

package/dist/editor/components/settings/LineTypeField.d.ts

@@ -7,7 +7,7 @@ export declare const LineTypeOption: ({ children }: LineTypeOptionType) => impor
 type LineTypeType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     values: number[];
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;

package/dist/editor/components/settings/RangeField.d.ts

@@ -4,7 +4,7 @@ type ShapeStyleColorType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
     title?: string;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     field: string;
     icon: string;
     min?: number;

package/dist/editor/components/settings/SettingsBar.d.ts

@@ -1,5 +1,5 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { ShapeEntity } from './../../../common/types/Shapes';
+import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
 import type { CustomTool, ToolsType } from './../../../common/types/tools';
 import type React from 'react';
 import './SettingsBar.css';
@@ -9,11 +9,11 @@ type SettingsBarType = {
     updateToolSettings: (toolId: string, field: string, value: string | number | boolean) => void;
     layersManipulation?: boolean;
     activeTool: ToolsType;
-    selectedShape: ShapeEntity | undefined;
+    selectedShape: SelectionType | undefined;
     canvas: HTMLCanvasElement | null;
     settings: UtilsSettings;
-    updateShape: (shape: ShapeEntity, withSave?: boolean) => void;
-    removeShape: (shape: ShapeEntity) => void;
+    updateShape: (shape: ShapeEntity[], withSave?: boolean) => void;
+    removeShape: (shape: ShapeEntity[]) => void;
     toggleLayoutPanel: () => void;
     isZoomPanelShown: boolean;
     setIsZoomPanelShown: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/editor/components/settings/ToggleField.d.ts

@@ -1,11 +1,11 @@
 import type React from 'react';
 type ShapeStyleSelectType = {
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     field: string;
     icon: string;
     values: boolean[];
-    value?: boolean;
+    value?: boolean | undefined;
     valueChanged: (field: string, value: boolean) => void;
 };
 declare const ToggleField: ({ setSelectedSettings, disabled, field, icon, values, value, valueChanged }: ShapeStyleSelectType) => import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/components/settings/ZoomButton.d.ts

@@ -1,8 +1,8 @@
 import './ZoomButton.css';
 type ZoomButtonType = {
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     toggleZoomPanel: () => void;
-    className?: string;
+    className?: string | undefined;
 };
 declare const ZoomButton: ({ disabled, className, toggleZoomPanel }: ZoomButtonType) => import("react/jsx-runtime").JSX.Element;
 export default ZoomButton;

package/dist/editor/constants/icons.d.ts

@@ -39,3 +39,4 @@ export declare const noStrokeIcon = "<svg><path d=\"M16.354 18.833 14.521 17Q13.
 export declare const noFillIcon = "<svg><path d=\"M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM17 14.562 5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562Z\"/></svg>";
 export declare const zoomIn = "<svg viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z\"/></svg>";
 export declare const zoomOut = "<svg viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z\"/></svg>";
+export declare const groupIcon = "<svg><path d=\"M3.333 17.5V16.667H7.5V17.5ZM3.333 14.167V13.333H9.167V14.167ZM3.333 10.833V10H10.833V10.833ZM3.333 7.5V6.667H12.5V7.5ZM3.333 4.167V3.333H13.333V4.167ZM3.333 0.833V0H16.667V0.833Z\"/></svg>";

package/dist/editor/constants/tools.d.ts

@@ -1,4 +1,4 @@
-import type { ActionsTool, CustomTool, ToolsBrushSettings, ToolsCircleSettings, ToolsCurveSettings, ToolsEllipseSettings, ToolsLineSettings, ToolsPictureSettings, ToolsPolygonSettings, ToolsRectSettings, ToolsSquareSettings, ToolsTextSettings } from './../../common/types/tools';
+import type { ActionsTool, CustomTool, CustomToolInput, ToolsBrushSettings, ToolsCircleSettings, ToolsCurveSettings, ToolsEllipseSettings, ToolsLineSettings, ToolsPictureSettings, ToolsPolygonSettings, ToolsRectSettings, ToolsSquareSettings, ToolsTextSettings } from './../../common/types/tools';
 export declare const SETTINGS_DEFAULT_RECT: ToolsRectSettings;
 export declare const SETTINGS_DEFAULT_SQUARE: ToolsSquareSettings;
 export declare const SETTINGS_DEFAULT_CIRCLE: ToolsCircleSettings;
@@ -19,7 +19,7 @@ export declare const DEFAULT_SHAPE_SQUARE: CustomTool;
 export declare const DEFAULT_SHAPE_CIRCLE: CustomTool;
 export declare const DEFAULT_SHAPE_ELLIPSE: CustomTool;
 export declare const DEFAULT_SHAPE_TEXT: CustomTool;
-export declare const DEFAULT_SHAPE_TOOLS: CustomTool[];
+export declare const DEFAULT_SHAPE_TOOLS: CustomToolInput[];
 export declare const SELECTION_TOOL: ActionsTool;
 export declare const UNDO_TOOL: ActionsTool;
 export declare const REDO_TOOL: ActionsTool;

package/dist/editor/hooks/useDrag.d.ts

@@ -6,7 +6,7 @@ type useDragType = {
     shape: ShapeEntity;
     layoutDragging: string | undefined;
     setLayoutDragging: (shapeId: string | undefined) => void;
-    handleSelect: (shape: ShapeEntity) => void;
+    handleSelect: (shape: ShapeEntity[]) => void;
     onMoveShapes: (firstShapeId: string, lastShapeId: string) => void;
 };
 declare const useDrag: ({ disabled, ref, shape, layoutDragging, setLayoutDragging, handleSelect, onMoveShapes }: useDragType) => {

package/dist/editor/utils/style.d.ts

@@ -1,2 +1,2 @@
 import type { ShapeType } from './../../common/types/Shapes';
-export declare const getShapePicture: (shape: ShapeType) => "<svg><path d=\"M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z\"/></svg>" | "<svg><path d=\"M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z\"/></svg>" | "<svg><path d=\"M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z\"/></svg>" | "<svg><path d=\"M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z\"/></svg>" | "<svg><path d=\"M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z\"/></svg>" | "<svg><path d=\"M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z\"/></svg>" | "<svg><path d=\"M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z\"/></svg>" | "<svg><path d=\"M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z\"/></svg>" | "";
+export declare const getShapePicture: (shape: ShapeType) => "<svg><path d=\"M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z\"/></svg>" | "<svg><path d=\"M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z\"/></svg>" | "<svg><path d=\"M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z\"/></svg>" | "<svg><path d=\"M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z\"/></svg>" | "<svg><path d=\"M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z\"/></svg>" | "<svg><path d=\"M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z\"/></svg>" | "<svg><path d=\"M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z\"/></svg>" | "<svg><path d=\"M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z\"/></svg>" | "<svg><path d=\"M3.333 17.5V16.667H7.5V17.5ZM3.333 14.167V13.333H9.167V14.167ZM3.333 10.833V10H10.833V10.833ZM3.333 7.5V6.667H12.5V7.5ZM3.333 4.167V3.333H13.333V4.167ZM3.333 0.833V0H16.667V0.833Z\"/></svg>" | "";

package/dist/react-paint.css

@@ -1 +1 @@
-.react-paint-canvas-box{flex:1;justify-content:center;align-items:center;display:flex}.react-paint-canvas-container{background-color:var(--react-paint-app-canvas-bg);cursor:var(--react-paint-canvas-cursor);background-repeat:repeat;background-size:16px;display:grid;position:relative;overflow:hidden}.react-paint-canvas-container[data-grow=true]{width:100%;height:100%}.react-paint-canvas-drawcanvas{-webkit-user-select:none;user-select:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-canvas-selectioncanvas{-webkit-user-select:none;user-select:none;pointer-events:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-selectioncanvas[data-grow=true]{width:100%}.react-paint-editor-toolbox-edittextbox{transform-origin:0 0;box-sizing:border-box;transform:var(--react-paint-editor-toolbox-edittextbox-transform);color:var(--react-paint-editor-toolbox-edittextbox-color);padding:var(--react-paint-editor-toolbox-edittextbox-padding);line-height:1;font-size:var(--react-paint-editor-toolbox-edittextbox-fontsize);font-family:var(--react-paint-editor-toolbox-edittextbox-fontfamily);opacity:var(--react-paint-editor-toolbox-edittextbox-opacity);background:0 0;outline:none;width:max-content;display:inline-block;position:absolute;top:0;left:0}.react-paint-editor-toolbox-edittextbox[data-fontbold=true]{font-weight:700}.react-paint-editor-toolbox-edittextbox[data-fontitalic=true]{font-style:italic}.react-paint-app-row{max-width:100%;aspect-ratio:var(--react-paint-app-row-aspectratio);width:100%;position:relative}.react-paint-app-row[data-grow=false]{max-width:calc(var(--react-paint-app-canvaswidth)*1px)}.react-paint-app-row[data-shrink=false]{min-width:calc(var(--react-paint-app-canvaswidth)*1px)}.react-paint-editor-loading{z-index:var(--react-paint-editor-loading-zindex);transition:opacity var(--react-paint-editor-loading-transition-duration)linear;opacity:0;background:#00000050;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-loading[data-loading=visible]{opacity:1}@keyframes react-paint-editor-loading-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.react-paint-editor-loader{width:40px;height:40px;animation:1s infinite react-paint-editor-loading-rotation;position:relative;transform:rotate(10deg)}.react-paint-editor-loader>div{border-radius:50%;width:15px;height:15px;position:absolute}.react-paint-editor-loader>div:first-child{background-color:#5c6bc0;left:0}.react-paint-editor-loader>div:nth-child(2){background-color:#8bc34a;right:0}.react-paint-editor-loader>div:nth-child(3){background-color:#ffb74d;bottom:0}.react-paint-editor-loader>div:nth-child(4){background-color:#f44336;bottom:0;right:0}.react-paint-editor-snackbar-container{z-index:var(--react-paint-editor-snackbar-zindex);flex-direction:column-reverse;align-items:center;height:0;display:flex;position:absolute;bottom:0;left:0;right:0}.react-paint-editor-snackbar{color:#fff;overflow-wrap:break-word;box-sizing:border-box;max-width:calc(100% - 24px);transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;margin:4px;padding:12px 48px;display:inline-block;transform:translateY(40px)}.react-paint-editor-snackbar[data-type=infos]{background:#646464}.react-paint-editor-snackbar[data-type=error]{background:#911717}.react-paint-editor-snackbar[data-type=success]{background:#088900}.react-paint-editor-snackbar[data-is-shown="1"]{opacity:1;transform:translate(0,0)}.react-paint-editor-snackbar[data-is-shown="0"]{opacity:0;transform:translateY(40px)}.react-paint-editor-button{vertical-align:middle;box-sizing:border-box;cursor:pointer;border-radius:var(--react-paint-editor-app-font-radius);min-width:32px;height:32px;color:var(--react-paint-editor-app-font-color);padding:var(--react-paint-editor-button-padding,0);background:0 0;border:none;justify-content:center;align-items:center;margin:2px 4px;font-size:14px;display:inline-flex}.react-paint-editor-button[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-button[data-hidden="1"]{visibility:hidden}.react-paint-editor-button[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-button[data-disabled="0"]{cursor:pointer}.react-paint-editor-button svg{fill:currentColor;width:20px;height:20px}.react-paint-editor-button input{display:none}.react-paint-editor-button-content{box-sizing:border-box;width:100%;padding:2px 6px;display:flex}.react-paint-editor-button-icon{align-items:center;display:flex}.react-paint-editor-button-children{text-align:left;flex:1;align-items:center;display:flex}.react-paint-editor-button-children+.react-paint-editor-button-icon{margin-left:12px}.react-paint-editor-panel{z-index:var(--react-paint-editor-panel-zindex);background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;box-sizing:border-box;border-radius:8px;padding:8px;position:absolute;box-shadow:0 3px 8px #0000003d}.react-paint-editor-panel[data-alignment=left]{margin:4px;left:0}.react-paint-editor-panel[data-alignment=center]{margin:4px 0;left:50%;transform:translate(-50%)}.react-paint-editor-panel[data-alignment=right]{margin:4px;right:0}.react-paint-editor-panel[data-position=bottom]{bottom:100%}.react-paint-editor-panel[data-position=top]{top:100%}.react-paint-editor-panel[data-fitcontainer=true]{max-width:100%}.react-paint-editor-panel-title{margin-top:4px;margin-bottom:8px;font-size:18px}.react-paint-editor-layouts{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;min-width:200px;display:inline-block;overflow-y:auto}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button{margin:2px 0}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button:not(:hover){opacity:.2}.react-paint-editor-layout{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;border:3px solid #0000;justify-content:space-between;align-items:center;padding:4px 0;display:flex;position:relative}.react-paint-editor-layout[data-is-over="1"]{border:3px dotted var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-is-dragging="1"]{opacity:.4}.react-paint-editor-layout[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-layout[data-selected="1"] .react-paint-editor-layouts-remove-button{color:#fff}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-layout[data-disabled="0"]{cursor:move}.react-paint-editor-layout>span{color:#8a8a8a;height:20px;line-height:1}.react-paint-editor-layout>span>svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;transform:scale(.75)}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button{margin:2px 0}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button[data-visible=false]{opacity:.2}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button{margin:2px 0}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button[data-locked=false]{opacity:.2}.react-paint-editor-layouts-grid-button.react-paint-editor-layouts-grid-button span{justify-content:center}.react-paint-editor-layouts-subtitle{min-width:60px;font-weight:700}.react-paint-editor-layouts-separator{flex:1}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel{bottom:36px;top:unset}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel[data-edit="0"]{bottom:0;top:unset}.react-paint-editor-layouts-panel-content{flex-direction:column;max-height:100%;display:flex}.react-paint-editor-layouts-scrolling-content{flex-direction:column;display:flex;overflow-y:auto}.react-paint-editor-layouts-row{align-items:center;display:flex}.react-paint-editor-layouts-placeholder{opacity:.6;text-align:center;padding:12px 0}.react-paint-editor-modal{z-index:var(--react-paint-editor-modal-zindex);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-modal[data-position=center]{align-items:center}.react-paint-editor-modal[data-position=bottom]{align-items:end}.react-paint-editor-modal-panel{background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;border-radius:8px;padding:4px;display:grid;position:relative;box-shadow:0 3px 8px #0000003d}.react-paint-editor-modal-mask{background:#00000073;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-colorfield-color{box-sizing:border-box;border-radius:50%;width:20px;height:20px}.react-paint-editor-colorfield-color[data-mode=fill]{background:var(--react-paint-editor-colorfield-color-value);border:1px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]{border:4px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]:after{content:"";border:2px solid var(--react-paint-editor-colorfield-color-value);box-sizing:border-box;border-radius:100%;width:18px;height:18px;display:block;position:relative;top:-3px;left:-3px}.react-paint-editor-colorfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-colorfield-customcolor{box-sizing:border-box;width:20px;height:20px;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;font-weight:700;display:flex}.react-paint-editor-fontfamily-option{font-family:var(--react-paint-editor-fontfamily-family)}.react-paint-editor-selectfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-layout-opened .react-paint-editor-layout-button.react-paint-editor-layout-button.react-paint-editor-layout-button{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-linearrow-left{border-top:5px solid #0000;border-bottom:5px solid #0000;border-right:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;left:0;transform:translate(-25%,-50%)}.react-paint-editor-linearrow-right{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;right:0;transform:translate(25%,-50%)}.react-paint-editor-linearrow-option{vertical-align:middle;background:currentColor;width:60px;height:2px;display:inline-block;position:relative}.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="1"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-right,.react-paint-editor-linearrow-option[data-type="2"] .react-paint-editor-linearrow-right{display:none}.react-paint-editor-linetype-option{display:inline-block}.react-paint-editor-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.react-paint-editor-linetype-option[data-type="0"]>span{background:currentColor}.react-paint-editor-linetype-option[data-type="2"]{position:relative;left:3px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(3n-1){background:currentColor;width:12px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(n+11){display:none}.react-paint-editor-linetype-option[data-type="1"]>span:nth-child(odd){background:currentColor}.react-paint-editor-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.react-paint-editor-settings-bar{-webkit-user-select:none;user-select:none;background:var(--react-paint-editor-app-toolbar-bg);border-top:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;height:36px;display:flex;position:relative}.react-paint-editor-settings-shrinkable{text-align:left;flex:1;height:100%;display:flex;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.react-paint-editor-zoom-button{margin:0}.react-paint-editor-zoom-button .react-paint-editor-button-children{justify-content:center}.react-paint-editor-zoom-button-value{min-width:60px}.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-toolbox-panel-content{display:flex}.react-paint-editor-toolbox-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbox-relative{display:inline-block;position:relative}.react-paint-editor-toolbox-pictureinput-modal form{grid-template-columns:3fr 1fr 1fr}.react-paint-editor-toolbox-pictureinput-modal form input{color:var(--react-paint-editor-app-font-color);border:1px solid var(--react-paint-editor-app-font-color);background:var(--react-paint-editor-app-toolbar-bg);outline:none}.react-paint-editor-toolbar-shrinkable{text-align:center;flex:1;height:100%;position:relative}.react-paint-editor-toolbar-toolbox{background:var(--react-paint-editor-app-toolbar-bg);border-bottom:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;max-height:36px;min-width:var(--react-paint-editor-toolbar-minwidth);display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.react-paint-editor-toolbox-export-modal h3{margin-top:8px;margin-bottom:0;font-size:18px}.react-paint-editor-toolbargroup-panel-content{display:flex}.react-paint-editor-toolbargroup-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbargroup-relative{display:inline-block;position:relative}.react-paint-editor-app{color:var(--react-paint-editor-app-font-color);max-width:min(100%,var(--react-paint-editor-app-maxWidth));flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex;position:relative}.react-paint-editor-app hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}
+.react-paint-canvas-box{flex:1;justify-content:center;align-items:center;display:flex}.react-paint-canvas-container{background-color:var(--react-paint-app-canvas-bg);cursor:var(--react-paint-canvas-cursor);background-repeat:repeat;background-size:16px;display:grid;position:relative;overflow:hidden}.react-paint-canvas-container[data-grow=true]{width:100%;height:100%}.react-paint-canvas-drawcanvas{-webkit-user-select:none;user-select:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-canvas-selectioncanvas{-webkit-user-select:none;user-select:none;pointer-events:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-selectioncanvas[data-grow=true]{width:100%}.react-paint-editor-toolbox-edittextbox{transform-origin:0 0;box-sizing:border-box;transform:var(--react-paint-editor-toolbox-edittextbox-transform);color:var(--react-paint-editor-toolbox-edittextbox-color);padding:var(--react-paint-editor-toolbox-edittextbox-padding);line-height:1;font-size:var(--react-paint-editor-toolbox-edittextbox-fontsize);font-family:var(--react-paint-editor-toolbox-edittextbox-fontfamily);opacity:var(--react-paint-editor-toolbox-edittextbox-opacity);background:0 0;outline:none;width:max-content;display:inline-block;position:absolute;top:0;left:0}.react-paint-editor-toolbox-edittextbox[data-fontbold=true]{font-weight:700}.react-paint-editor-toolbox-edittextbox[data-fontitalic=true]{font-style:italic}.react-paint-app-row{max-width:100%;aspect-ratio:var(--react-paint-app-row-aspectratio);width:100%;position:relative}.react-paint-app-row[data-grow=false]{max-width:calc(var(--react-paint-app-canvaswidth)*1px)}.react-paint-app-row[data-shrink=false]{min-width:calc(var(--react-paint-app-canvaswidth)*1px)}.react-paint-editor-loading{z-index:var(--react-paint-editor-loading-zindex);transition:opacity var(--react-paint-editor-loading-transition-duration)linear;opacity:0;background:#00000050;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-loading[data-loading=visible]{opacity:1}@keyframes react-paint-editor-loading-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.react-paint-editor-loader{width:40px;height:40px;animation:1s infinite react-paint-editor-loading-rotation;position:relative;transform:rotate(10deg)}.react-paint-editor-loader>div{border-radius:50%;width:15px;height:15px;position:absolute}.react-paint-editor-loader>div:first-child{background-color:#5c6bc0;left:0}.react-paint-editor-loader>div:nth-child(2){background-color:#8bc34a;right:0}.react-paint-editor-loader>div:nth-child(3){background-color:#ffb74d;bottom:0}.react-paint-editor-loader>div:nth-child(4){background-color:#f44336;bottom:0;right:0}.react-paint-editor-snackbar-container{z-index:var(--react-paint-editor-snackbar-zindex);flex-direction:column-reverse;align-items:center;height:0;display:flex;position:absolute;bottom:0;left:0;right:0}.react-paint-editor-snackbar{color:#fff;overflow-wrap:break-word;box-sizing:border-box;max-width:calc(100% - 24px);transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;margin:4px;padding:12px 48px;display:inline-block;transform:translateY(40px)}.react-paint-editor-snackbar[data-type=infos]{background:#646464}.react-paint-editor-snackbar[data-type=error]{background:#911717}.react-paint-editor-snackbar[data-type=success]{background:#088900}.react-paint-editor-snackbar[data-is-shown="1"]{opacity:1;transform:translate(0,0)}.react-paint-editor-snackbar[data-is-shown="0"]{opacity:0;transform:translateY(40px)}.react-paint-editor-button{vertical-align:middle;box-sizing:border-box;cursor:pointer;border-radius:var(--react-paint-editor-app-font-radius);min-width:32px;height:32px;color:var(--react-paint-editor-app-font-color);padding:var(--react-paint-editor-button-padding,0);background:0 0;border:none;justify-content:center;align-items:center;margin:2px 4px;font-size:14px;display:inline-flex}.react-paint-editor-button[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-button[data-hidden="1"]{visibility:hidden}.react-paint-editor-button[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-button[data-disabled="0"]{cursor:pointer}.react-paint-editor-button svg{fill:currentColor;width:20px;height:20px}.react-paint-editor-button input{display:none}.react-paint-editor-button-content{box-sizing:border-box;width:100%;padding:2px 6px;display:flex}.react-paint-editor-button-icon{align-items:center;display:flex}.react-paint-editor-button-children{text-align:left;flex:1;align-items:center;display:flex}.react-paint-editor-button-children+.react-paint-editor-button-icon{margin-left:12px}.react-paint-editor-panel{z-index:var(--react-paint-editor-panel-zindex);background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;box-sizing:border-box;border-radius:8px;padding:8px;position:absolute;box-shadow:0 3px 8px #0000003d}.react-paint-editor-panel[data-alignment=left]{margin:4px;left:0}.react-paint-editor-panel[data-alignment=center]{margin:4px 0;left:50%;transform:translate(-50%)}.react-paint-editor-panel[data-alignment=right]{margin:4px;right:0}.react-paint-editor-panel[data-position=bottom]{bottom:100%}.react-paint-editor-panel[data-position=top]{top:100%}.react-paint-editor-panel[data-fitcontainer=true]{max-width:100%}.react-paint-editor-panel-title{margin-top:4px;margin-bottom:8px;font-size:18px}.react-paint-editor-layouts{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;min-width:200px;display:inline-block;overflow-y:auto}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button{margin:2px 0}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button:not(:hover){opacity:.2}.react-paint-editor-layout{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;border:3px solid #0000;justify-content:space-between;align-items:center;padding:4px 0;display:flex;position:relative}.react-paint-editor-layout[data-is-over="1"]{border:3px dotted var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-is-dragging="1"]{opacity:.4}.react-paint-editor-layout[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-layout[data-selected="1"] .react-paint-editor-layouts-remove-button{color:#fff}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-layout[data-disabled="0"]{cursor:move}.react-paint-editor-layout>span{color:#8a8a8a;height:20px;line-height:1}.react-paint-editor-layout>span>svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;transform:scale(.75)}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button{margin:2px 0}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button[data-visible=false]{opacity:.2}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button{margin:2px 0}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button[data-locked=false]{opacity:.2}.react-paint-editor-layouts-grid-button.react-paint-editor-layouts-grid-button span{justify-content:center}.react-paint-editor-layouts-subtitle{min-width:60px;font-weight:700}.react-paint-editor-layouts-separator{flex:1}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel{bottom:36px;top:unset}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel[data-edit="0"]{bottom:0;top:unset}.react-paint-editor-layouts-panel-content{flex-direction:column;max-height:100%;display:flex}.react-paint-editor-layouts-scrolling-content{flex-direction:column;display:flex;overflow-y:auto}.react-paint-editor-layouts-row{align-items:center;display:flex}.react-paint-editor-layouts-placeholder{opacity:.6;text-align:center;padding:12px 0}.react-paint-editor-modal{z-index:var(--react-paint-editor-modal-zindex);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-modal[data-position=center]{align-items:center}.react-paint-editor-modal[data-position=bottom]{align-items:end}.react-paint-editor-modal-panel{background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;border-radius:8px;padding:4px;display:grid;position:relative;box-shadow:0 3px 8px #0000003d}.react-paint-editor-modal-mask{background:#00000073;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-colorfield-color{box-sizing:border-box;border-radius:50%;width:20px;height:20px}.react-paint-editor-colorfield-color[data-mode=fill]{background:var(--react-paint-editor-colorfield-color-value);border:1px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]{border:4px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]:after{content:"";border:2px solid var(--react-paint-editor-colorfield-color-value);box-sizing:border-box;border-radius:100%;width:18px;height:18px;display:block;position:relative;top:-3px;left:-3px}.react-paint-editor-colorfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-colorfield-customcolor{box-sizing:border-box;width:20px;height:20px;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;font-weight:700;display:flex}.react-paint-editor-fontfamily-option{font-family:var(--react-paint-editor-fontfamily-family)}.react-paint-editor-selectfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-layout-opened .react-paint-editor-layout-button.react-paint-editor-layout-button.react-paint-editor-layout-button{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-linearrow-left{border-top:5px solid #0000;border-bottom:5px solid #0000;border-right:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;left:0;transform:translate(-25%,-50%)}.react-paint-editor-linearrow-right{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;right:0;transform:translate(25%,-50%)}.react-paint-editor-linearrow-option{vertical-align:middle;background:currentColor;width:60px;height:2px;display:inline-block;position:relative}.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="1"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-right,.react-paint-editor-linearrow-option[data-type="2"] .react-paint-editor-linearrow-right{display:none}.react-paint-editor-linetype-option{display:inline-block}.react-paint-editor-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.react-paint-editor-linetype-option[data-type="0"]>span{background:currentColor}.react-paint-editor-linetype-option[data-type="2"]{position:relative;left:3px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(3n-1){background:currentColor;width:12px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(n+11){display:none}.react-paint-editor-linetype-option[data-type="1"]>span:nth-child(odd){background:currentColor}.react-paint-editor-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.react-paint-editor-rangefield [data-indeterminate="1"]{opacity:.25}.react-paint-editor-settings-bar{-webkit-user-select:none;user-select:none;background:var(--react-paint-editor-app-toolbar-bg);border-top:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;height:36px;display:flex;position:relative}.react-paint-editor-settings-shrinkable{text-align:left;flex:1;height:100%;display:flex;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.react-paint-editor-zoom-button{margin:0}.react-paint-editor-zoom-button .react-paint-editor-button-children{justify-content:center}.react-paint-editor-zoom-button-value{min-width:60px}.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-toolbox-panel-content{display:flex}.react-paint-editor-toolbox-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbox-relative{display:inline-block;position:relative}.react-paint-editor-toolbox-pictureinput-modal form{grid-template-columns:3fr 1fr 1fr}.react-paint-editor-toolbox-pictureinput-modal form input{color:var(--react-paint-editor-app-font-color);border:1px solid var(--react-paint-editor-app-font-color);background:var(--react-paint-editor-app-toolbar-bg);outline:none}.react-paint-editor-toolbar-shrinkable{text-align:center;flex:1;height:100%;position:relative}.react-paint-editor-toolbar-toolbox{background:var(--react-paint-editor-app-toolbar-bg);border-bottom:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;max-height:36px;min-width:var(--react-paint-editor-toolbar-minwidth);display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.react-paint-editor-toolbox-export-modal h3{margin-top:8px;margin-bottom:0;font-size:18px}.react-paint-editor-toolbargroup-panel-content{display:flex}.react-paint-editor-toolbargroup-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbargroup-relative{display:inline-block;position:relative}.react-paint-editor-app{color:var(--react-paint-editor-app-font-color);max-width:min(100%,var(--react-paint-editor-app-maxWidth));flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex;position:relative}.react-paint-editor-app hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}