js-draw 0.24.1 → 0.25.0

package/dist/bundledStyles.js

@@ -1 +1 @@
-(()=>{"use strict";var n={489:(n,o,t)=>{t.d(o,{Z:()=>l});var r=t(601),e=t.n(r),i=t(609),a=t.n(i)()(e());a.push([n.id,'.clr-picker {\n  display: none;\n  flex-wrap: wrap;\n  position: absolute;\n  width: 200px;\n  z-index: 1000;\n  border-radius: 10px;\n  background-color: #fff;\n  justify-content: flex-end;\n  direction: ltr;\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.clr-picker.clr-open,\n.clr-picker[data-inline="true"] {\n  display: flex;\n}\n\n.clr-picker[data-inline="true"] {\n  position: relative;\n}\n\n.clr-gradient {\n  position: relative;\n  width: 100%;\n  height: 100px;\n  margin-bottom: 15px;\n  border-radius: 3px 3px 0 0;\n  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\n  cursor: pointer;\n}\n\n.clr-marker {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  margin: -6px 0 0 -6px;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  background-color: currentColor;\n  cursor: pointer;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 8px;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-thumb {\n  width: 8px;\n  height: 8px;\n  -webkit-appearance: none;\n}\n\n.clr-picker input[type="range"]::-moz-range-track {\n  width: 100%;\n  height: 8px;\n  border: 0;\n}\n\n.clr-picker input[type="range"]::-moz-range-thumb {\n  width: 8px;\n  height: 8px;\n  border: 0;\n}\n\n.clr-hue {\n  background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);\n}\n\n.clr-hue,\n.clr-alpha {\n  position: relative;\n  width: calc(100% - 40px);\n  height: 8px;\n  margin: 5px 20px;\n  border-radius: 4px;\n}\n\n.clr-alpha span {\n  display: block;\n  height: 100%;\n  width: 100%;\n  border-radius: inherit;\n  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\n}\n\n.clr-hue input,\n.clr-alpha input {\n  position: absolute;\n  width: calc(100% + 16px);\n  height: 16px;\n  left: -8px;\n  top: -4px;\n  margin: 0;\n  background-color: transparent;\n  opacity: 0;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.clr-hue div,\n.clr-alpha div {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 0;\n  top: 50%;\n  margin-left: -8px;\n  transform: translateY(-50%);\n  border: 2px solid #fff;\n  border-radius: 50%;\n  background-color: currentColor;\n  box-shadow: 0 0 1px #888;\n  pointer-events: none;\n}\n\n.clr-alpha div:before {\n  content: \'\';\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  left: 0;\n  top: 0;\n  border-radius: 50%;\n  background-color: currentColor;\n}\n\n.clr-format {\n  display: none;\n  order: 1;\n  width: calc(100% - 40px);\n  margin: 0 20px 20px;\n}\n\n.clr-segmented {\n  display: flex;\n  position: relative;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 1px solid #ddd;\n  border-radius: 15px;\n  box-sizing: border-box;\n  color: #999;\n  font-size: 12px;\n}\n\n.clr-segmented input,\n.clr-segmented legend {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  left: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.clr-segmented label {\n  flex-grow: 1;\n  margin: 0;\n  padding: 4px 0;\n  font-size: inherit;\n  font-weight: normal;\n  line-height: initial;\n  text-align: center;\n  cursor: pointer;\n}\n\n.clr-segmented label:first-of-type {\n  border-radius: 10px 0 0 10px;\n}\n\n.clr-segmented label:last-of-type {\n  border-radius: 0 10px 10px 0;\n}\n\n.clr-segmented input:checked + label {\n  color: #fff;\n  background-color: #666;\n}\n\n.clr-swatches {\n  order: 2;\n  width: calc(100% - 32px);\n  margin: 0 16px;\n}\n\n.clr-swatches div {\n  display: flex;\n  flex-wrap: wrap;\n  padding-bottom: 12px;\n  justify-content: center;\n}\n\n.clr-swatches button {\n  position: relative;\n  width: 20px;\n  height: 20px;\n  margin: 0 4px 6px 4px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  color: inherit;\n  text-indent: -1000px;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: pointer;\n}\n\n.clr-swatches button:after {\n  content: \'\';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  border-radius: inherit;\n  background-color: currentColor;\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\ninput.clr-color {\n  order: 1;\n  width: calc(100% - 80px);\n  height: 32px;\n  margin: 15px 20px 20px auto;\n  padding: 0 10px;\n  border: 1px solid #ddd;\n  border-radius: 16px;\n  color: #444;\n  background-color: #fff;\n  font-family: sans-serif;\n  font-size: 14px;\n  text-align: center;\n  box-shadow: none;\n}\n\ninput.clr-color:focus {\n  outline: none;\n  border: 1px solid #1e90ff;\n}\n\n.clr-close,\n.clr-clear {\n  display: none;\n  order: 2;\n  height: 24px;\n  margin: 0 20px 20px;\n  padding: 0 20px;\n  border: 0;\n  border-radius: 12px;\n  color: #fff;\n  background-color: #666;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}\n\n.clr-close {\n  display: block;\n  margin: 0 20px 20px auto;\n}\n\n.clr-preview {\n  position: relative;\n  width: 32px;\n  height: 32px;\n  margin: 15px 0 20px 20px;\n  border-radius: 50%;\n  overflow: hidden;\n}\n\n.clr-preview:before,\n.clr-preview:after {\n  content: \'\';\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  left: 0;\n  top: 0;\n  border: 1px solid #fff;\n  border-radius: 50%;\n}\n\n.clr-preview:after {\n  border: 0;\n  background-color: currentColor;\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\n.clr-preview button {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  outline-offset: -2px;\n  background-color: transparent;\n  text-indent: -9999px;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n.clr-marker,\n.clr-hue div,\n.clr-alpha div,\n.clr-color {\n  box-sizing: border-box;\n}\n\n.clr-field {\n  display: inline-block;\n  position: relative;\n  color: transparent;\n}\n\n.clr-field input {\n  margin: 0;\n  direction: ltr;\n}\n\n.clr-field.clr-rtl input {\n  text-align: right;\n}\n\n.clr-field button {\n  position: absolute;\n  width: 30px;\n  height: 100%;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  text-indent: -1000px;\n  white-space: nowrap;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.clr-field.clr-rtl button {\n  right: auto;\n  left: 0;\n}\n\n.clr-field button:after {\n  content: \'\';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  border-radius: inherit;\n  background-color: currentColor;\n  box-shadow: inset 0 0 1px rgba(0,0,0,.5);\n}\n\n.clr-alpha,\n.clr-alpha div,\n.clr-swatches button,\n.clr-preview:before,\n.clr-field button {\n  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n  background-position: 0 0, 4px 4px;\n  background-size: 8px 8px;\n}\n\n.clr-marker:focus {\n  outline: none;\n}\n\n.clr-keyboard-nav .clr-marker:focus,\n.clr-keyboard-nav .clr-hue input:focus + div,\n.clr-keyboard-nav .clr-alpha input:focus + div,\n.clr-keyboard-nav .clr-segmented input:focus + label {\n  outline: none;\n  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\n}\n\n.clr-picker[data-alpha="false"] .clr-alpha {\n  display: none;\n}\n\n.clr-picker[data-minimal="true"] {\n  padding-top: 16px;\n}\n\n.clr-picker[data-minimal="true"] .clr-gradient,\n.clr-picker[data-minimal="true"] .clr-hue,\n.clr-picker[data-minimal="true"] .clr-alpha,\n.clr-picker[data-minimal="true"] .clr-color,\n.clr-picker[data-minimal="true"] .clr-preview {\n  display: none;\n}\n\n/** Dark theme **/\n\n.clr-dark {\n  background-color: #444;\n}\n\n.clr-dark .clr-segmented {\n  border-color: #777;\n}\n\n.clr-dark .clr-swatches button:after {\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\n}\n\n.clr-dark input.clr-color {\n  color: #fff;\n  border-color: #777;\n  background-color: #555;\n}\n\n.clr-dark input.clr-color:focus {\n  border-color: #1e90ff;\n}\n\n.clr-dark .clr-preview:after {\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\n}\n\n.clr-dark .clr-alpha,\n.clr-dark .clr-alpha div,\n.clr-dark .clr-swatches button,\n.clr-dark .clr-preview:before {\n  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);\n}\n\n/** Polaroid theme **/\n\n.clr-picker.clr-polaroid {\n  border-radius: 6px;\n  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\n}\n\n.clr-picker.clr-polaroid:before {\n  content: \'\';\n  display: block;\n  position: absolute;\n  width: 16px;\n  height: 10px;\n  left: 20px;\n  top: -10px;\n  border: solid transparent;\n  border-width: 0 8px 10px 8px;\n  border-bottom-color: currentColor;\n  box-sizing: border-box;\n  color: #fff;\n  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\n  pointer-events: none;\n}\n\n.clr-picker.clr-polaroid.clr-dark:before {\n  color: #444;\n}\n\n.clr-picker.clr-polaroid.clr-left:before {\n  left: auto;\n  right: 20px;\n}\n\n.clr-picker.clr-polaroid.clr-top:before {\n  top: auto;\n  bottom: -10px;\n  transform: rotateZ(180deg);\n}\n\n.clr-polaroid .clr-gradient {\n  width: calc(100% - 20px);\n  height: 120px;\n  margin: 10px;\n  border-radius: 3px;\n}\n\n.clr-polaroid .clr-hue,\n.clr-polaroid .clr-alpha {\n  width: calc(100% - 30px);\n  height: 10px;\n  margin: 6px 15px;\n  border-radius: 5px;\n}\n\n.clr-polaroid .clr-hue div,\n.clr-polaroid .clr-alpha div {\n  box-shadow: 0 0 5px rgba(0,0,0,.2);\n}\n\n.clr-polaroid .clr-format {\n  width: calc(100% - 20px);\n  margin: 0 10px 15px;\n}\n\n.clr-polaroid .clr-swatches {\n  width: calc(100% - 12px);\n  margin: 0 6px;\n}\n.clr-polaroid .clr-swatches div {\n  padding-bottom: 10px;\n}\n\n.clr-polaroid .clr-swatches button {\n  width: 22px;\n  height: 22px;\n}\n\n.clr-polaroid input.clr-color {\n  width: calc(100% - 60px);\n  margin: 10px 10px 15px auto;\n}\n\n.clr-polaroid .clr-clear {\n  margin: 0 10px 15px 10px;\n}\n\n.clr-polaroid .clr-close {\n  margin: 0 10px 15px auto;\n}\n\n.clr-polaroid .clr-preview {\n  margin: 10px 0 15px 10px;\n}\n\n/** Large theme **/\n\n.clr-picker.clr-large {\n  width: 275px;\n}\n\n.clr-large .clr-gradient {\n  height: 150px;\n}\n\n.clr-large .clr-swatches button {\n  width: 22px;\n  height: 22px;\n}\n\n/** Pill (horizontal) theme **/\n\n.clr-picker.clr-pill {\n  width: 380px;\n  padding-left: 180px;\n  box-sizing: border-box;\n}\n\n.clr-pill .clr-gradient {\n  position: absolute;\n  width: 180px;\n  height: 100%;\n  left: 0;\n  top: 0;\n  margin-bottom: 0;\n  border-radius: 3px 0 0 3px;\n}\n\n.clr-pill .clr-hue {\n  margin-top: 20px;\n}',""]);const l=a},309:(n,o,t)=>{t.d(o,{Z:()=>l});var r=t(601),e=t.n(r),i=t(609),a=t.n(i)()(e());a.push([n.id,'\n/* Imports Coloris\' CSS and makes additional changes to the color picker */\n\n#clr-picker {\n    --clr-slider-size: 30px;\n}\n\n/* Coloris: Try to avoid scrolling instead of updating the color input. */\n#clr-picker #clr-color-area, #clr-picker .clr_hue {\n\ttouch-action: none;\n}\n\n/* Increase space between inputs */\n#clr-picker .clr-alpha {\n\tmargin-top: 15px;\n\tmargin-bottom: 15px;\n}\n\n/* Increase size of input thumb to make it easier to select colors. */\n#clr-picker.clr-picker input[type="range"]::-moz-range-thumb {\n\twidth: var(--clr-slider-size);\n\theight: var(--clr-slider-size);\n}\n\n/* Also apply to Chrome/iOS */\n#clr-picker.clr-picker input[type="range"]::-webkit-slider-thumb {\n    /*\n     Note: This doesn\'t seem to take effect in iOS if it\'s combined with the\n           ::-moz-range-thumb rule above\n     */\n\twidth: var(--clr-slider-size);\n\theight: var(--clr-slider-size);\n}\n\n#clr-picker.clr-picker input[type="range"]::-webkit-slider-runnable-track {\n\theight: var(--clr-slider-size);\n}\n\n#clr-picker.clr-picker input[type="range"]::-moz-range-track {\n\theight: var(--clr-slider-size);\n}\n\n/*\nDebugging: Uncommenting this rule makes Coloris\' sliders more\nvisible.\n\n#clr-picker.clr-picker input[type="range"] {\n    opacity: 0.5;\n    -webkit-appearance: auto;\n    appearance: auto;\n}\n*/\n',""]);const l=a},860:(n,o,t)=>{t.d(o,{Z:()=>s});var r=t(601),e=t.n(r),i=t(609),a=t.n(i),l=t(345),d=t(883),c=t(309),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([n.id,"\n.imageEditorContainer {\n\t/* Deafult colors for the editor */\n    --primary-background-color: white;\n    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);\n    --secondary-background-color: #faf;\n    --primary-foreground-color: black;\n    --secondary-foreground-color: black;\n\t--primary-shadow-color: rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.imageEditorContainer {\n\t\t--primary-background-color: #151515;\n\t\t--primary-background-color-transparent: rgba(50, 50, 50, 0.5);\n\t\t--secondary-background-color: #607;\n\t\t--primary-foreground-color: white;\n\t\t--secondary-foreground-color: white;\n\t\t--primary-shadow-color: rgba(250, 250, 250, 0.5);\n\t}\n}\n\n.imageEditorContainer {\n\tcolor: var(--primary-foreground-color);\n\tfont-family: system-ui, -apple-system, sans-serif;\n\tbackground-color: var(--primary-background-color);\n\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n}\n\n.imageEditorContainer .imageEditorRenderArea {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr;\n\tflex-grow: 2;\n\tflex-shrink: 1;\n\tmin-height: 100px;\n}\n\n.imageEditorContainer .imageEditorRenderArea canvas {\n\t/* Stack all canvases on top of each other */\n\tgrid-row: 1 / 1;\n\tgrid-column: 1 / 1;\n\ttouch-action: none;\n\n\t/* Fill the container */\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Allow the canvas to shrink (needed in Chrome) */\n\tmin-height: 0px;\n\tmax-height: inherit;\n}\n\n.imageEditorContainer .loadingMessage {\n\tposition: fixed;\n\ttext-align: center;\n\tfont-size: 2em;\n\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n}\n\n.imageEditorContainer .accessibilityAnnouncement {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n}\n\n.imageEditorContainer .textRendererOutputContainer {\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n}\n\n.imageEditorContainer .textRendererOutputContainer:focus-within {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n@media print {\n\t.imageEditorContainer .loadingMessage {\n\t\tdisplay: none;\n\t}\n\n\t.imageEditorContainer .imageEditorRenderArea canvas {\n\t\twidth: 100%;\n\t\theight: initial;\n\t}\n}",""]);const s=p},345:(n,o,t)=>{t.d(o,{Z:()=>p});var r=t(601),e=t.n(r),i=t(609),a=t.n(i),l=t(875),d=t(701),c=a()(e());c.i(l.Z),c.i(d.Z),c.push([n.id,".toolbar-root {\n\tbackground-color: var(--primary-background-color);\n\t--icon-color: var(--primary-foreground-color);\n\n\n\tborder: 1px solid var(--secondary-background-color);\n\tborder-radius: 2px;\n\tflex-wrap: wrap;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\n\t--toolbar-button-height: min(20vh, 60px);\n\n\t/* Display above selection dialogs, etc. */\n\tz-index: 2;\n\n\tfont-family: system-ui, -apple-system, sans-serif;\n}\n\n.toolbar-root > .toolbar-toolContainer > .toolbar-button,\n.toolbar-root > .toolbar-toolContainer > * > button,\n.toolbar-root > .toolbar-buttonGroup > button,\n.toolbar-root > .toolbar-button {\n\twidth: min-content;\n\twhite-space: pre;\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-dropdown .toolbar-button > .toolbar-icon {\n\tmax-width: 50px;\n\twidth: 100%;\n}\n\n.toolbar-button.disabled {\n\tfilter: opacity(0.5) sepia(0.2);\n\tcursor: unset;\n}\n\n.toolbar-button, .toolbar-root button {\n\tcursor: pointer;\n\ttext-align: center;\n\tborder-radius: 6px;\n\n\t--icon-color: var(--primary-foreground-color);\n\tbackground-color: var(--primary-background-color);\n\tcolor: var(--primary-foreground-color);\n\tborder: none;\n\tbox-shadow: 0px 0px 2px var(--primary-shadow-color);\n\n\ttransition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;\n}\n\n.toolbar-button,\n.toolbar-buttonGroup > button,\n.toolbar-toolContainer > * > button,\n.toolbar-root > button {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\tpadding-left: 3px;\n\tpadding-right: 3px;\n\tmargin-left: 3px;\n\tmargin-right: 3px;\n\n\tmin-width: 40px;\n\tmax-width: 105px;\n\twidth: min-content;\n\tfont-size: 1em;\n}\n\n.toolbar-button > label {\n\tcursor: inherit;\n\tuser-select: none;\n}\n\n/* Decrease the font size of labels in the main toolbar if they're long. */\n:not(.toolbar-dropdown) > .toolbar-toolContainer >\n\t\t.toolbar-button > label.long-label {\n\tfont-size: 0.75em;\n}\n\n.toolbar-dropdown > .toolbar-toolContainer > button,\n.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {\n\twidth: 6em;\n}\n\n.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {\n\tbox-shadow: 0px 2px 4px var(--primary-shadow-color);\n}\n\n.toolbar-root button:disabled {\n\tcursor: inherit;\n\tfilter: opacity(0.5);\n}\n\n.toolbar-root .toolbar-icon {\n\tflex-shrink: 1;\n\tuser-select: none;\n\n\twidth: 100%;\n\tmin-width: 30px;\n\tmin-height: 30px;\n}\n\n.toolbar-toolContainer.selected > .toolbar-button {\n\tbackground-color: var(--secondary-background-color);\n\tcolor: var(--secondary-foreground-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {\n\tdisplay: none;\n}\n\n.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\theight: 10px;\n\ttransition: transform 0.5s ease;\n}\n\n.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {\n\ttransform: rotate(180deg);\n}\n\n.toolbar-dropdown.hidden,\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable)\n\t\t> .toolbar-dropdown:not(.hiding) {\n\tdisplay: none;\n}\n\n.toolbar-dropdown {\n\tposition: absolute;\n\tpadding: 15px;\n\tpadding-top: 5px;\n\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmax-height: 80vh;\n\n\tmax-width: fit-content;\n\n\t/* Prevent overlap/being displayed under the undo/redo buttons */\n\tz-index: 2;\n\tbackground-color: var(--primary-background-color);\n\tbox-shadow: 0px 3px 3px var(--primary-shadow-color);\n}\n\n/* Animate showing/hiding the dropdown. Animations triggered in JavaScript. */\n@keyframes dropdown-transition-in {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale(1, 0);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: scale(1, 1);\n\t}\n}\n\n@keyframes dropdown-transition-out {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: scale(1, 1);\t\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scale(1, 0);\n\t}\n}\n\n.toolbar-dropdown {\n\t/* Ensure the animation begins from the correct location. */\n\ttransform-origin: top left;\n\n\t--dropdown-show-animation: dropdown-transition-in;\n\t--dropdown-hide-animation: dropdown-transition-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t/* Disable toolbar animations if reducing motion */\n\t.toolbar-dropdown {\n\t\t--dropdown-show-animation: none;\n\t\t--dropdown-hide-animation: none;\n\t}\n\n\t.toolbar-dropdown.hiding {\n\t\tdisplay: none;\n\t}\n\n\t/* Also disable arrow rotation */\n\t.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\t\ttransition: none;\n\t}\n\n\t/* ...and background color animation. */\n\t.toolbar-button, .toolbar-root button {\n\t\ttransition: none;\n\t}\n}\n\n.toolbar-buttonGroup {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n}\n\n.toolbar-closeColorPickerOverlay {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\n\ttouch-action: none;\n\n\tbackground-color: var(--primary-background-color);\n\topacity: 0.3;\n}\n\n/* Make color selection buttons fill their containing label */\n.toolbar-dropdown .clr-field button {\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 2px;\n\tmargin-left: 0;\n\tmargin-right: 0;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor {\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {\n\tflex-grow: 1;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor button {\n\tmin-width: 48px;\n}\n\n.color-input-container {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n}\n\n.color-input-container .pipetteButton {\n\twidth: 30px;\n\theight: 30px;\n\tpadding: 0;\n\tdisplay: inline-flex;\n}\n\n.color-input-container .pipetteButton > svg {\n\twidth: 100%;\n}\n\n.color-input-container .pipetteButton.active {\n\tbackground-color: var(--secondary-background-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-spacedList > * {\n\tpadding-bottom: 5px;\n\tpadding-top: 5px;\n}\n\n@media print {\n\t/* Hide the toolbar on print. */\n\t.toolbar-root {\n\t\tdisplay: none;\n\t}\n}",""]);const p=c},875:(n,o,t)=>{t.d(o,{Z:()=>l});var r=t(601),e=t.n(r),i=t(609),a=t.n(i)()(e());a.push([n.id,"\n.toolbar-image-selection-overlay {\n\tposition: absolute;\n\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 10;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.toolbar-image-selection-overlay > div {\n\tbackground: var(--primary-background-color);\n\tbox-shadow: 1px 1px 3px var(--primary-shadow-color);\n\n\tpadding: 18px;\n\tborder-radius: 3px;\n}\n\n.toolbar-image-selection-overlay > div > div {\n\tpadding: 5px;\n}\n\n.toolbar-image-selection-overlay img {\n\tmax-width: min(50vw, 75%);\n\tmax-height: 50vh;\n\n\t/* Center */\n\tdisplay: block;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.toolbar-image-selection-overlay .action-button-row {\n\tmargin-top: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-image-selection-overlay .action-button-row > button {\n\tflex-grow: 1;\n}",""]);const l=a},701:(n,o,t)=>{t.d(o,{Z:()=>l});var r=t(601),e=t.n(r),i=t(609),a=t.n(i)()(e());a.push([n.id,"\n.toolbar-overflow-widget-overflow-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n}\n\n.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {\n\tflex-direction: row;\n}\n\n.toolbar-overflow-widget.horizontal > .toolbar-dropdown {\n\tmax-width: 100%;\n\tleft: 15px;\n\tright: 15px;\n\n\t/*\n\t Override the default transform and margin-left.\n\n\t Setting translate to none prevents the dropdown from being shifted off the\n\t screen on window resize by dropdown-repositioning logic.\n\t*/\n\tmargin-left: 0 !important;\n\ttranslate: none !important;\n\n\tpadding: 4px;\n}",""]);const l=a},914:(n,o,t)=>{t.d(o,{Z:()=>l});var r=t(601),e=t.n(r),i=t(609),a=t.n(i)()(e());a.push([n.id,"\n.find-tool-overlay {\n    /* Show at the bottom of the screen. */\n    order: -1;\n\n    position: absolute;\n}",""]);const l=a},690:(n,o,t)=>{t.d(o,{Z:()=>l});var r=t(601),e=t.n(r),i=t(609),a=t.n(i)()(e());a.push([n.id,"\n.selection-tool-selection-background {\n    background-color: var(--secondary-background-color);\n    opacity: 0.5;\n    overflow: visible;\n    position: absolute;\n}\n\n.selection-tool-handle {\n    border: 1px solid var(--primary-foreground-color);\n    background: var(--primary-background-color);\n    position: absolute;\n    cursor: grab;\n}\n\n.selection-tool-handle.selection-tool-circle {\n    border-radius: 100%;\n}\n\n.overlay.handleOverlay {\n    height: 0;\n    overflow: visible;\n}",""]);const l=a},165:(n,o,t)=>{t.d(o,{Z:()=>l});var r=t(601),e=t.n(r),i=t(609),a=t.n(i)()(e());a.push([n.id,"\n.js-draw-sound-ui-toggle {\n\twidth: 0px;\n\theight: 0px;\n\toverflow: hidden;    \n}\n\n.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {\n\topacity: 0.5;\n}\n",""]);const l=a},883:(n,o,t)=>{t.d(o,{Z:()=>s});var r=t(601),e=t.n(r),i=t(609),a=t.n(i),l=t(690),d=t(914),c=t(165),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([n.id,"",""]);const s=p},609:n=>{n.exports=function(n){var o=[];return o.toString=function(){return this.map((function(o){var t="",r=void 0!==o[5];return o[4]&&(t+="@supports (".concat(o[4],") {")),o[2]&&(t+="@media ".concat(o[2]," {")),r&&(t+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),t+=n(o),r&&(t+="}"),o[2]&&(t+="}"),o[4]&&(t+="}"),t})).join("")},o.i=function(n,t,r,e,i){"string"==typeof n&&(n=[[null,n,void 0]]);var a={};if(r)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(a[d]=!0)}for(var c=0;c<n.length;c++){var p=[].concat(n[c]);r&&a[p[0]]||(void 0!==i&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=i),t&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=t):p[2]=t),e&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=e):p[4]="".concat(e)),o.push(p))}},o}},601:n=>{n.exports=function(n){return n[1]}},62:n=>{var o=[];function t(n){for(var t=-1,r=0;r<o.length;r++)if(o[r].identifier===n){t=r;break}return t}function r(n,r){for(var i={},a=[],l=0;l<n.length;l++){var d=n[l],c=r.base?d[0]+r.base:d[0],p=i[c]||0,s="".concat(c," ").concat(p);i[c]=p+1;var u=t(s),b={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==u)o[u].references++,o[u].updater(b);else{var h=e(b,r);r.byIndex=l,o.splice(l,0,{identifier:s,updater:h,references:1})}a.push(s)}return a}function e(n,o){var t=o.domAPI(o);t.update(n);return function(o){if(o){if(o.css===n.css&&o.media===n.media&&o.sourceMap===n.sourceMap&&o.supports===n.supports&&o.layer===n.layer)return;t.update(n=o)}else t.remove()}}n.exports=function(n,e){var i=r(n=n||[],e=e||{});return function(n){n=n||[];for(var a=0;a<i.length;a++){var l=t(i[a]);o[l].references--}for(var d=r(n,e),c=0;c<i.length;c++){var p=t(i[c]);0===o[p].references&&(o[p].updater(),o.splice(p,1))}i=d}}},793:n=>{var o={};n.exports=function(n,t){var r=function(n){if(void 0===o[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}o[n]=t}return o[n]}(n);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},173:n=>{n.exports=function(n){var o=document.createElement("style");return n.setAttributes(o,n.attributes),n.insert(o,n.options),o}},892:(n,o,t)=>{n.exports=function(n){var o=t.nc;o&&n.setAttribute("nonce",o)}},36:n=>{n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var o=n.insertStyleElement(n);return{update:function(t){!function(n,o,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var e=void 0!==t.layer;e&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,e&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),o.styleTagTransform(r,n,o.options)}(o,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(o)}}}},464:n=>{n.exports=function(n,o){if(o.styleSheet)o.styleSheet.cssText=n;else{for(;o.firstChild;)o.removeChild(o.firstChild);o.appendChild(document.createTextNode(n))}}}},o={};function t(r){var e=o[r];if(void 0!==e)return e.exports;var i=o[r]={id:r,exports:{}};return n[r](i,i.exports,t),i.exports}t.n=n=>{var o=n&&n.__esModule?()=>n.default:()=>n;return t.d(o,{a:o}),o},t.d=(n,o)=>{for(var r in o)t.o(o,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:o[r]})},t.o=(n,o)=>Object.prototype.hasOwnProperty.call(n,o),t.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.nc=void 0;var r={};(()=>{t.r(r);var n=t(62),o=t.n(n),e=t(36),i=t.n(e),a=t(793),l=t.n(a),d=t(892),c=t.n(d),p=t(173),s=t.n(p),u=t(464),b=t.n(u),h=t(860),g={};g.styleTagTransform=b(),g.setAttributes=c(),g.insert=l().bind(null,"head"),g.domAPI=i(),g.insertStyleElement=s();o()(h.Z,g);h.Z&&h.Z.locals&&h.Z.locals;var f=t(489),x={};x.styleTagTransform=b(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=s();o()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=r})();
+(()=>{"use strict";var n={489:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,'.clr-picker {\n  display: none;\n  flex-wrap: wrap;\n  position: absolute;\n  width: 200px;\n  z-index: 1000;\n  border-radius: 10px;\n  background-color: #fff;\n  justify-content: flex-end;\n  direction: ltr;\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.clr-picker.clr-open,\n.clr-picker[data-inline="true"] {\n  display: flex;\n}\n\n.clr-picker[data-inline="true"] {\n  position: relative;\n}\n\n.clr-gradient {\n  position: relative;\n  width: 100%;\n  height: 100px;\n  margin-bottom: 15px;\n  border-radius: 3px 3px 0 0;\n  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\n  cursor: pointer;\n}\n\n.clr-marker {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  margin: -6px 0 0 -6px;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  background-color: currentColor;\n  cursor: pointer;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 8px;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-thumb {\n  width: 8px;\n  height: 8px;\n  -webkit-appearance: none;\n}\n\n.clr-picker input[type="range"]::-moz-range-track {\n  width: 100%;\n  height: 8px;\n  border: 0;\n}\n\n.clr-picker input[type="range"]::-moz-range-thumb {\n  width: 8px;\n  height: 8px;\n  border: 0;\n}\n\n.clr-hue {\n  background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);\n}\n\n.clr-hue,\n.clr-alpha {\n  position: relative;\n  width: calc(100% - 40px);\n  height: 8px;\n  margin: 5px 20px;\n  border-radius: 4px;\n}\n\n.clr-alpha span {\n  display: block;\n  height: 100%;\n  width: 100%;\n  border-radius: inherit;\n  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\n}\n\n.clr-hue input,\n.clr-alpha input {\n  position: absolute;\n  width: calc(100% + 16px);\n  height: 16px;\n  left: -8px;\n  top: -4px;\n  margin: 0;\n  background-color: transparent;\n  opacity: 0;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.clr-hue div,\n.clr-alpha div {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 0;\n  top: 50%;\n  margin-left: -8px;\n  transform: translateY(-50%);\n  border: 2px solid #fff;\n  border-radius: 50%;\n  background-color: currentColor;\n  box-shadow: 0 0 1px #888;\n  pointer-events: none;\n}\n\n.clr-alpha div:before {\n  content: \'\';\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  left: 0;\n  top: 0;\n  border-radius: 50%;\n  background-color: currentColor;\n}\n\n.clr-format {\n  display: none;\n  order: 1;\n  width: calc(100% - 40px);\n  margin: 0 20px 20px;\n}\n\n.clr-segmented {\n  display: flex;\n  position: relative;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 1px solid #ddd;\n  border-radius: 15px;\n  box-sizing: border-box;\n  color: #999;\n  font-size: 12px;\n}\n\n.clr-segmented input,\n.clr-segmented legend {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  left: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.clr-segmented label {\n  flex-grow: 1;\n  margin: 0;\n  padding: 4px 0;\n  font-size: inherit;\n  font-weight: normal;\n  line-height: initial;\n  text-align: center;\n  cursor: pointer;\n}\n\n.clr-segmented label:first-of-type {\n  border-radius: 10px 0 0 10px;\n}\n\n.clr-segmented label:last-of-type {\n  border-radius: 0 10px 10px 0;\n}\n\n.clr-segmented input:checked + label {\n  color: #fff;\n  background-color: #666;\n}\n\n.clr-swatches {\n  order: 2;\n  width: calc(100% - 32px);\n  margin: 0 16px;\n}\n\n.clr-swatches div {\n  display: flex;\n  flex-wrap: wrap;\n  padding-bottom: 12px;\n  justify-content: center;\n}\n\n.clr-swatches button {\n  position: relative;\n  width: 20px;\n  height: 20px;\n  margin: 0 4px 6px 4px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  color: inherit;\n  text-indent: -1000px;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: pointer;\n}\n\n.clr-swatches button:after {\n  content: \'\';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  border-radius: inherit;\n  background-color: currentColor;\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\ninput.clr-color {\n  order: 1;\n  width: calc(100% - 80px);\n  height: 32px;\n  margin: 15px 20px 20px auto;\n  padding: 0 10px;\n  border: 1px solid #ddd;\n  border-radius: 16px;\n  color: #444;\n  background-color: #fff;\n  font-family: sans-serif;\n  font-size: 14px;\n  text-align: center;\n  box-shadow: none;\n}\n\ninput.clr-color:focus {\n  outline: none;\n  border: 1px solid #1e90ff;\n}\n\n.clr-close,\n.clr-clear {\n  display: none;\n  order: 2;\n  height: 24px;\n  margin: 0 20px 20px;\n  padding: 0 20px;\n  border: 0;\n  border-radius: 12px;\n  color: #fff;\n  background-color: #666;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}\n\n.clr-close {\n  display: block;\n  margin: 0 20px 20px auto;\n}\n\n.clr-preview {\n  position: relative;\n  width: 32px;\n  height: 32px;\n  margin: 15px 0 20px 20px;\n  border-radius: 50%;\n  overflow: hidden;\n}\n\n.clr-preview:before,\n.clr-preview:after {\n  content: \'\';\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  left: 0;\n  top: 0;\n  border: 1px solid #fff;\n  border-radius: 50%;\n}\n\n.clr-preview:after {\n  border: 0;\n  background-color: currentColor;\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\n.clr-preview button {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  outline-offset: -2px;\n  background-color: transparent;\n  text-indent: -9999px;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n.clr-marker,\n.clr-hue div,\n.clr-alpha div,\n.clr-color {\n  box-sizing: border-box;\n}\n\n.clr-field {\n  display: inline-block;\n  position: relative;\n  color: transparent;\n}\n\n.clr-field input {\n  margin: 0;\n  direction: ltr;\n}\n\n.clr-field.clr-rtl input {\n  text-align: right;\n}\n\n.clr-field button {\n  position: absolute;\n  width: 30px;\n  height: 100%;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  text-indent: -1000px;\n  white-space: nowrap;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.clr-field.clr-rtl button {\n  right: auto;\n  left: 0;\n}\n\n.clr-field button:after {\n  content: \'\';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  border-radius: inherit;\n  background-color: currentColor;\n  box-shadow: inset 0 0 1px rgba(0,0,0,.5);\n}\n\n.clr-alpha,\n.clr-alpha div,\n.clr-swatches button,\n.clr-preview:before,\n.clr-field button {\n  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n  background-position: 0 0, 4px 4px;\n  background-size: 8px 8px;\n}\n\n.clr-marker:focus {\n  outline: none;\n}\n\n.clr-keyboard-nav .clr-marker:focus,\n.clr-keyboard-nav .clr-hue input:focus + div,\n.clr-keyboard-nav .clr-alpha input:focus + div,\n.clr-keyboard-nav .clr-segmented input:focus + label {\n  outline: none;\n  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\n}\n\n.clr-picker[data-alpha="false"] .clr-alpha {\n  display: none;\n}\n\n.clr-picker[data-minimal="true"] {\n  padding-top: 16px;\n}\n\n.clr-picker[data-minimal="true"] .clr-gradient,\n.clr-picker[data-minimal="true"] .clr-hue,\n.clr-picker[data-minimal="true"] .clr-alpha,\n.clr-picker[data-minimal="true"] .clr-color,\n.clr-picker[data-minimal="true"] .clr-preview {\n  display: none;\n}\n\n/** Dark theme **/\n\n.clr-dark {\n  background-color: #444;\n}\n\n.clr-dark .clr-segmented {\n  border-color: #777;\n}\n\n.clr-dark .clr-swatches button:after {\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\n}\n\n.clr-dark input.clr-color {\n  color: #fff;\n  border-color: #777;\n  background-color: #555;\n}\n\n.clr-dark input.clr-color:focus {\n  border-color: #1e90ff;\n}\n\n.clr-dark .clr-preview:after {\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\n}\n\n.clr-dark .clr-alpha,\n.clr-dark .clr-alpha div,\n.clr-dark .clr-swatches button,\n.clr-dark .clr-preview:before {\n  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);\n}\n\n/** Polaroid theme **/\n\n.clr-picker.clr-polaroid {\n  border-radius: 6px;\n  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\n}\n\n.clr-picker.clr-polaroid:before {\n  content: \'\';\n  display: block;\n  position: absolute;\n  width: 16px;\n  height: 10px;\n  left: 20px;\n  top: -10px;\n  border: solid transparent;\n  border-width: 0 8px 10px 8px;\n  border-bottom-color: currentColor;\n  box-sizing: border-box;\n  color: #fff;\n  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\n  pointer-events: none;\n}\n\n.clr-picker.clr-polaroid.clr-dark:before {\n  color: #444;\n}\n\n.clr-picker.clr-polaroid.clr-left:before {\n  left: auto;\n  right: 20px;\n}\n\n.clr-picker.clr-polaroid.clr-top:before {\n  top: auto;\n  bottom: -10px;\n  transform: rotateZ(180deg);\n}\n\n.clr-polaroid .clr-gradient {\n  width: calc(100% - 20px);\n  height: 120px;\n  margin: 10px;\n  border-radius: 3px;\n}\n\n.clr-polaroid .clr-hue,\n.clr-polaroid .clr-alpha {\n  width: calc(100% - 30px);\n  height: 10px;\n  margin: 6px 15px;\n  border-radius: 5px;\n}\n\n.clr-polaroid .clr-hue div,\n.clr-polaroid .clr-alpha div {\n  box-shadow: 0 0 5px rgba(0,0,0,.2);\n}\n\n.clr-polaroid .clr-format {\n  width: calc(100% - 20px);\n  margin: 0 10px 15px;\n}\n\n.clr-polaroid .clr-swatches {\n  width: calc(100% - 12px);\n  margin: 0 6px;\n}\n.clr-polaroid .clr-swatches div {\n  padding-bottom: 10px;\n}\n\n.clr-polaroid .clr-swatches button {\n  width: 22px;\n  height: 22px;\n}\n\n.clr-polaroid input.clr-color {\n  width: calc(100% - 60px);\n  margin: 10px 10px 15px auto;\n}\n\n.clr-polaroid .clr-clear {\n  margin: 0 10px 15px 10px;\n}\n\n.clr-polaroid .clr-close {\n  margin: 0 10px 15px auto;\n}\n\n.clr-polaroid .clr-preview {\n  margin: 10px 0 15px 10px;\n}\n\n/** Large theme **/\n\n.clr-picker.clr-large {\n  width: 275px;\n}\n\n.clr-large .clr-gradient {\n  height: 150px;\n}\n\n.clr-large .clr-swatches button {\n  width: 22px;\n  height: 22px;\n}\n\n/** Pill (horizontal) theme **/\n\n.clr-picker.clr-pill {\n  width: 380px;\n  padding-left: 180px;\n  box-sizing: border-box;\n}\n\n.clr-pill .clr-gradient {\n  position: absolute;\n  width: 180px;\n  height: 100%;\n  left: 0;\n  top: 0;\n  margin-bottom: 0;\n  border-radius: 3px 0 0 3px;\n}\n\n.clr-pill .clr-hue {\n  margin-top: 20px;\n}',""]);const l=a},309:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,'\n/* Imports Coloris\' CSS and makes additional changes to the color picker */\n\n#clr-picker {\n    --clr-slider-size: 30px;\n}\n\n/* Coloris: Try to avoid scrolling instead of updating the color input. */\n#clr-picker #clr-color-area, #clr-picker .clr_hue {\n\ttouch-action: none;\n}\n\n/* Increase space between inputs */\n#clr-picker .clr-alpha {\n\tmargin-top: 15px;\n\tmargin-bottom: 15px;\n}\n\n/* Increase size of input thumb to make it easier to select colors. */\n#clr-picker.clr-picker input[type="range"]::-moz-range-thumb {\n\twidth: var(--clr-slider-size);\n\theight: var(--clr-slider-size);\n}\n\n/* Also apply to Chrome/iOS */\n#clr-picker.clr-picker input[type="range"]::-webkit-slider-thumb {\n    /*\n     Note: This doesn\'t seem to take effect in iOS if it\'s combined with the\n           ::-moz-range-thumb rule above\n     */\n\twidth: var(--clr-slider-size);\n\theight: var(--clr-slider-size);\n}\n\n#clr-picker.clr-picker input[type="range"]::-webkit-slider-runnable-track {\n\theight: var(--clr-slider-size);\n}\n\n#clr-picker.clr-picker input[type="range"]::-moz-range-track {\n\theight: var(--clr-slider-size);\n}\n\n/*\nDebugging: Uncommenting this rule makes Coloris\' sliders more\nvisible.\n\n#clr-picker.clr-picker input[type="range"] {\n    opacity: 0.5;\n    -webkit-appearance: auto;\n    appearance: auto;\n}\n*/\n',""]);const l=a},860:(n,t,o)=>{o.d(t,{Z:()=>s});var r=o(601),e=o.n(r),i=o(609),a=o.n(i),l=o(345),d=o(883),c=o(309),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([n.id,"\n.imageEditorContainer {\n\t/* Deafult colors for the editor */\n    --primary-background-color: white;\n    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);\n    --secondary-background-color: #faf;\n    --primary-foreground-color: black;\n    --secondary-foreground-color: black;\n\t--primary-shadow-color: rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.imageEditorContainer {\n\t\t--primary-background-color: #151515;\n\t\t--primary-background-color-transparent: rgba(50, 50, 50, 0.5);\n\t\t--secondary-background-color: #607;\n\t\t--primary-foreground-color: white;\n\t\t--secondary-foreground-color: white;\n\t\t--primary-shadow-color: rgba(250, 250, 250, 0.5);\n\t}\n}\n\n.imageEditorContainer {\n\tcolor: var(--primary-foreground-color);\n\tfont-family: system-ui, -apple-system, sans-serif;\n\tbackground-color: var(--primary-background-color);\n\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n}\n\n.imageEditorContainer .imageEditorRenderArea {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr;\n\tflex-grow: 2;\n\tflex-shrink: 1;\n\tmin-height: 100px;\n}\n\n.imageEditorContainer .imageEditorRenderArea canvas {\n\t/* Stack all canvases on top of each other */\n\tgrid-row: 1 / 1;\n\tgrid-column: 1 / 1;\n\ttouch-action: none;\n\n\t/* Fill the container */\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Allow the canvas to shrink (needed in Chrome) */\n\tmin-height: 0px;\n\tmax-height: inherit;\n}\n\n.imageEditorContainer .loadingMessage {\n\tposition: fixed;\n\ttext-align: center;\n\tfont-size: 2em;\n\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n}\n\n.imageEditorContainer .accessibilityAnnouncement {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n}\n\n.imageEditorContainer .textRendererOutputContainer {\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n}\n\n.imageEditorContainer .textRendererOutputContainer:focus-within {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n@media print {\n\t.imageEditorContainer .loadingMessage {\n\t\tdisplay: none;\n\t}\n\n\t.imageEditorContainer .imageEditorRenderArea canvas {\n\t\twidth: 100%;\n\t\theight: initial;\n\t}\n}",""]);const s=p},345:(n,t,o)=>{o.d(t,{Z:()=>s});var r=o(601),e=o.n(r),i=o(609),a=o.n(i),l=o(875),d=o(701),c=o(161),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([n.id,".toolbar-root {\n\tbackground-color: var(--primary-background-color);\n\t--icon-color: var(--primary-foreground-color);\n\n\n\tborder: 1px solid var(--secondary-background-color);\n\tborder-radius: 2px;\n\tflex-wrap: wrap;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\n\t--toolbar-button-height: min(20vh, 60px);\n\n\t/* Display above selection dialogs, etc. */\n\tz-index: 2;\n\n\tfont-family: system-ui, -apple-system, sans-serif;\n}\n\n.toolbar-root > .toolbar-toolContainer > .toolbar-button,\n.toolbar-root > .toolbar-toolContainer > * > button,\n.toolbar-root > .toolbar-buttonGroup > button,\n.toolbar-root > .toolbar-button {\n\twidth: min-content;\n\twhite-space: pre;\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-dropdown .toolbar-button > .toolbar-icon {\n\tmax-width: 50px;\n\twidth: 100%;\n}\n\n.toolbar-button.disabled {\n\tfilter: opacity(0.5) sepia(0.2);\n\tcursor: unset;\n}\n\n.toolbar-button, .toolbar-root button {\n\tcursor: pointer;\n\ttext-align: center;\n\tborder-radius: 6px;\n\n\t--icon-color: var(--primary-foreground-color);\n\tbackground-color: var(--primary-background-color);\n\tcolor: var(--primary-foreground-color);\n\tborder: none;\n\tbox-shadow: 0px 0px 2px var(--primary-shadow-color);\n\n\ttransition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;\n}\n\n.toolbar-button,\n.toolbar-buttonGroup > button,\n.toolbar-toolContainer > * > button,\n.toolbar-root > button {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\tpadding-left: 3px;\n\tpadding-right: 3px;\n\tmargin-left: 3px;\n\tmargin-right: 3px;\n\n\tmin-width: 40px;\n\tmax-width: 105px;\n\twidth: min-content;\n\tfont-size: 1em;\n}\n\n.toolbar-button > label {\n\tcursor: inherit;\n\tuser-select: none;\n}\n\n/* Decrease the font size of labels in the main toolbar if they're long. */\n:not(.toolbar-dropdown) > .toolbar-toolContainer >\n\t\t.toolbar-button > label.long-label {\n\tfont-size: 0.75em;\n}\n\n.toolbar-dropdown > .toolbar-toolContainer > button,\n.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {\n\twidth: 6em;\n}\n\n.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {\n\tbox-shadow: 0px 2px 4px var(--primary-shadow-color);\n}\n\n.toolbar-root button:disabled {\n\tcursor: inherit;\n\tfilter: opacity(0.5);\n}\n\n.toolbar-root .toolbar-icon {\n\tflex-shrink: 1;\n\tuser-select: none;\n\n\twidth: 100%;\n\tmin-width: 30px;\n\tmin-height: 30px;\n}\n\n.toolbar-toolContainer.selected > .toolbar-button {\n\tbackground-color: var(--secondary-background-color);\n\tcolor: var(--secondary-foreground-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {\n\tdisplay: none;\n}\n\n.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\theight: 10px;\n\ttransition: transform 0.5s ease;\n}\n\n.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {\n\ttransform: rotate(180deg);\n}\n\n.toolbar-dropdown.hidden,\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable)\n\t\t> .toolbar-dropdown:not(.hiding) {\n\tdisplay: none;\n}\n\n.toolbar-dropdown {\n\tposition: absolute;\n\tpadding: 15px;\n\tpadding-top: 5px;\n\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmax-height: 80vh;\n\n\tmax-width: fit-content;\n\n\t/* Prevent overlap/being displayed under the undo/redo buttons */\n\tz-index: 2;\n\tbackground-color: var(--primary-background-color);\n\tbox-shadow: 0px 3px 3px var(--primary-shadow-color);\n}\n\n/* Animate showing/hiding the dropdown. Animations triggered in JavaScript. */\n@keyframes dropdown-transition-in {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale(1, 0);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: scale(1, 1);\n\t}\n}\n\n@keyframes dropdown-transition-out {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: scale(1, 1);\t\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scale(1, 0);\n\t}\n}\n\n.toolbar-dropdown {\n\t/* Ensure the animation begins from the correct location. */\n\ttransform-origin: top left;\n\n\t--dropdown-show-animation: dropdown-transition-in;\n\t--dropdown-hide-animation: dropdown-transition-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t/* Disable toolbar animations if reducing motion */\n\t.toolbar-dropdown {\n\t\t--dropdown-show-animation: none;\n\t\t--dropdown-hide-animation: none;\n\t}\n\n\t.toolbar-dropdown.hiding {\n\t\tdisplay: none;\n\t}\n\n\t/* Also disable arrow rotation */\n\t.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\t\ttransition: none;\n\t}\n\n\t/* ...and background color animation. */\n\t.toolbar-button, .toolbar-root button {\n\t\ttransition: none;\n\t}\n}\n\n.toolbar-buttonGroup {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n}\n\n.toolbar-closeColorPickerOverlay {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\n\ttouch-action: none;\n\n\tbackground-color: var(--primary-background-color);\n\topacity: 0.3;\n}\n\n/* Make color selection buttons fill their containing label */\n.toolbar-dropdown .clr-field button {\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 2px;\n\tmargin-left: 0;\n\tmargin-right: 0;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor {\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {\n\tflex-grow: 1;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor button {\n\tmin-width: 48px;\n}\n\n.color-input-container {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n}\n\n.color-input-container .pipetteButton {\n\twidth: 30px;\n\theight: 30px;\n\tpadding: 0;\n\tdisplay: inline-flex;\n}\n\n.color-input-container .pipetteButton > svg {\n\twidth: 100%;\n}\n\n.color-input-container .pipetteButton.active {\n\tbackground-color: var(--secondary-background-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-spacedList > * {\n\tpadding-bottom: 5px;\n\tpadding-top: 5px;\n}\n\n@media print {\n\t/* Hide the toolbar on print. */\n\t.toolbar-root {\n\t\tdisplay: none;\n\t}\n}",""]);const s=p},875:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,"\n.toolbar-image-selection-overlay {\n\tposition: absolute;\n\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 10;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.toolbar-image-selection-overlay > div {\n\tbackground: var(--primary-background-color);\n\tbox-shadow: 1px 1px 3px var(--primary-shadow-color);\n\n\tpadding: 18px;\n\tborder-radius: 3px;\n}\n\n.toolbar-image-selection-overlay > div > div {\n\tpadding: 5px;\n}\n\n.toolbar-image-selection-overlay img {\n\tmax-width: min(50vw, 75%);\n\tmax-height: 50vh;\n\n\t/* Center */\n\tdisplay: block;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.toolbar-image-selection-overlay .action-button-row {\n\tmargin-top: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-image-selection-overlay .action-button-row > button {\n\tflex-grow: 1;\n}",""]);const l=a},701:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,"\n.toolbar-overflow-widget-overflow-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n}\n\n.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {\n\tflex-direction: row;\n}\n\n.toolbar-overflow-widget.horizontal > .toolbar-dropdown {\n\tmax-width: 100%;\n\tleft: 15px;\n\tright: 15px;\n\n\t/*\n\t Override the default transform and margin-left.\n\n\t Setting translate to none prevents the dropdown from being shifted off the\n\t screen on window resize by dropdown-repositioning logic.\n\t*/\n\tmargin-left: 0 !important;\n\ttranslate: none !important;\n\n\tpadding: 4px;\n}",""]);const l=a},161:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,"\n.toolbar-pen-type-selector > div {\n\tdisplay: flex;\n\tflex-direction: row;\n\n\tmax-width: 350px;\n\tflex-wrap: wrap;\n\n\t--button-size: 56px;\n}\n\n.toolbar-pen-type-selector .pen-type-button {\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tbox-sizing: border-box;\n\n\tflex-shrink: 1;\n\tmargin: 2px;\n}\n\n.toolbar-pen-type-selector .pen-type-button:focus-within {\n\toutline: 2px solid var(--primary-foreground-color);\n}\n\n.toolbar-pen-type-selector .pen-type-button input {\n\topacity: 0;\n\theight: 0;\n}\n\n.toolbar-pen-type-selector .pen-type-button label {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\twidth: var(--button-size);\n\theight: var(--button-size);\n\n\tfont-size: 0.7rem;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 4px;\n}\n\n\n.toolbar-pen-type-selector .pen-type-button .icon {\n\tflex-grow: 1;\n\tflex-shrink: 1;\n\twidth: 100%;\n}\n\n.toolbar-pen-type-selector .pen-type-button.checked {\n\tbackground-color: var(--secondary-background-color);\n\tcolor: var(--secondary-foreground-color);\n}\n",""]);const l=a},914:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,"\n.find-tool-overlay {\n    /* Show at the bottom of the screen. */\n    order: -1;\n\n    position: absolute;\n}",""]);const l=a},690:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,"\n.selection-tool-selection-background {\n    background-color: var(--secondary-background-color);\n    opacity: 0.5;\n    overflow: visible;\n    position: absolute;\n}\n\n.selection-tool-handle {\n    border: 1px solid var(--primary-foreground-color);\n    background: var(--primary-background-color);\n    position: absolute;\n    cursor: grab;\n}\n\n.selection-tool-handle.selection-tool-circle {\n    border-radius: 100%;\n}\n\n.overlay.handleOverlay {\n    height: 0;\n    overflow: visible;\n}",""]);const l=a},165:(n,t,o)=>{o.d(t,{Z:()=>l});var r=o(601),e=o.n(r),i=o(609),a=o.n(i)()(e());a.push([n.id,"\n.js-draw-sound-ui-toggle {\n\twidth: 0px;\n\theight: 0px;\n\toverflow: hidden;    \n}\n\n.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {\n\topacity: 0.5;\n}\n",""]);const l=a},883:(n,t,o)=>{o.d(t,{Z:()=>s});var r=o(601),e=o.n(r),i=o(609),a=o.n(i),l=o(690),d=o(914),c=o(165),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([n.id,"",""]);const s=p},609:n=>{n.exports=function(n){var t=[];return t.toString=function(){return this.map((function(t){var o="",r=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),r&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=n(t),r&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o})).join("")},t.i=function(n,o,r,e,i){"string"==typeof n&&(n=[[null,n,void 0]]);var a={};if(r)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(a[d]=!0)}for(var c=0;c<n.length;c++){var p=[].concat(n[c]);r&&a[p[0]]||(void 0!==i&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=i),o&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=o):p[2]=o),e&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=e):p[4]="".concat(e)),t.push(p))}},t}},601:n=>{n.exports=function(n){return n[1]}},62:n=>{var t=[];function o(n){for(var o=-1,r=0;r<t.length;r++)if(t[r].identifier===n){o=r;break}return o}function r(n,r){for(var i={},a=[],l=0;l<n.length;l++){var d=n[l],c=r.base?d[0]+r.base:d[0],p=i[c]||0,s="".concat(c," ").concat(p);i[c]=p+1;var u=o(s),b={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==u)t[u].references++,t[u].updater(b);else{var h=e(b,r);r.byIndex=l,t.splice(l,0,{identifier:s,updater:h,references:1})}a.push(s)}return a}function e(n,t){var o=t.domAPI(t);o.update(n);return function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap&&t.supports===n.supports&&t.layer===n.layer)return;o.update(n=t)}else o.remove()}}n.exports=function(n,e){var i=r(n=n||[],e=e||{});return function(n){n=n||[];for(var a=0;a<i.length;a++){var l=o(i[a]);t[l].references--}for(var d=r(n,e),c=0;c<i.length;c++){var p=o(i[c]);0===t[p].references&&(t[p].updater(),t.splice(p,1))}i=d}}},793:n=>{var t={};n.exports=function(n,o){var r=function(n){if(void 0===t[n]){var o=document.querySelector(n);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(n){o=null}t[n]=o}return t[n]}(n);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(o)}},173:n=>{n.exports=function(n){var t=document.createElement("style");return n.setAttributes(t,n.attributes),n.insert(t,n.options),t}},892:(n,t,o)=>{n.exports=function(n){var t=o.nc;t&&n.setAttribute("nonce",t)}},36:n=>{n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=n.insertStyleElement(n);return{update:function(o){!function(n,t,o){var r="";o.supports&&(r+="@supports (".concat(o.supports,") {")),o.media&&(r+="@media ".concat(o.media," {"));var e=void 0!==o.layer;e&&(r+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),r+=o.css,e&&(r+="}"),o.media&&(r+="}"),o.supports&&(r+="}");var i=o.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(r,n,t.options)}(t,n,o)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(t)}}}},464:n=>{n.exports=function(n,t){if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}}},t={};function o(r){var e=t[r];if(void 0!==e)return e.exports;var i=t[r]={id:r,exports:{}};return n[r](i,i.exports,o),i.exports}o.n=n=>{var t=n&&n.__esModule?()=>n.default:()=>n;return o.d(t,{a:t}),t},o.d=(n,t)=>{for(var r in t)o.o(t,r)&&!o.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o.o=(n,t)=>Object.prototype.hasOwnProperty.call(n,t),o.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},o.nc=void 0;var r={};(()=>{o.r(r);var n=o(62),t=o.n(n),e=o(36),i=o.n(e),a=o(793),l=o.n(a),d=o(892),c=o.n(d),p=o(173),s=o.n(p),u=o(464),b=o.n(u),h=o(860),g={};g.styleTagTransform=b(),g.setAttributes=c(),g.insert=l().bind(null,"head"),g.domAPI=i(),g.insertStyleElement=s();t()(h.Z,g);h.Z&&h.Z.locals&&h.Z.locals;var f=o(489),x={};x.styleTagTransform=b(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=s();t()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=r})();

package/dist/cjs/localizations/de.js

@@ -13,5 +13,5 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var localization_1 = require("../localization");
 // German localization
-var localization = __assign(__assign({}, localization_1.defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', image: 'Bild', inputAltText: 'Alt-Text: ', chooseFile: 'Wähle Datei: ', submit: 'Absenden', cancel: 'Abbrechen', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', textSize: 'Größe: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', pressureSensitiveFreehandPen: 'Stift (druckempfindlich)', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', lockRotation: 'Sperre Rotation', paste: 'Einfügen', dropdownShown: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " angezeigt"); }, dropdownHidden: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " versteckt"); }, zoomLevel: function (zoomPercent) { return "Verg\u00F6\u00DFerung: ".concat(zoomPercent, "%"); }, colorChangedAnnouncement: function (color) { return "Farbe zu ".concat(color, " ge\u00E4ndert"); }, imageSize: function (size, units) { return "Bild-Gr\u00F6\u00DFe: ".concat(size, " ").concat(units); }, imageLoadError: function (message) { return "Fehler beim Laden des Bildes: ".concat(message); }, errorImageHasZeroSize: 'Fehler: Bild hat Größe Null', penTool: function (penNumber) { return "Stift ".concat(penNumber); }, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', changeTool: 'Wechsle Werkzeug', pasteHandler: 'Copy-Paste-Handler', findLabel: 'Finde', toNextMatch: 'Nächstes', closeFindDialog: 'Schließen', findDialogShown: 'Finde-Dialog angezeigt', findDialogHidden: 'Finde-Dialog versteckt', focusedFoundText: function (matchIdx, totalMatches) { return "Sieh Treffer ".concat(matchIdx, " von ").concat(totalMatches, " an"); }, toolEnabledAnnouncement: function (toolName) { return "".concat(toolName, " aktiviert"); }, toolDisabledAnnouncement: function (toolName) { return "".concat(toolName, " deaktiviert"); }, updatedViewport: 'Transformierte Ansicht', transformedElements: function (elemCount) { return "".concat(elemCount, " Element").concat(1 === elemCount ? '' : 'e', " transformiert"); }, resizeOutputCommand: function (newSize) { return "Bildgr\u00F6\u00DFe auf ".concat(newSize.w, "x").concat(newSize.h, " ge\u00E4ndert"); }, addElementAction: function (componentDescription) { return "".concat(componentDescription, " hinzugef\u00FCgt"); }, eraseAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " gel\u00F6scht"); }, duplicateAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " dupliziert"); }, inverseOf: function (actionDescription) { return "".concat(actionDescription, " umgekehrt"); }, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: function (degrees) { return "".concat(Math.abs(degrees), " Grad ").concat(degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn', " gedreht"); }, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: function (count) { return "".concat(count, " Element").concat(1 === count ? '' : 'e', " ausgew\u00E4hlt"); }, stroke: 'Strich', svgObject: 'SVG-Objekt', text: function (text) { return "Text-Objekt: ".concat(text); }, pathNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Pfad-Objekte."); }, textNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Text-Knotenpunkte."); }, textNode: function (content) { return "Text: ".concat(content); }, imageNodeCount: function (nodeCount) { return "Es gibt ".concat(nodeCount, " sichtbare Bild-Knoten."); }, imageNode: function (label) { return "Bild: ".concat(label); }, unlabeledImageNode: 'Bild ohne Label', rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: function (percentage) { return "Laden ".concat(percentage, "%..."); }, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " r\u00FCckg\u00E4ngig gemacht"); }, redoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " wiederholt"); }, reformatSelection: 'Formatiere Auswahl', documentProperties: 'Seite', backgroundColor: 'Hintergrundfarbe: ', imageWidthOption: 'Breite: ', imageHeightOption: 'Höhe: ', useGridOption: 'Gitter: ', toggleOverflow: 'Mehr', selectAllTool: 'Alle auswählen', soundExplorer: 'Klangbasierte Bilderkundung', disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung', enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung', copied: function (count, description) { return "".concat(count, " ").concat(description, " kopiert"); }, pasted: function (count, description) { return "".concat(count, " ").concat(description, " eingef\u00FCgt"); }, unionOf: function (actionDescription, actionCount) { return "Vereinigung: ".concat(actionCount, " ").concat(actionDescription); }, emptyBackground: 'Leerer Hintergrund', filledBackgroundWithColor: function (color) { return "Gef\u00FCllter Hintergrund (".concat(color, ")"); }, restyledElement: function (elementDescription) { return "".concat(elementDescription, " umgestaltet"); } });
+var localization = __assign(__assign({}, localization_1.defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', image: 'Bild', inputAltText: 'Alt-Text: ', chooseFile: 'Wähle Datei: ', submit: 'Absenden', cancel: 'Abbrechen', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', textSize: 'Größe: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', roundedTipPen: 'Freihand', flatTipPen: 'Stift (druckempfindlich)', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', lockRotation: 'Sperre Rotation', paste: 'Einfügen', dropdownShown: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " angezeigt"); }, dropdownHidden: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " versteckt"); }, zoomLevel: function (zoomPercent) { return "Verg\u00F6\u00DFerung: ".concat(zoomPercent, "%"); }, colorChangedAnnouncement: function (color) { return "Farbe zu ".concat(color, " ge\u00E4ndert"); }, imageSize: function (size, units) { return "Bild-Gr\u00F6\u00DFe: ".concat(size, " ").concat(units); }, imageLoadError: function (message) { return "Fehler beim Laden des Bildes: ".concat(message); }, errorImageHasZeroSize: 'Fehler: Bild hat Größe Null', penTool: function (penNumber) { return "Stift ".concat(penNumber); }, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', changeTool: 'Wechsle Werkzeug', pasteHandler: 'Copy-Paste-Handler', findLabel: 'Finde', toNextMatch: 'Nächstes', closeFindDialog: 'Schließen', findDialogShown: 'Finde-Dialog angezeigt', findDialogHidden: 'Finde-Dialog versteckt', focusedFoundText: function (matchIdx, totalMatches) { return "Sieh Treffer ".concat(matchIdx, " von ").concat(totalMatches, " an"); }, toolEnabledAnnouncement: function (toolName) { return "".concat(toolName, " aktiviert"); }, toolDisabledAnnouncement: function (toolName) { return "".concat(toolName, " deaktiviert"); }, updatedViewport: 'Transformierte Ansicht', transformedElements: function (elemCount) { return "".concat(elemCount, " Element").concat(1 === elemCount ? '' : 'e', " transformiert"); }, resizeOutputCommand: function (newSize) { return "Bildgr\u00F6\u00DFe auf ".concat(newSize.w, "x").concat(newSize.h, " ge\u00E4ndert"); }, addElementAction: function (componentDescription) { return "".concat(componentDescription, " hinzugef\u00FCgt"); }, eraseAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " gel\u00F6scht"); }, duplicateAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " dupliziert"); }, inverseOf: function (actionDescription) { return "".concat(actionDescription, " umgekehrt"); }, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: function (degrees) { return "".concat(Math.abs(degrees), " Grad ").concat(degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn', " gedreht"); }, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: function (count) { return "".concat(count, " Element").concat(1 === count ? '' : 'e', " ausgew\u00E4hlt"); }, stroke: 'Strich', svgObject: 'SVG-Objekt', text: function (text) { return "Text-Objekt: ".concat(text); }, pathNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Pfad-Objekte."); }, textNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Text-Knotenpunkte."); }, textNode: function (content) { return "Text: ".concat(content); }, imageNodeCount: function (nodeCount) { return "Es gibt ".concat(nodeCount, " sichtbare Bild-Knoten."); }, imageNode: function (label) { return "Bild: ".concat(label); }, unlabeledImageNode: 'Bild ohne Label', rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: function (percentage) { return "Laden ".concat(percentage, "%..."); }, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " r\u00FCckg\u00E4ngig gemacht"); }, redoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " wiederholt"); }, reformatSelection: 'Formatiere Auswahl', documentProperties: 'Seite', backgroundColor: 'Hintergrundfarbe: ', imageWidthOption: 'Breite: ', imageHeightOption: 'Höhe: ', useGridOption: 'Gitter: ', toggleOverflow: 'Mehr', selectAllTool: 'Alle auswählen', soundExplorer: 'Klangbasierte Bilderkundung', disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung', enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung', copied: function (count, description) { return "".concat(count, " ").concat(description, " kopiert"); }, pasted: function (count, description) { return "".concat(count, " ").concat(description, " eingef\u00FCgt"); }, unionOf: function (actionDescription, actionCount) { return "Vereinigung: ".concat(actionCount, " ").concat(actionDescription); }, emptyBackground: 'Leerer Hintergrund', filledBackgroundWithColor: function (color) { return "Gef\u00FCllter Hintergrund (".concat(color, ")"); }, restyledElement: function (elementDescription) { return "".concat(elementDescription, " umgestaltet"); } });
 exports.default = localization;

package/dist/cjs/localizations/es.js

@@ -19,7 +19,7 @@ var localization = __assign(__assign({}, localization_1.defaultEditorLocalizatio
     loading: function (percentage) { return "Cargando: ".concat(percentage, "%..."); }, imageEditor: 'Editor de dibujos', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " fue deshecho"); }, redoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " fue rehecho"); }, undo: 'Deshace', redo: 'Rehace', 
     // Strings for the toolbar
     // (see src/toolbar/localization.ts)
-    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectPenType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown: function (toolName) {
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', roundedTipPen: 'Lapiz Redondeado', selectPenType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown: function (toolName) {
         return "Men\u00FA por ".concat(toolName, " es visible");
     }, dropdownHidden: function (toolName) {
         return "Men\u00FA por ".concat(toolName, " fue ocultado");

package/dist/cjs/rendering/renderers/CanvasRenderer.js

@@ -105,6 +105,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
         this.ctx.moveTo(startPoint.x, startPoint.y);
     };
     CanvasRenderer.prototype.endPath = function (style) {
+        this.ctx.save();
         this.ctx.fillStyle = style.fill.toHexString();
         this.ctx.fill();
         if (style.stroke) {
@@ -115,6 +116,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this.ctx.stroke();
         }
         this.ctx.closePath();
+        this.ctx.restore();
     };
     CanvasRenderer.prototype.lineTo = function (point) {
         point = this.canvasToScreen(point);

package/dist/cjs/rendering/renderers/SVGRenderer.d.ts

@@ -30,7 +30,7 @@ export default class SVGRenderer extends AbstractRenderer {
     setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;
-    private addPathToSVG;
+    protected addPathToSVG(): SVGPathElement;
     drawPath(pathSpec: RenderablePathSpec): void;
     private transformFrom;
     private textContainer;

package/dist/cjs/rendering/renderers/SVGRenderer.js

@@ -113,11 +113,12 @@ var SVGRenderer = /** @class */ (function (_super) {
             this.overwrittenAttrs = {};
         }
     };
-    // Push [this.fullPath] to the SVG
+    // Push `this.fullPath` to the SVG. Returns the path added to the SVG, if any.
+    // @internal
     SVGRenderer.prototype.addPathToSVG = function () {
         var _a;
         if (!this.lastPathStyle || this.lastPathString.length === 0) {
-            return;
+            return null;
         }
         var pathElem = document.createElementNS(svgNameSpace, 'path');
         pathElem.setAttribute('d', this.lastPathString.join(' '));
@@ -134,6 +135,7 @@ var SVGRenderer = /** @class */ (function (_super) {
         }
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
+        return pathElem;
     };
     SVGRenderer.prototype.drawPath = function (pathSpec) {
         var style = pathSpec.style;

package/dist/cjs/testing/getUniquePointerId.d.ts

@@ -0,0 +1,4 @@
+import Pointer from '../Pointer';
+/** Returns the smallest ID not used by the pointers in the given list. */
+declare const getUniquePointerId: (pointers: Pointer[]) => number;
+export default getUniquePointerId;

package/dist/cjs/testing/getUniquePointerId.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Returns the smallest ID not used by the pointers in the given list. */
+var getUniquePointerId = function (pointers) {
+    var ptrId = 0;
+    var pointerIds = pointers.map(function (ptr) { return ptr.id; });
+    pointerIds.sort();
+    for (var _i = 0, pointerIds_1 = pointerIds; _i < pointerIds_1.length; _i++) {
+        var pointerId = pointerIds_1[_i];
+        if (ptrId === pointerId) {
+            ptrId = pointerId + 1;
+        }
+    }
+    return ptrId;
+};
+exports.default = getUniquePointerId;

package/dist/cjs/testing/sendPenEvent.d.ts

@@ -8,5 +8,5 @@ import { InputEvtType } from '../types';
  *
  * @see {@link sendTouchEvent}
  */
-declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => void;
+declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => Pointer;
 export default sendPenEvent;

package/dist/cjs/testing/sendPenEvent.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var Pointer_1 = require("../Pointer");
 var types_1 = require("../types");
+var getUniquePointerId_1 = require("./getUniquePointerId");
 /**
  * Dispatch a pen event to the currently selected tool.
  * Intended for unit tests.
@@ -9,7 +10,8 @@ var types_1 = require("../types");
  * @see {@link sendTouchEvent}
  */
 var sendPenEvent = function (editor, eventType, point, allPointers) {
-    var mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== types_1.InputEvtType.PointerUpEvt, editor.viewport);
+    var id = (0, getUniquePointerId_1.default)(allPointers !== null && allPointers !== void 0 ? allPointers : []);
+    var mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== types_1.InputEvtType.PointerUpEvt, editor.viewport, id);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
         allPointers: allPointers !== null && allPointers !== void 0 ? allPointers : [
@@ -17,5 +19,6 @@ var sendPenEvent = function (editor, eventType, point, allPointers) {
         ],
         current: mainPointer,
     });
+    return mainPointer;
 };
 exports.default = sendPenEvent;

package/dist/cjs/testing/sendTouchEvent.js

@@ -11,6 +11,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var Pointer_1 = require("../Pointer");
 var types_1 = require("../types");
+var getUniquePointerId_1 = require("./getUniquePointerId");
 /**
  * Dispatch a touch event to the currently selected tool. Intended for unit tests.
  *
@@ -49,17 +50,9 @@ var types_1 = require("../types");
  */
 var sendTouchEvent = function (editor, eventType, screenPos, allOtherPointers) {
     var canvasPos = editor.viewport.screenToCanvas(screenPos);
-    var ptrId = 0;
-    var maxPtrId = 0;
     // Get a unique ID for the main pointer
     // (try to use id=0, but don't use it if it's already in use).
-    for (var _i = 0, _a = allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []; _i < _a.length; _i++) {
-        var pointer = _a[_i];
-        maxPtrId = Math.max(pointer.id, maxPtrId);
-        if (pointer.id === ptrId) {
-            ptrId = maxPtrId + 1;
-        }
-    }
+    var ptrId = (0, getUniquePointerId_1.default)(allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []);
     var mainPointer = Pointer_1.default.ofCanvasPoint(canvasPos, eventType !== types_1.InputEvtType.PointerUpEvt, editor.viewport, ptrId, Pointer_1.PointerDevice.Touch);
     editor.toolController.dispatchInputEvent({
         kind: eventType,

package/dist/cjs/toolbar/IconProvider.d.ts

@@ -49,7 +49,7 @@ export default class IconProvider {
     makeInsertImageIcon(): IconType;
     makeTextIcon(textStyle: TextRenderingStyle): IconType;
     makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
-    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
+    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory, includeTransparencyGrid?: boolean): IconType;
     makePipetteIcon(color?: Color4): IconType;
     makeFormatSelectionIcon(): IconType;
     makeResizeViewportIcon(): IconType;

package/dist/cjs/toolbar/IconProvider.js

@@ -1,4 +1,19 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var Color4_1 = require("../Color4");
 var Vec2_1 = require("../math/Vec2");
@@ -7,8 +22,13 @@ var Viewport_1 = require("../Viewport");
 var svgNamespace = 'http://www.w3.org/2000/svg';
 var iconColorFill = "\n\tstyle='fill: var(--icon-color);'\n";
 var iconColorStrokeFill = "\n\tstyle='fill: var(--icon-color); stroke: var(--icon-color);'\n";
-var checkerboardPatternDef = "\n\t<pattern\n\t\tid='checkerboard'\n\t\tviewBox='0,0,10,10'\n\t\twidth='20%'\n\t\theight='20%'\n\t\tpatternUnits='userSpaceOnUse'\n\t>\n\t\t<rect x=0 y=0 width=10 height=10 fill='white'/>\n\t\t<rect x=0 y=0 width=5 height=5 fill='gray'/>\n\t\t<rect x=5 y=5 width=5 height=5 fill='gray'/>\n\t</pattern>\n";
-var checkerboardPatternRef = 'url(#checkerboard)';
+var checkerboardIdCounter = 0;
+var makeCheckerboardPattern = function () {
+    var id = "checkerboard-".concat(checkerboardIdCounter++);
+    var patternDef = "\n\t\t<pattern\n\t\t\tid='".concat(id, "'\n\t\t\tviewBox='0,0,10,10'\n\t\t\twidth='20%'\n\t\t\theight='20%'\n\t\t\tpatternUnits='userSpaceOnUse'\n\t\t>\n\t\t\t<rect x=0 y=0 width=10 height=10 fill='white'/>\n\t\t\t<rect x=0 y=0 width=5 height=5 fill='gray'/>\n\t\t\t<rect x=5 y=5 width=5 height=5 fill='gray'/>\n\t\t</pattern>\n\t");
+    var patternRef = "url(#".concat(id, ")");
+    return { patternDef: patternDef, patternRef: patternRef };
+};
 /**
  * Provides icons that can be used in the toolbar, etc.
  * Extend this class and override methods to customize icons.
@@ -178,13 +198,17 @@ var IconProvider = /** @class */ (function () {
         var penTipPath = "M 25,35 ".concat(10 - tipThickness / 4, ",").concat(70 - tipThickness / 2, " 20,75 25,85 60,75 70,55 45,25 Z");
         var pencilTipColor = Color4_1.default.fromHex('#f4d7d7');
         var tipColor = pencilTipColor.mix(Color4_1.default.fromString(color), tipThickness / 40 - 0.1).toHexString();
-        var ink = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t");
-        var penTip = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(tipColor, "\"\n\t\t\t\tstroke=\"").concat(color, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t");
-        var grip = "\n\t\t\t<path\n\t\t\t\t".concat(iconColorStrokeFill, "\n\t\t\t\td=\"").concat(gripMainPath, "\"\n\t\t\t/>\n\n\t\t\t<!-- shadows -->\n\t\t\t<path\n\t\t\t\tfill=\"rgba(150, 150, 150, 0.3)\"\n\t\t\t\td=\"").concat(gripShadow1Path, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"rgba(100, 100, 100, 0.2)\"\n\t\t\t\td=\"").concat(gripShadow2Path, "\"\n\t\t\t/>\n\n\t\t\t<!-- color bubble -->\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t");
-        icon.innerHTML = "\n\t\t<defs>\n\t\t\t".concat(checkerboardPatternDef, "\n\t\t</defs>\n\t\t<g>\n\t\t\t").concat(ink, "\n\t\t\t").concat(penTip, "\n\t\t\t").concat(grip, "\n\t\t</g>\n\t\t");
+        var checkerboardPattern = makeCheckerboardPattern();
+        var ink = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t");
+        var penTip = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(tipColor, "\"\n\t\t\t\tstroke=\"").concat(color, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t");
+        var grip = "\n\t\t\t<path\n\t\t\t\t".concat(iconColorStrokeFill, "\n\t\t\t\td=\"").concat(gripMainPath, "\"\n\t\t\t/>\n\n\t\t\t<!-- shadows -->\n\t\t\t<path\n\t\t\t\tfill=\"rgba(150, 150, 150, 0.3)\"\n\t\t\t\td=\"").concat(gripShadow1Path, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"rgba(100, 100, 100, 0.2)\"\n\t\t\t\td=\"").concat(gripShadow2Path, "\"\n\t\t\t/>\n\n\t\t\t<!-- color bubble -->\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t");
+        icon.innerHTML = "\n\t\t<defs>\n\t\t\t".concat(checkerboardPattern.patternDef, "\n\t\t</defs>\n\t\t<g>\n\t\t\t").concat(ink, "\n\t\t\t").concat(penTip, "\n\t\t\t").concat(grip, "\n\t\t</g>\n\t\t");
         return icon;
     };
-    IconProvider.prototype.makeIconFromFactory = function (pen, factory) {
+    IconProvider.prototype.makeIconFromFactory = function (pen, factory, 
+    // If true, attempts to guess the location of a transparency grid
+    includeTransparencyGrid) {
+        if (includeTransparencyGrid === void 0) { includeTransparencyGrid = false; }
         // Increase the thickness we use to generate the icon less with larger actual thicknesses.
         // We want the icon to be recognisable with a large range of thicknesses.
         var thickness = Math.sqrt(pen.getThickness()) * 3;
@@ -207,8 +231,49 @@ var IconProvider = /** @class */ (function () {
         var icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
         viewport.updateScreenSize(Vec2_1.Vec2.of(100, 100));
-        var renderer = new SVGRenderer_1.default(icon, viewport);
+        var renderer;
+        if (includeTransparencyGrid) {
+            var checkerboardPattern_1 = makeCheckerboardPattern();
+            var defs = document.createElementNS(svgNamespace, 'defs');
+            defs.innerHTML = checkerboardPattern_1.patternDef;
+            icon.appendChild(defs);
+            var background_1 = document.createElementNS(svgNamespace, 'g');
+            icon.appendChild(background_1);
+            renderer = new /** @class */ (function (_super) {
+                __extends(class_1, _super);
+                function class_1() {
+                    return _super.call(this, icon, viewport) || this;
+                }
+                class_1.prototype.addPathToSVG = function () {
+                    var addedPath = _super.prototype.addPathToSVG.call(this);
+                    if (addedPath) {
+                        // Add a copy of the path on the background
+                        var copy = addedPath.cloneNode(true);
+                        copy.style.zIndex = '-1';
+                        // Make the
+                        if (copy.hasAttribute('fill')
+                            && copy.getAttribute('fill') !== 'transparent'
+                            && copy.getAttribute('fill') !== 'none') {
+                            copy.setAttribute('fill', checkerboardPattern_1.patternRef);
+                        }
+                        if (copy.hasAttribute('stroke')) {
+                            copy.setAttribute('stroke', checkerboardPattern_1.patternRef);
+                        }
+                        background_1.appendChild(copy);
+                    }
+                    return addedPath;
+                };
+                return class_1;
+            }(SVGRenderer_1.default))();
+        }
+        else {
+            renderer = new SVGRenderer_1.default(icon, viewport);
+        }
         builder.preview(renderer);
+        // If only a single path was rendered, try to give it a checkerboard background to
+        // emphasize transparency. TODO: This is very fragile
+        var bbox = builder.getBBox();
+        icon.setAttribute('viewBox', "".concat(bbox.x, " ").concat(bbox.y, " ").concat(bbox.w, " ").concat(bbox.h));
         return icon;
     };
     IconProvider.prototype.makePipetteIcon = function (color) {
@@ -217,8 +282,9 @@ var IconProvider = /** @class */ (function () {
         pipette.setAttribute('d', "\n\t\t\tM 47,6\n\t\t\tC 35,5 25,15 35,30\n\t\t\tc -9.2,1.3 -15,0 -15,3\n\t\t\t\t0,2 5,5 15,7\n\t\t\tV 81\n\t\t\tL 40,90\n\t\t\th 6\n\t\t\tL 40,80\n\t\t\tV 40\n\t\t\th 15\n\t\t\tv 40\n\t\t\tl -6,10\n\t\t\th 6\n\t\t\tl 5,-9.2\n\t\t\tV 40\n\t\t\tC 70,38 75,35 75,33\n\t\t\t\t75,30 69.2,31.2 60,30\n\t\t\t\t65,15 65,5      47,6\n\t\t\tZ\n\t\t");
         pipette.style.fill = 'var(--icon-color)';
         if (color) {
+            var checkerboardPattern = makeCheckerboardPattern();
             var defs = document.createElementNS(svgNamespace, 'defs');
-            defs.innerHTML = checkerboardPatternDef;
+            defs.innerHTML = checkerboardPattern.patternDef;
             icon.appendChild(defs);
             var fluidBackground = document.createElementNS(svgNamespace, 'path');
             var fluid = document.createElementNS(svgNamespace, 'path');
@@ -226,7 +292,7 @@ var IconProvider = /** @class */ (function () {
             fluid.setAttribute('d', fluidPathData);
             fluidBackground.setAttribute('d', fluidPathData);
             fluid.style.fill = color.toHexString();
-            fluidBackground.style.fill = checkerboardPatternRef;
+            fluidBackground.style.fill = checkerboardPattern.patternRef;
             icon.appendChild(fluidBackground);
             icon.appendChild(fluid);
         }

package/dist/cjs/toolbar/localization.d.ts

@@ -13,8 +13,8 @@ export interface ToolbarLocalization {
     chooseFile: string;
     cancel: string;
     submit: string;
-    freehandPen: string;
-    pressureSensitiveFreehandPen: string;
+    roundedTipPen: string;
+    flatTipPen: string;
     selectPenType: string;
     colorLabel: string;
     pen: string;

package/dist/cjs/toolbar/localization.js

@@ -35,8 +35,8 @@ exports.defaultToolbarLocalization = {
     useGridOption: 'Grid: ',
     toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
-    freehandPen: 'Freehand',
-    pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
+    roundedTipPen: 'Rounded Tip',
+    flatTipPen: 'Flat Tip',
     arrowPen: 'Arrow',
     linePen: 'Line',
     outlinedRectanglePen: 'Outlined rectangle',

package/dist/cjs/toolbar/widgets/BaseToolWidget.d.ts

@@ -1,10 +1,12 @@
 import Editor from '../../Editor';
 import BaseTool from '../../tools/BaseTool';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default abstract class BaseToolWidget extends BaseWidget {
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;
+    protected onKeyPress(event: KeyPressEvent): boolean;
     addTo(parent: HTMLElement): HTMLElement;
 }

package/dist/cjs/toolbar/widgets/BaseToolWidget.js

@@ -54,6 +54,13 @@ var BaseToolWidget = /** @class */ (function (_super) {
             this.targetTool.setEnabled(!this.targetTool.isEnabled());
         }
     };
+    BaseToolWidget.prototype.onKeyPress = function (event) {
+        if (this.isSelected() && event.key === ' ' && this.hasDropdown) {
+            this.handleClick();
+            return true;
+        }
+        return false;
+    };
     BaseToolWidget.prototype.addTo = function (parent) {
         var result = _super.prototype.addTo.call(this, parent);
         this.setSelected(this.targetTool.isEnabled());

package/dist/cjs/toolbar/widgets/PenToolWidget.d.ts

@@ -14,12 +14,14 @@ export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     protected penTypes: PenTypeRecord[];
+    private static idCounter;
     constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);
     protected getTitle(): string;
     private getCurrentPenTypeIdx;
     private getCurrentPenType;
+    private createIconForRecord;
     protected createIcon(): Element;
-    private static idCounter;
+    private createPenTypeSelector;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     serializeState(): SavedToolbuttonState;