@yorab/react-paint 0.14.0 → 0.15.0

package/dist/canvas/utils/shapes/picture.d.ts

@@ -1,12 +1,16 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Picture, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
-export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape: T, settings: UtilsSettings) => T;
-export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
-export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: DrawableShape<"picture">) => void;
-export declare const getPictureBorder: (picture: Picture, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
-export declare const translatePicture: <U extends DrawableShape<"picture">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    x: number;
-    y: number;
+import type { DrawableShape, Point, ShapeEntity } from './../../../common/types/Shapes';
+export declare const getComputedPicture: (picture: DrawableShape<"picture">, settings: UtilsSettings) => {
+    borders: import("./../../../common/types/Shapes").Rect;
+    outerBorders: import("./../../../common/types/Shapes").Rect;
+    center: Point;
+    boundingBox: import("./../../../common/types/Shapes").Rect;
 };
-export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"picture">;
+export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape: T & {
+    id: string;
+}, settings: UtilsSettings) => ShapeEntity<"picture">;
+export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
+export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: ShapeEntity<"picture">) => void;
+export declare const translatePicture: (cursorPosition: Point, originalShape: ShapeEntity<"picture">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"picture">;
+export declare const resizePicture: (cursorPosition: Point, originalShape: ShapeEntity<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"picture">;

package/dist/canvas/utils/shapes/polygon.d.ts

@@ -2,17 +2,23 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Point, Polygon, Rect, ShapeEntity } from './../../../common/types/Shapes';
 import type { ToolsSettingsType } from './../../../common/types/tools';
-export declare const refreshPolygon: <T extends DrawableShape<"polygon">>(shape: T, settings: UtilsSettings) => T;
+export declare const getComputedPolygon: (polygon: DrawableShape<"polygon">, settings: UtilsSettings) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};
+export declare const refreshPolygon: <T extends DrawableShape<"polygon">>(shape: T & {
+    id: string;
+}, settings: UtilsSettings) => ShapeEntity<"polygon">;
 export declare const createPolygon: (shape: {
     id: string;
     type: "polygon";
     settings: ToolsSettingsType<"polygon">;
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
-export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: DrawableShape<"polygon">) => void;
+export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: ShapeEntity<"polygon">) => void;
 export declare const getPolygonBorder: (polygon: Polygon, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
-export declare const translatePolygon: <U extends DrawableShape<"polygon">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    points: [number, number][];
-};
-export declare const resizePolygon: (cursorPosition: Point, originalShape: DrawableShape<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<"polygon">;
-export declare const addPolygonLine: <T extends DrawableShape<"polygon">>(shape: T, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => T;
-export declare const addPolygonPoint: <T extends DrawableShape<"polygon">>(shape: T, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => T;
+export declare const translatePolygon: (cursorPosition: Point, originalShape: ShapeEntity<"polygon">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"polygon">;
+export declare const resizePolygon: (cursorPosition: Point, originalShape: ShapeEntity<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => ShapeEntity<"polygon">;
+export declare const addPolygonLine: (shape: ShapeEntity<"polygon">, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
+export declare const addPolygonPoint: (shape: ShapeEntity<"polygon">, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => ShapeEntity<"polygon">;

package/dist/canvas/utils/shapes/rectangle.d.ts

@@ -2,19 +2,64 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
 import type { ToolsSettingsType } from './../../../common/types/tools';
-type rectish = 'text' | 'rect' | 'square' | 'picture';
-export declare const refreshRect: <T extends DrawableShape<rectish>>(rect: T, settings: UtilsSettings, isGroup?: boolean) => T;
-export declare const createRectangle: <T extends "rect" | "square">(shape: {
+type rectish = 'rect' | 'square';
+export declare const getComputedRect: (rect: DrawableShape<rectish>, settings: UtilsSettings) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};
+export declare const refreshRect: <T extends rectish>(rect: DrawableShape<T> & {
+    id: string;
+}, settings: UtilsSettings, isGroup?: boolean) => ShapeEntity<T>;
+export declare const createRectangle: <T extends rectish>(shape: {
     id: string;
     type: T;
     settings: ToolsSettingsType<T>;
 }, cursorPosition: Point, settings: UtilsSettings, isGroup?: boolean, width?: number, height?: number) => ShapeEntity<T>;
-export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"rect" | "square">) => void;
+export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<rectish>) => void;
 export declare const getRectBorder: (rect: Rect, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const getRectOppositeAnchorAbsolutePosition: <T extends DrawableShape & Rect>(anchor: Point, center: Point, shape: T, [negW, negH]?: [boolean, boolean]) => Point;
-export declare const translateRect: <T extends "rect" | "square", U extends DrawableShape<T>>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    x: number;
-    y: number;
-};
-export declare const resizeRect: <T extends rectish>(cursorPosition: Point, originalShape: DrawableShape<T>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => DrawableShape<T>;
+export declare const translateRect: <T extends rectish>(cursorPosition: Point, originalShape: ShapeEntity<T>, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ({
+    id: string;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+} & {
+    rotation?: number;
+    toolId?: string;
+    visible?: boolean;
+    locked?: boolean;
+    style?: import("./../../../common/types/Shapes").StyleShape | undefined;
+} & Rect & {
+    type: "rect";
+} & {
+    selection?: import("./../../../common/types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: "rect";
+}) | ({
+    id: string;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+} & {
+    rotation?: number;
+    toolId?: string;
+    visible?: boolean;
+    locked?: boolean;
+    style?: import("./../../../common/types/Shapes").StyleShape | undefined;
+} & Rect & {
+    type: "square";
+} & {
+    selection?: import("./../../../common/types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: "square";
+});
+export declare const resizeRect: <T extends rectish>(cursorPosition: Point, originalShape: ShapeEntity<T>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => ShapeEntity<T>;
 export {};

package/dist/canvas/utils/shapes/text.d.ts

@@ -2,7 +2,15 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Point, Rect, ShapeEntity, Text } from './../../../common/types/Shapes';
 import type { ToolsSettingsType } from './../../../common/types/tools';
-export declare const refreshText: <T extends DrawableShape<"text">>(shape: T, settings: UtilsSettings) => T;
+export declare const getComputedText: (text: DrawableShape<"text">, settings: UtilsSettings) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};
+export declare const refreshText: <T extends DrawableShape<"text">>(shape: T & {
+    id: string;
+}, settings: UtilsSettings) => ShapeEntity<"text">;
 export declare const calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontBold: boolean, fontItalic: boolean, fontFamily?: string | undefined) => number;
 export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
     id: string;
@@ -11,9 +19,6 @@ export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"text">;
 export declare const drawText: (ctx: CanvasRenderingContext2D, text: DrawableShape<"text">) => void;
 export declare const getTextBorder: (text: Text, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
-export declare const translateText: <U extends DrawableShape<"text">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    x: number;
-    y: number;
-};
-export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: DrawableShape<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"text">;
-export declare const resizeTextShapeWithNewContent: <U extends DrawableShape<"text">>(ctx: CanvasRenderingContext2D, shape: U, newValue: string[], settings: UtilsSettings) => U;
+export declare const translateText: (cursorPosition: Point, originalShape: ShapeEntity<"text">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"text">;
+export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: ShapeEntity<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"text">;
+export declare const resizeTextShapeWithNewContent: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"text">, newValue: string[], settings: UtilsSettings) => ShapeEntity<"text">;

package/dist/canvas/utils/shapes/triangle.d.ts

@@ -1,3 +1,4 @@
-import type { DrawableShape, Triangle } from './../../../common/types/Shapes';
-export declare const createTriangle: (triangle: Triangle) => DrawableShape<"triangle">;
-export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: DrawableShape<"triangle">) => void;
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { Triangle, TriangleEntity } from './../../../common/types/Shapes';
+export declare const createTriangle: (triangle: Triangle, settings: UtilsSettings) => TriangleEntity;
+export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: TriangleEntity) => void;

package/dist/canvas/utils/trigo.d.ts

@@ -7,7 +7,7 @@ export declare const isCircleIntersectRect: (rect: Rect, circle: Circle) => bool
 export declare const rotatePoint: ({ origin, point, rotation }: {
     origin?: Point;
     point: Point;
-    rotation: number;
+    rotation?: number | undefined;
 }) => Point;
 export declare const getAngleFromVector: ({ targetVector: [point1, point2], radian, originVector }: {
     targetVector: Vector;

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

@@ -66,66 +66,103 @@ export type SelectionLinesType = {
     anchors: Path2D[];
 };
 export type DrawableShape<T extends ShapeType = ShapeType> = {
+    rotation?: number;
     toolId?: string;
     visible?: boolean;
     locked?: boolean;
-    rotation: number;
     style?: StyleShape | undefined;
 } & (T extends 'line' ? Line & {
     type: 'line';
-    selection?: SelectionLinesType | undefined;
-    path?: Path2D;
-    arrows?: DrawableShape<'triangle'>[];
 } : T extends 'picture' ? Picture & {
-    type: 'picture';
     img: HTMLImageElement;
-    selection?: SelectionDefaultType | undefined;
+    type: 'picture';
 } : T extends 'text' ? Text & {
     type: 'text';
-    selection?: SelectionDefaultType | undefined;
 } : T extends 'rect' ? Rect & {
     type: 'rect';
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D;
 } : T extends 'square' ? Rect & {
     type: 'square';
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D;
 } : T extends 'circle' ? Circle & {
     type: 'circle';
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D;
 } : T extends 'ellipse' ? Ellipse & {
     type: 'ellipse';
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D;
 } : T extends 'triangle' ? Triangle & {
     type: 'triangle';
-    path?: Path2D;
 } : T extends 'polygon' ? Polygon & {
     type: 'polygon';
-    selection?: SelectionLinesType | undefined;
-    path?: Path2D;
 } : T extends 'curve' ? Curve & {
     type: 'curve';
-    selection?: SelectionLinesType | undefined;
-    path?: Path2D;
 } : T extends 'brush' ? Brush & {
     type: 'brush';
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D;
     scaleX?: number;
     scaleY?: number;
 } : T extends 'group' ? Rect & {
-    type: 'group';
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D;
     shapes: ShapeEntity[];
+    type: 'group';
 } : never);
 export type ExportedDrawableShape<T extends ShapeType = ShapeType> = T extends 'picture' ? Omit<DrawableShape<'picture'>, 'img'> : DrawableShape<T>;
+export type TriangleEntity = DrawableShape<'triangle'> & {
+    path: Path2D;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+};
 export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<ShapeType, 'triangle'>> = {
     id: string;
-} & DrawableShape<T>;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+} & DrawableShape<T> & (T extends 'line' ? {
+    selection?: SelectionLinesType | undefined;
+    path?: Path2D | undefined;
+    arrows?: TriangleEntity[];
+    type: 'line';
+} : T extends 'picture' ? {
+    img: HTMLImageElement;
+    selection?: SelectionDefaultType | undefined;
+    type: 'picture';
+} : T extends 'text' ? {
+    selection?: SelectionDefaultType | undefined;
+    type: 'text';
+} : T extends 'rect' ? {
+    selection?: SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: 'rect';
+} : T extends 'square' ? {
+    selection?: SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: 'square';
+} : T extends 'circle' ? {
+    selection?: SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: 'circle';
+} : T extends 'ellipse' ? {
+    selection?: SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: 'ellipse';
+} : T extends 'polygon' ? {
+    selection?: SelectionLinesType | undefined;
+    path?: Path2D | undefined;
+    type: 'polygon';
+} : T extends 'curve' ? {
+    selection?: SelectionLinesType | undefined;
+    path?: Path2D | undefined;
+    type: 'curve';
+} : T extends 'brush' ? {
+    selection?: SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: 'brush';
+} : T extends 'group' ? {
+    selection?: SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: 'group';
+} : never);
 export type StateData = {
     shapes?: DrawableShape[];
     config?: {

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

@@ -1,4 +1,4 @@
 export type RecursivePartial<T> = {
-    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
+    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P] | undefined;
 };
 export type ValueOf<T> = T[keyof T];

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

@@ -7,10 +7,10 @@ type CommonType = {
     icon?: string | undefined;
 };
 type ButtonType = CommonType & React.ButtonHTMLAttributes<HTMLButtonElement>;
-type FileInputType = CommonType & {
+export type FileInputType = CommonType & {
     type: 'file' | 'color';
     accept?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
 } & React.InputHTMLAttributes<HTMLInputElement | HTMLButtonElement>;
-declare const Button: React.ForwardRefExoticComponent<(ButtonType | FileInputType) & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
+declare const Button: React.ForwardRefExoticComponent<(FileInputType | ButtonType) & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
 export default Button;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Button.css';
+declare const FileInput: React.ForwardRefExoticComponent<{
+    hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selected?: boolean | undefined;
+    icon?: string | undefined;
+} & {
+    type: "file" | "color";
+    accept?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & React.InputHTMLAttributes<HTMLButtonElement | HTMLInputElement> & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
+export default FileInput;

package/dist/editor/index.d.ts

@@ -7,17 +7,17 @@ type EditorProps = {
     style?: CSSProperties;
     children: ReactNode;
     options?: {
-        toolbarBackgroundColor?: string;
-        dividerColor?: string;
-        fontRadius?: number;
-        fontDisabledColor?: string;
-        fontDisabledBackgroundColor?: string;
-        fontColor?: string;
-        fontBackgroundColor?: string;
-        fontSelectedColor?: string;
-        fontSelectedBackgroundColor?: string;
-        fontHoverColor?: string;
-        fontHoverBackgroundColor?: string;
+        toolbarBackgroundColor?: string | undefined;
+        dividerColor?: string | undefined;
+        fontRadius?: number | undefined;
+        fontDisabledColor?: string | undefined;
+        fontDisabledBackgroundColor?: string | undefined;
+        fontColor?: string | undefined;
+        fontBackgroundColor?: string | undefined;
+        fontSelectedColor?: string | undefined;
+        fontSelectedBackgroundColor?: string | undefined;
+        fontHoverColor?: string | undefined;
+        fontHoverBackgroundColor?: string | undefined;
     };
 };
 declare const Editor: ({ editorProps, className, style, options, children }: EditorProps) => import("react/jsx-runtime").JSX.Element;

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-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%}
+.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:focus:not(:focus-visible){outline:none}.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%}