@yorab/react-paint 0.10.1 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/README.md +191 -1
  2. package/dist/{components → canvas/components}/Canvas.d.ts +4 -4
  3. package/dist/{components/toolbox → canvas/components}/EditTextBox.d.ts +3 -4
  4. package/dist/canvas/constants/app.d.ts +44 -0
  5. package/dist/canvas/constants/grid.d.ts +1 -0
  6. package/dist/{constants → canvas/constants}/shapes.d.ts +1 -1
  7. package/dist/{hooks → canvas/hooks}/useComponent.d.ts +1 -1
  8. package/dist/{hooks → canvas/hooks}/useDrawableCanvas.d.ts +5 -5
  9. package/dist/{hooks → canvas/hooks}/useKeyboard.d.ts +2 -2
  10. package/dist/canvas/hooks/useReactPaint.d.ts +119 -0
  11. package/dist/{hooks → canvas/hooks}/useShapes.d.ts +9 -4
  12. package/dist/canvas/index.d.ts +15 -0
  13. package/dist/{utils → canvas/utils}/canvas.d.ts +2 -2
  14. package/dist/{utils → canvas/utils}/data.d.ts +4 -4
  15. package/dist/{utils → canvas/utils}/file.d.ts +3 -3
  16. package/dist/{utils → canvas/utils}/grid.d.ts +1 -1
  17. package/dist/{utils → canvas/utils}/intersect.d.ts +3 -3
  18. package/dist/{utils → canvas/utils}/selection/lineSelection.d.ts +2 -2
  19. package/dist/{utils → canvas/utils}/selection/rectSelection.d.ts +3 -3
  20. package/dist/canvas/utils/selection/selectionFrame.d.ts +3 -0
  21. package/dist/{utils → canvas/utils}/selection.d.ts +3 -3
  22. package/dist/{utils → canvas/utils}/shapes/brush.d.ts +4 -4
  23. package/dist/{utils → canvas/utils}/shapes/circle.d.ts +4 -4
  24. package/dist/{utils → canvas/utils}/shapes/curve.d.ts +5 -5
  25. package/dist/{utils → canvas/utils}/shapes/ellipse.d.ts +4 -4
  26. package/dist/{utils → canvas/utils}/shapes/index.d.ts +5 -5
  27. package/dist/{utils → canvas/utils}/shapes/line.d.ts +4 -4
  28. package/dist/{utils → canvas/utils}/shapes/path.d.ts +2 -2
  29. package/dist/{utils → canvas/utils}/shapes/picture.d.ts +3 -3
  30. package/dist/{utils → canvas/utils}/shapes/polygon.d.ts +4 -4
  31. package/dist/{utils → canvas/utils}/shapes/rectangle.d.ts +4 -4
  32. package/dist/{utils → canvas/utils}/shapes/text.d.ts +4 -4
  33. package/dist/{utils → canvas/utils}/shapes/triangle.d.ts +1 -1
  34. package/dist/{utils → canvas/utils}/string.d.ts +0 -1
  35. package/dist/canvas/utils/tools.d.ts +3 -0
  36. package/dist/{utils → canvas/utils}/transform.d.ts +3 -3
  37. package/dist/{utils → canvas/utils}/trigo.d.ts +4 -4
  38. package/dist/{types → common/types}/Shapes.d.ts +4 -4
  39. package/dist/common/utils/array.d.ts +1 -0
  40. package/dist/editor/components/common/Loading.d.ts +6 -0
  41. package/dist/{components → editor/components}/common/Modal.d.ts +2 -2
  42. package/dist/{components → editor/components}/common/Panel.d.ts +2 -2
  43. package/dist/{components → editor/components}/common/Snackbar.d.ts +2 -3
  44. package/dist/{components → editor/components}/settings/ColorField.d.ts +2 -2
  45. package/dist/{components → editor/components}/settings/DeleteButton.d.ts +2 -3
  46. package/dist/{components → editor/components}/settings/FontFamilyField.d.ts +2 -2
  47. package/dist/{components → editor/components}/settings/LayoutButton.d.ts +1 -2
  48. package/dist/{components → editor/components}/settings/Layouts.d.ts +5 -6
  49. package/dist/{components → editor/components}/settings/LineArrowField.d.ts +2 -2
  50. package/dist/{components → editor/components}/settings/LineTypeField.d.ts +3 -3
  51. package/dist/{components → editor/components}/settings/PointsNumberField.d.ts +2 -2
  52. package/dist/{components → editor/components}/settings/RangeField.d.ts +2 -2
  53. package/dist/{components → editor/components}/settings/SelectField.d.ts +2 -2
  54. package/dist/{components → editor/components}/settings/SettingsBar.d.ts +4 -5
  55. package/dist/{components → editor/components}/settings/ToggleField.d.ts +2 -2
  56. package/dist/{components → editor/components}/toolbox/LoadFileTool.d.ts +2 -3
  57. package/dist/{components → editor/components}/toolbox/MenuGroup.d.ts +3 -4
  58. package/dist/{components → editor/components}/toolbox/PictureUrlInput.d.ts +1 -2
  59. package/dist/{components → editor/components}/toolbox/Tool.d.ts +2 -3
  60. package/dist/{components → editor/components}/toolbox/Toolbar.d.ts +3 -4
  61. package/dist/{components → editor/components}/toolbox/ToolbarGroup.d.ts +2 -3
  62. package/dist/editor/constants/grid.d.ts +7 -0
  63. package/dist/editor/constants/options.d.ts +13 -0
  64. package/dist/{constants → editor/constants}/snackbar.d.ts +1 -1
  65. package/dist/{constants → editor/constants}/style.d.ts +0 -3
  66. package/dist/{constants → editor/constants}/tools.d.ts +1 -1
  67. package/dist/{hooks → editor/hooks}/useDrag.d.ts +2 -2
  68. package/dist/{hooks → editor/hooks}/useSnackbar.d.ts +3 -3
  69. package/dist/editor/index.d.ts +24 -0
  70. package/dist/{utils → editor/utils}/style.d.ts +1 -1
  71. package/dist/editor/utils/toolbar.d.ts +11 -0
  72. package/dist/index.d.ts +6 -0
  73. package/dist/react-paint.css +1 -1
  74. package/dist/react-paint.js +970 -943
  75. package/dist/react-paint.umd.cjs +1 -1
  76. package/package.json +61 -56
  77. package/dist/components/App.d.ts +0 -20
  78. package/dist/components/common/Loading.d.ts +0 -7
  79. package/dist/constants/app.d.ts +0 -58
  80. package/dist/utils/array.d.ts +0 -1
  81. package/dist/utils/selection/selectionFrame.d.ts +0 -3
  82. package/dist/utils/toolbar.d.ts +0 -13
  83. /package/dist/{constants → canvas/constants}/picture.d.ts +0 -0
  84. /package/dist/{hooks → canvas/hooks}/useDoubleClick.d.ts +0 -0
  85. /package/dist/{hooks → canvas/hooks}/useResizeObserver.d.ts +0 -0
  86. /package/dist/{types → common/types}/Mode.d.ts +0 -0
  87. /package/dist/{types → common/types}/react.d.ts +0 -0
  88. /package/dist/{types → common/types}/tools.d.ts +0 -0
  89. /package/dist/{types → common/types}/utils.d.ts +0 -0
  90. /package/dist/{utils → common/utils}/dom.d.ts +0 -0
  91. /package/dist/{utils → common/utils}/object.d.ts +0 -0
  92. /package/dist/{utils → common/utils}/util.d.ts +0 -0
  93. /package/dist/{components → editor/components}/common/Button.d.ts +0 -0
  94. /package/dist/{constants → editor/constants}/icons.d.ts +0 -0
  95. /package/dist/{constants → editor/constants}/loading.d.ts +0 -0
  96. /package/dist/{types → editor/types}/snackbar.d.ts +0 -0
package/dist/{utils → editor/utils}/style.d.ts RENAMED
@@ -1,2 +1,2 @@
1
- import type { ShapeType } from '../types/Shapes';
1
+ import type { ShapeType } from './../../common/types/Shapes';
2
2
  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>" | "";
package/dist/editor/utils/toolbar.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { ShapeType } from './../../common/types/Shapes';
2
+ import type { CustomTool } from './../../common/types/tools';
3
+ export declare const getCurrentStructure: (availableTools: CustomTool[], defaultStructure: (ShapeType | {
4
+ title: string;
5
+ toolsType: ShapeType[];
6
+ vertical: boolean;
7
+ })[]) => (CustomTool | {
8
+ title: string;
9
+ toolsType: CustomTool[];
10
+ vertical: boolean;
11
+ })[];
package/dist/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import useReactPaint from './canvas/hooks/useReactPaint';
2
+ import Canvas from './canvas/index';
3
+ import Editor from './editor/index';
4
+ import type { DrawableShape, StateData } from './common/types/Shapes';
5
+ import type { OptionalOptions } from './canvas/constants/app';
6
+ export { Editor, Canvas, useReactPaint, type DrawableShape, type StateData, type OptionalOptions };
package/dist/react-paint.css CHANGED
@@ -1 +1 @@
1
- .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-app{color:var(--react-paint-editor-app-font-color);flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex;position:relative}.react-paint-editor-app[data-grow=false]{max-width:min(100%,var(--react-paint-editor-app-canvaswidth))}.react-paint-editor-app[data-shrink=false]{min-width:var(--react-paint-editor-app-canvaswidth)}.react-paint-editor-app hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}.react-paint-editor-app-row{z-index:var(--react-paint-editor-app-row-zindex);aspect-ratio:var(--react-paint-editor-app-row-aspectratio);flex-direction:row;max-width:100%;display:flex;position:relative}.react-paint-editor-app-row[data-grow=true]{width:100%}.react-paint-editor-app-row[data-grow=false]{width:var(--react-paint-editor-app-row-width)}.react-paint-editor-canvas-box{flex:1;justify-content:center;align-items:center;display:flex}.react-paint-editor-canvas-container{background-color:var(--react-paint-editor-app-canvas-bg);background-repeat:repeat;background-size:16px;display:grid;position:relative;overflow:hidden}.react-paint-editor-canvas-container[data-grow=true]{width:100%;height:100%}.react-paint-editor-canvas-drawcanvas{-webkit-user-select:none;user-select:none;touch-action:none;grid-area:1/1;max-width:100%;display:block}.react-paint-editor-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-editor-canvas-selectioncanvas{-webkit-user-select:none;user-select:none;touch-action:none;cursor:var(--react-paint-editor-canvas-cursor);grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-editor-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-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;transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;max-width:calc(100% - 24px);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);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;min-width:32px;height:32px;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: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;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;width:20px;height:20px;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[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-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.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%;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.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;display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.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}
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);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}.react-paint-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-canvas-selectioncanvas{-webkit-user-select:none;user-select:none;touch-action:none;cursor:var(--react-paint-canvas-cursor);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{aspect-ratio:var(--react-paint-app-row-aspectratio);width:100%;max-width:100%;position:relative}.react-paint-app-row[data-grow=false]{max-width:var(--react-paint-app-canvaswidth)}.react-paint-app-row[data-shrink=false]{min-width:var(--react-paint-app-canvaswidth)}.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;transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;max-width:calc(100% - 24px);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);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;min-width:32px;height:32px;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-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;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;width:20px;height:20px;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[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-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.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%;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.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;display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.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%}