js-draw 1.4.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/Editor.css +11 -10
  2. package/dist/bundle.js +1 -1
  3. package/dist/bundledStyles.js +1 -1
  4. package/dist/cjs/toolbar/AbstractToolbar.d.ts +9 -3
  5. package/dist/cjs/toolbar/AbstractToolbar.js +11 -4
  6. package/dist/cjs/toolbar/AbstractToolbar.test.d.ts +1 -0
  7. package/dist/cjs/toolbar/EdgeToolbar.js +2 -2
  8. package/dist/cjs/toolbar/widgets/SaveActionWidget.d.ts +2 -1
  9. package/dist/cjs/toolbar/widgets/SaveActionWidget.js +6 -2
  10. package/dist/cjs/tools/SelectionTool/Selection.js +4 -2
  11. package/dist/cjs/version.js +1 -1
  12. package/dist/mjs/toolbar/AbstractToolbar.d.ts +9 -3
  13. package/dist/mjs/toolbar/AbstractToolbar.mjs +11 -4
  14. package/dist/mjs/toolbar/AbstractToolbar.test.d.ts +1 -0
  15. package/dist/mjs/toolbar/EdgeToolbar.mjs +2 -2
  16. package/dist/mjs/toolbar/widgets/SaveActionWidget.d.ts +2 -1
  17. package/dist/mjs/toolbar/widgets/SaveActionWidget.mjs +6 -2
  18. package/dist/mjs/tools/SelectionTool/Selection.mjs +4 -2
  19. package/dist/mjs/version.mjs +1 -1
  20. package/package.json +2 -2
  21. package/src/toolbar/EdgeToolbar.scss +7 -4
  22. package/src/tools/SelectionTool/SelectionTool.scss +2 -2
package/dist/bundledStyles.js CHANGED
@@ -1 +1 @@
1
- (()=>{"use strict";var o={489:(o,e,r)=>{r.d(e,{Z:()=>l});var n=r(601),t=r.n(n),a=r(609),i=r.n(a)()(t());i.push([o.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: 16px;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-thumb {\n width: 16px;\n height: 16px;\n -webkit-appearance: none;\n}\n\n.clr-picker input[type="range"]::-moz-range-track {\n width: 100%;\n height: 16px;\n border: 0;\n}\n\n.clr-picker input[type="range"]::-moz-range-thumb {\n width: 16px;\n height: 16px;\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% + 32px);\n height: 16px;\n left: -16px;\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=i},245:(o,e,r)=>{r.d(e,{Z:()=>l});var n=r(601),t=r.n(n),a=r(609),i=r.n(a)()(t());i.push([o.id,':root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div>div{padding:5px}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div{min-height:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img{max-width:min(50vw,75%);max-height:50vh;display:block;margin-left:auto;margin-right:auto}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row{margin-top:4px;display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:0;margin-bottom:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row>button{flex-grow:1;text-align:end;max-width:50%;min-width:min(100%,40px)}.toolbar-overflow-widget-overflow-list{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.toolbar-overflow-widget-overflow-list>.toolbar-toolContainer>.toolbar-button{height:var(--toolbar-button-height)}.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list{flex-direction:row}.toolbar-overflow-widget.horizontal>.toolbar-dropdown{max-width:100%;left:15px;right:15px;margin-left:0 !important;translate:none !important;padding:4px}.toolbar-zoomLevelEditor{display:flex;flex-direction:row;align-items:center}.toolbar-zoomLevelEditor .zoomDisplay{flex-grow:1}.toolbar-zoomLevelEditor button{min-width:48px}.selection-format-menu.disabled{opacity:.5}.toolbar-document-properties-widget button.about-button{width:100%;text-align:end}.toolbar-document-properties-widget>*{--align-items-to-x: 120px}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row{display:flex}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size{display:none}.toolbar-thicknessSliderContainer{display:flex;flex-direction:row}.toolbar-thicknessSliderContainer input{flex-grow:1}.toolbar-element .clr-field *{cursor:pointer}.toolbar-element .clr-field button{width:1.2em;height:1.2em;top:50%;left:0;border-radius:50%;margin-left:0;margin-right:0}.toolbar-element .clr-field input{opacity:0}.color-input-container{display:inline-flex;flex-direction:row}.color-input-container.picker-open .clr-field{pointer-events:none}:root .color-input-container>button.pipetteButton{width:30px;height:30px;padding:0;display:inline-flex}.color-input-container .pipetteButton>svg{width:100%}.color-input-container .pipetteButton .pickColorInstructions{display:none;font-size:1em;position:absolute;margin-left:30px;background-color:var(--background-color-1);border-radius:30px;padding:4px;opacity:0;transition:.2s ease opacity}@media(prefers-reduced-motion: reduce){.color-input-container .pipetteButton .pickColorInstructions{transition:none}}.color-input-container .pipetteButton.active{background-color:var(--selection-background-color);--icon-color: var(--selection-foreground-color)}.color-input-container .pipetteButton.active .pickColorInstructions{display:block;opacity:.8}.tool-dropdown-separator{--border-color: rgba(100, 100, 100, 0.2);--border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);border-top:1px solid var(--border-color);padding-left:2px;margin-top:10px;margin-bottom:10px}.toolbar-element .toolbar--file-input-container{display:flex}.toolbar-element .toolbar--file-input-container>input[type=file]{opacity:0;width:0;min-width:0 !important;max-width:0;height:0}.toolbar-element .toolbar--file-input-container>label{display:block;flex-grow:1;padding:0 !important;padding-bottom:5px;--active-border-color: rgba(100, 100, 100, 0.5);--active-border-color: color-mix( in srgb, var(--foreground-color-1), transparent )}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description{background-color:var(--background-color-3);color:var(--foreground-color-3);border:1px dashed var(--active-border-color);padding:10px;margin-top:10px;display:flex;flex-direction:column;align-items:center;text-align:center;--action-color: var(--primary-action-foreground-color);--icon-color: var(--action-color)}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span{white-space:pre-wrap}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span>b{color:var(--action-color);cursor:pointer}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>.icon{width:min(50vw,42px);height:min(50vw,42px);margin-bottom:8px;display:block}.toolbar-element .toolbar--file-input-container>label:active,.toolbar-element .toolbar--file-input-container>label:hover,.toolbar-element .toolbar--file-input-container>label.drag-target{--active-border-color: var(--foreground-color-1)}.toolbar-element .toolbar--file-input-container>label.drag-target>.toolbar--file-input-description{border-width:2px}.toolbar-grid-selector{position:relative}.toolbar-grid-selector>div{display:flex;flex-direction:row;max-width:350px;flex-wrap:wrap;--button-size: 48px}.toolbar-grid-selector .choice-button{display:flex;flex-direction:column-reverse;box-sizing:border-box;flex-shrink:1;margin:2px}.toolbar-grid-selector .choice-button.focus-visible{outline:2px solid var(--foreground-color-1)}.toolbar-grid-selector .choice-button input{opacity:0;height:0}.toolbar-grid-selector .choice-button label{display:flex;flex-direction:column;box-sizing:border-box;width:var(--button-size);height:var(--button-size);font-size:.7rem;align-items:center;justify-content:center;padding:4px;user-select:none;-webkit-user-select:none}.toolbar-grid-selector .choice-button .icon{flex-grow:1;flex-shrink:1;width:100%}.toolbar-grid-selector .choice-button.checked{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-root{background-color:var(--background-color-1);--icon-color: var(--foreground-color-1);--toolbar-button-height: min(20vh, 60px);flex-wrap:wrap;box-sizing:border-box;width:100%;display:flex;flex-direction:row;justify-content:center}.toolbar-element{z-index:1;font-family:system-ui,-apple-system,sans-serif}.toolbar-element details>summary{cursor:pointer}.toolbar-element>.toolbar-toolContainer>.toolbar-button,.toolbar-element>.toolbar-toolContainer>*>button,.toolbar-element>.toolbar-buttonGroup>button,.toolbar-element>.toolbar-button{white-space:pre;height:var(--toolbar-button-height)}.toolbar-dropdown .toolbar-button>.toolbar-icon{max-width:50px;width:100%}.toolbar-button.disabled{filter:opacity(0.5) sepia(0.2);cursor:unset}.toolbar-button,.toolbar-element button{cursor:pointer;text-align:center;border-radius:6px;border:none;box-shadow:0px 0px 2px var(--shadow-color);user-select:none;-webkit-user-select:none;transition:background-color .15s ease,box-shadow .25s ease,opacity .2s ease}.toolbar-button,.toolbar-buttonGroup>button,.toolbar-toolContainer>*>button,.toolbar-root>button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-left:3px;padding-right:3px;min-width:40px;max-width:105px;width:min-content;font-size:1em}.toolbar-button>label{cursor:inherit;user-select:none;-webkit-user-select:none}.toolbar-root>.toolbar-toolContainer>.toolbar-button>label.long-label{font-size:.75em}.toolbar-dropdown>.toolbar-toolContainer>button,.toolbar-dropdown>.toolbar-toolContainer>.toolbar-button{width:6em}.toolbar-button:not(.disabled):hover,.toolbar-root button:not(:disabled):hover{box-shadow:0px 2px 4px var(--shadow-color)}.toolbar-root button:disabled{cursor:inherit;filter:opacity(0.5)}.toolbar-root .toolbar-icon{flex-shrink:1;user-select:none;width:100%;min-width:20px;min-height:20px}.toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{height:15px;transition:transform .25s ease}.toolbar-toolContainer.dropdownVisible>.toolbar-button>.toolbar-showHideDropdownIcon{transform:rotate(180deg)}.toolbar-dropdown.hidden,.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-dropdown:not(.hiding){display:none}.toolbar-dropdown{position:absolute;padding:15px;padding-top:5px;display:flex;flex-wrap:wrap;flex-direction:column;max-height:80vh;max-width:fit-content;z-index:2;background-color:var(--background-color-1);box-shadow:0px 3px 3px var(--shadow-color)}@keyframes dropdown-transition-in{0%{opacity:0;transform:scale(1, 0)}100%{opacity:1;transform:scale(1, 1)}}@keyframes dropdown-transition-out{0%{opacity:1;transform:scale(1, 1)}100%{opacity:0;transform:scale(1, 0)}}.toolbar-dropdown{transform-origin:top left;--dropdown-show-animation: dropdown-transition-in;--dropdown-hide-animation: dropdown-transition-out}@media(prefers-reduced-motion: reduce){.toolbar-dropdown{--dropdown-show-animation: none;--dropdown-hide-animation: none}.toolbar-dropdown.hiding{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{transition:none}:root .toolbar-button,.toolbar-root button{transition:none}}.toolbar-buttonGroup{display:flex;flex-direction:row;justify-content:center}.toolbar-closeColorPickerOverlay{display:none;position:fixed;top:0;left:0;bottom:0;right:0;touch-action:none;background-color:var(--background-color-1);opacity:.3;z-index:2}.toolbar-spacedList>*{padding-bottom:5px;padding-top:5px}.toolbar-indentedList{padding-left:10px}@media print{.toolbar-element{display:none}}@keyframes toolbar--edgemenu-transition-in{from{transform:translate(0, 100%)}to{transform:translate(0, 0)}}@keyframes toolbar--edgemenu-transition-out{to{transform:translate(0, 100%)}}@keyframes toolbar--edgemenu-container-transition-in{from{overflow-y:hidden}to{overflow-y:hidden}}@keyframes toolbar--edgemenu-container-transition-out{from{overflow-y:hidden}to{overflow-y:hidden}}.toolbar-edge-toolbar{--toolbar-button-height: min(20vh, 48px);--toolbar-button-size: var(--toolbar-button-height);--label-hover-offset-size: calc(14px + var(--toolbar-button-height));box-sizing:border-box;flex-direction:row;justify-content:space-around;--button-label-hover-offset-y: var(--label-hover-offset-size);--button-label-hover-offset-x: 0}@media screen and (min-width: 540px){.toolbar-edge-toolbar{flex-wrap:nowrap}.toolbar-edge-toolbar>.toolbar-action-row{max-width:50vw;flex-grow:0;flex-shrink:0}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline{font-size:.9em}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button{width:var(--toolbar-button-size)}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button label{opacity:0;animation:.2s linear hide-initially}@keyframes hide-initially{from{opacity:0}to{opacity:0}}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}}@media screen and (max-width: 700px)and (hover: hover){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:hover>label{opacity:.8;animation:1s ease show-label}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:active>label{opacity:.8;animation:.5s ease show-label}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s ease opacity,.2s ease margin-top}}@media screen and (max-width: 700px)and (prefers-reduced-motion: reduce){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{transition:none}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon.toolbar-icon{margin-left:0;margin-right:0}}.toolbar-edge-toolbar>div.toolbar-element{flex-direction:row;display:flex;flex-grow:1;justify-content:center;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);--extra-left-right-padding: 0px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar{width:3px;height:3px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar-thumb{background-color:var(--shadow-color)}.toolbar-edge-toolbar>div.toolbar-element.toolbar-tool-row{overflow-x:auto;overflow-y:hidden;flex-grow:100}.toolbar-edge-toolbar>div.toolbar-element.toolbar-action-row{z-index:2;background-color:var(--background-color-3);color:var(--foreground-color-3);--icon-color: var(--foreground-color-3)}.toolbar-edge-toolbar>div.toolbar-element.has-scroll{justify-content:start;position:relative;--button-label-hover-offset-y: 0;--button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size))}.toolbar-edge-toolbar>div.toolbar-element.has-scroll>:nth-child(1){--button-label-hover-offset-x: var(--label-hover-offset-size)}.toolbar-edge-toolbar .toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-edge-toolbar .toolbar-button{box-sizing:border-box;background-color:rgba(0,0,0,0)}.toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon{flex-shrink:.01;height:12px}.toolbar-edge-toolbar .toolbar-toolContainer{order:1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline{flex-grow:1;display:flex;--button-flex-direction: row}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left{justify-content:end;--button-flex-direction: row-reverse;order:100}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left>.toolbar-button>.toolbar-icon{margin-left:10px;margin-right:0}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right{order:-1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button{width:auto;flex-direction:var(--button-flex-direction)}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon{height:100%;margin-right:10px;margin-left:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button{width:calc(var(--toolbar-button-size) + var(--extra-left-right-padding));height:var(--toolbar-button-size)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover>label{opacity:.8;animation:1s ease show-label}}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active>label{opacity:.8;animation:.5s ease show-label}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{transition:none}}.toolbar-edge-toolbar>div>.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:block;visibility:hidden}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button{margin:0;border-radius:0;padding:8px;box-shadow:none}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button.has-dropdown{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:0px}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container{height:0;background-color:rgba(0,0,0,0);opacity:.9}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container .toolbar-edgemenu{position:absolute}.toolbar-edgemenu-container{background-color:var(--background-color-transparent);transition:.15s ease-in-out height,.15s ease-in-out background-color,.2s ease-in-out opacity;position:absolute;width:var(--editor-current-width-px);height:var(--editor-current-height-px);box-sizing:border-box;display:flex;flex-direction:column-reverse;align-items:center;z-index:2}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container{transition:none}}.toolbar-edgemenu-container.dropdown-below-edge{overflow-y:hidden}.toolbar-edgemenu-container button{font-size:1.2em;box-shadow:none;border:none;padding:10px;color:var(--foreground-color-1);transition:.2s ease box-shadow;font-weight:bold;color:var(--primary-action-foreground-color)}.toolbar-edgemenu-container button:hover{box-shadow:0 1px 2px var(--shadow-color)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button{--button-label-hover-offset-y: var(--button-size)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover>label>.button-label-text{opacity:.8;animation:1s ease show-label}}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active>label>.button-label-text{opacity:.8;animation:.5s ease show-label}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:has(:focus-visible)>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{transition:none}}.toolbar-edgemenu-container .toolbar-edgemenu{--toolbar-button-height: 48px;touch-action:none;user-select:none;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);box-shadow:0px 0px 1px var(--shadow-color);padding-left:10px;padding-right:10px;width:min(400px,100vw);box-sizing:border-box;border-top-left-radius:30px;border-top-right-radius:30px;transition:transform .1s ease,padding-bottom .1s ease}.toolbar-edgemenu-container .toolbar-edgemenu input,.toolbar-edgemenu-container .toolbar-edgemenu textarea{user-select:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:inline-block}.toolbar-edgemenu-container .toolbar-edgemenu button{background-color:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem{height:40px;display:block;cursor:ns-resize;position:relative;margin-top:-15px;margin-bottom:10px;width:100%;border:none;box-shadow:none;background:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem::before{content:"";background-color:var(--icon-color);opacity:.2;display:block;position:relative;top:10px;height:5px;border-radius:5px;width:min(80%,40px);margin-left:auto;margin-right:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:block}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button{flex-direction:row;max-width:unset;width:100%;box-sizing:border-box;justify-content:flex-start;box-shadow:none;padding:2px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>.toolbar-icon{width:25px;height:25px;padding:13px;margin-right:15px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button label,.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>label.long-label{font-size:1em}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-nonbutton-controls-main-list{padding-left:10px;padding-right:10px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList{box-sizing:border-box;--align-items-to-x: 105px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div{display:flex;align-items:center;margin-top:5px;min-height:35px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>label{padding-right:35px;min-width:var(--align-items-to-x);flex-shrink:1;box-sizing:border-box}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input[type=checkbox]{width:20px;height:20px;margin-left:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input:not([type=checkbox]){flex-grow:1;min-width:48px;flex-shrink:1}.toolbar-dropdown-toolbar button,.toolbar-dropdown-toolbar .toolbar-button{background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2)}.toolbar-dropdown-toolbar,.toolbar-dropdown-toolbar .toolbar-dropdown{background-color:var(--background-color-3);color:var(--foreground-color-3)}.toolbar-dropdown-toolbar .toolbar-spacedList>div>label{padding-right:10px;min-width:50px}.toolbar-dropdown-toolbar .clr-field button{width:100%;height:100%;top:50%;left:0;border-radius:5px}.toolbar-dropdown-toolbar .toolbar-grid-selector>div{--button-size: 57px}.toolbar-dropdown-toolbar .toolbar-dropdown>div>.toolbar-toolContainer{display:inline-block}.ScrollbarTool-overlay{width:0;height:0;overflow:visible;opacity:.2;pointer-events:none;--fade-out-animation: 1s ease 0s fade-out;--scrollbar-size: 3px}@media(prefers-reduced-motion: reduce){.ScrollbarTool-overlay{--fade-out-animation: none !important}}@keyframes fade-out{from{opacity:.2}to{opacity:0}}.ScrollbarTool-overlay:not(.just-updated){animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay .vertical-scrollbar,.ScrollbarTool-overlay .horizontal-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size);min-width:var(--scrollbar-size);min-height:var(--scrollbar-size);background-color:var(--foreground-color-1);border-radius:var(--scrollbar-size);position:absolute}.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll,.ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll{animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar{margin-left:calc(var(--editor-current-display-width-px) - var(--scrollbar-size))}.ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar{margin-top:calc(var(--editor-current-display-height-px) - var(--scrollbar-size))}.selection-tool-selection-background{background-color:var(--selection-background-color);opacity:.5;overflow:visible;position:absolute}.selection-tool-handle{border:1px solid var(--foreground-color-1);background:var(--background-color-1);position:absolute;box-sizing:border-box;padding:3px}.selection-tool-handle .icon{width:100%;height:100%}.selection-tool-handle.selection-tool-circle{border-radius:100%}.selection-tool-handle.selection-tool-rotate{cursor:grab}.selection-tool-handle.selection-tool-resize-x{cursor:ew-resize}.selection-tool-handle.selection-tool-resize-y{cursor:ns-resize}.selection-tool-handle.selection-tool-resize-xy{cursor:nw-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x{cursor:ns-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-y{cursor:ew-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy{cursor:sw-resize}.overlay.handleOverlay{height:0;overflow:visible}@keyframes selection-duplicated-animation{0%{scale:1 1}50%{scale:1.02 1.02}100%{scale:1 1}}@media(prefers-reduced-motion: reduce){@keyframes selection-duplicated-animation{}}.find-tool-overlay{order:-1;position:absolute}.js-draw-sound-ui-toggle{width:0px;height:0px;overflow:hidden}.js-draw-sound-ui-toggle button{margin-top:1px}.js-draw-sound-ui-toggle:focus-within,.js-draw-sound-ui-toggle.sound-ui-tool-enabled{overflow:visible;z-index:5}.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled{opacity:.5}.about-dialog-container dialog{display:flex;flex-direction:column}.about-dialog-container dialog .close-button{display:block;margin-left:auto;margin-right:auto}.about-dialog-container dialog .about-entry-container{flex-grow:1;flex-shrink:1;overflow-y:auto;margin-left:20px;margin-right:20px;padding-bottom:20px;white-space:pre-wrap;font-family:monospace}.about-dialog-container dialog .about-entry-container>h2,.about-dialog-container dialog .about-entry-container>details>summary{cursor:pointer;margin-top:15px;font-size:1.2em;font-weight:bold}.about-dialog-container dialog .about-entry-container>h2 a,.about-dialog-container dialog .about-entry-container>details>summary a{color:var(--foreground-color-1);text-decoration:underline}.dialog-container.dialog-container{background-color:var(--background-color-transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);position:absolute;z-index:3;width:var(--editor-current-width-px);height:var(--editor-current-height-px);display:flex;flex-direction:column-reverse;align-items:center;justify-content:center}.dialog-container.dialog-container dialog{background-color:var(--background-color-1);color:var(--foreground-color-1);border:none;outline:none;box-shadow:0 0 2px var(--shadow-color);border-radius:8px;max-height:90vh;width:min(100%,500px);box-sizing:border-box}#clr-picker{--clr-slider-size: 30px}#clr-picker #clr-color-area,#clr-picker .clr_hue{touch-action:none}#clr-picker .clr-alpha{margin-top:15px;margin-bottom:15px}#clr-picker.clr-picker input[type=range]::-moz-range-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-runnable-track{height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-moz-range-track{height:var(--clr-slider-size)}.imageEditorContainer{--background-color-1: white;--foreground-color-1: black;--background-color-2: #f5f5f5;--foreground-color-2: #2c303a;--background-color-3: #e5e5e5;--foreground-color-3: #1c202a;--selection-background-color: #cbdaf1;--selection-foreground-color: #2c303a;--background-color-transparent: rgba(105, 100, 100, 0.5);--shadow-color: rgba(0, 0, 0, 0.5);--primary-action-foreground-color: #15b}@media(prefers-color-scheme: dark){.imageEditorContainer{--background-color-1: #151515;--foreground-color-1: white;--background-color-2: #222;--foreground-color-2: #efefef;--background-color-3: #272627;--foreground-color-3: #eee;--selection-background-color: #607;--selection-foreground-color: white;--shadow-color: rgba(250, 250, 250, 0.5);--background-color-transparent: rgba(50, 50, 50, 0.5);--primary-action-foreground-color: #7ae}}.imageEditorContainer{--icon-color: var(--foreground-color-1)}.imageEditorContainer{color:var(--foreground-color-1);font-family:system-ui,-apple-system,sans-serif;background-color:var(--background-color-1);width:100%;height:400px;min-height:220px;min-width:100px;box-sizing:border-box;display:flex;flex-direction:column-reverse}.imageEditorContainer input{accent-color:var(--primary-action-foreground-color)}.imageEditorContainer .imageEditorRenderArea{display:grid;grid-template-columns:1fr;flex-grow:2;flex-shrink:1;min-height:100px;min-width:0;width:100%;height:100%}.imageEditorContainer .imageEditorRenderArea canvas{grid-row:1/1;grid-column:1/1;touch-action:none;box-sizing:border-box;width:100%;height:100%;min-width:0;max-width:inherit;min-height:0px;max-height:inherit}.imageEditorContainer .loadingMessage{position:fixed;text-align:center;font-size:2em;bottom:0;left:0;right:0}.imageEditorContainer .accessibilityAnnouncement{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.imageEditorContainer .textRendererOutputContainer{width:1px;height:1px;overflow:hidden}.imageEditorContainer .textRendererOutputContainer:focus-within{overflow:visible;z-index:5}@media print{.imageEditorContainer .loadingMessage{display:none}.imageEditorContainer .imageEditorRenderArea canvas{width:100%;height:initial}}',""]);const l=i},609:o=>{o.exports=function(o){var e=[];return e.toString=function(){return this.map((function(e){var r="",n=void 0!==e[5];return e[4]&&(r+="@supports (".concat(e[4],") {")),e[2]&&(r+="@media ".concat(e[2]," {")),n&&(r+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),r+=o(e),n&&(r+="}"),e[2]&&(r+="}"),e[4]&&(r+="}"),r})).join("")},e.i=function(o,r,n,t,a){"string"==typeof o&&(o=[[null,o,void 0]]);var i={};if(n)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(i[d]=!0)}for(var c=0;c<o.length;c++){var b=[].concat(o[c]);n&&i[b[0]]||(void 0!==a&&(void 0===b[5]||(b[1]="@layer".concat(b[5].length>0?" ".concat(b[5]):""," {").concat(b[1],"}")),b[5]=a),r&&(b[2]?(b[1]="@media ".concat(b[2]," {").concat(b[1],"}"),b[2]=r):b[2]=r),t&&(b[4]?(b[1]="@supports (".concat(b[4],") {").concat(b[1],"}"),b[4]=t):b[4]="".concat(t)),e.push(b))}},e}},601:o=>{o.exports=function(o){return o[1]}},62:o=>{var e=[];function r(o){for(var r=-1,n=0;n<e.length;n++)if(e[n].identifier===o){r=n;break}return r}function n(o,n){for(var a={},i=[],l=0;l<o.length;l++){var d=o[l],c=n.base?d[0]+n.base:d[0],b=a[c]||0,p="".concat(c," ").concat(b);a[c]=b+1;var s=r(p),u={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==s)e[s].references++,e[s].updater(u);else{var g=t(u,n);n.byIndex=l,e.splice(l,0,{identifier:p,updater:g,references:1})}i.push(p)}return i}function t(o,e){var r=e.domAPI(e);r.update(o);return function(e){if(e){if(e.css===o.css&&e.media===o.media&&e.sourceMap===o.sourceMap&&e.supports===o.supports&&e.layer===o.layer)return;r.update(o=e)}else r.remove()}}o.exports=function(o,t){var a=n(o=o||[],t=t||{});return function(o){o=o||[];for(var i=0;i<a.length;i++){var l=r(a[i]);e[l].references--}for(var d=n(o,t),c=0;c<a.length;c++){var b=r(a[c]);0===e[b].references&&(e[b].updater(),e.splice(b,1))}a=d}}},793:o=>{var e={};o.exports=function(o,r){var n=function(o){if(void 0===e[o]){var r=document.querySelector(o);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(o){r=null}e[o]=r}return e[o]}(o);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},173:o=>{o.exports=function(o){var e=document.createElement("style");return o.setAttributes(e,o.attributes),o.insert(e,o.options),e}},892:(o,e,r)=>{o.exports=function(o){var e=r.nc;e&&o.setAttribute("nonce",e)}},36:o=>{o.exports=function(o){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=o.insertStyleElement(o);return{update:function(r){!function(o,e,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var t=void 0!==r.layer;t&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,t&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var a=r.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(n,o,e.options)}(e,o,r)},remove:function(){!function(o){if(null===o.parentNode)return!1;o.parentNode.removeChild(o)}(e)}}}},464:o=>{o.exports=function(o,e){if(e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}}},e={};function r(n){var t=e[n];if(void 0!==t)return t.exports;var a=e[n]={id:n,exports:{}};return o[n](a,a.exports,r),a.exports}r.n=o=>{var e=o&&o.__esModule?()=>o.default:()=>o;return r.d(e,{a:e}),e},r.d=(o,e)=>{for(var n in e)r.o(e,n)&&!r.o(o,n)&&Object.defineProperty(o,n,{enumerable:!0,get:e[n]})},r.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},r.nc=void 0;var n={};(()=>{r.r(n);var o=r(62),e=r.n(o),t=r(36),a=r.n(t),i=r(793),l=r.n(i),d=r(892),c=r.n(d),b=r(173),p=r.n(b),s=r(464),u=r.n(s),g=r(245),h={};h.styleTagTransform=u(),h.setAttributes=c(),h.insert=l().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=p();e()(g.Z,h);g.Z&&g.Z.locals&&g.Z.locals;var f=r(489),x={};x.styleTagTransform=u(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=a(),x.insertStyleElement=p();e()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=n})();
1
+ (()=>{"use strict";var o={489:(o,e,r)=>{r.d(e,{Z:()=>l});var n=r(601),t=r.n(n),a=r(609),i=r.n(a)()(t());i.push([o.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: 16px;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-thumb {\n width: 16px;\n height: 16px;\n -webkit-appearance: none;\n}\n\n.clr-picker input[type="range"]::-moz-range-track {\n width: 100%;\n height: 16px;\n border: 0;\n}\n\n.clr-picker input[type="range"]::-moz-range-thumb {\n width: 16px;\n height: 16px;\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% + 32px);\n height: 16px;\n left: -16px;\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=i},245:(o,e,r)=>{r.d(e,{Z:()=>l});var n=r(601),t=r.n(n),a=r(609),i=r.n(a)()(t());i.push([o.id,':root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div>div{padding:5px}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div{min-height:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img{max-width:min(50vw,75%);max-height:50vh;display:block;margin-left:auto;margin-right:auto}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row{margin-top:4px;display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:0;margin-bottom:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row>button{flex-grow:1;text-align:end;max-width:50%;min-width:min(100%,40px)}.toolbar-overflow-widget-overflow-list{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.toolbar-overflow-widget-overflow-list>.toolbar-toolContainer>.toolbar-button{height:var(--toolbar-button-height)}.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list{flex-direction:row}.toolbar-overflow-widget.horizontal>.toolbar-dropdown{max-width:100%;left:15px;right:15px;margin-left:0 !important;translate:none !important;padding:4px}.toolbar-zoomLevelEditor{display:flex;flex-direction:row;align-items:center}.toolbar-zoomLevelEditor .zoomDisplay{flex-grow:1}.toolbar-zoomLevelEditor button{min-width:48px}.selection-format-menu.disabled{opacity:.5}.toolbar-document-properties-widget button.about-button{width:100%;text-align:end}.toolbar-document-properties-widget>*{--align-items-to-x: 120px}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row{display:flex}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size{display:none}.toolbar-thicknessSliderContainer{display:flex;flex-direction:row}.toolbar-thicknessSliderContainer input{flex-grow:1}.toolbar-element .clr-field *{cursor:pointer}.toolbar-element .clr-field button{width:1.2em;height:1.2em;top:50%;left:0;border-radius:50%;margin-left:0;margin-right:0}.toolbar-element .clr-field input{opacity:0}.color-input-container{display:inline-flex;flex-direction:row}.color-input-container.picker-open .clr-field{pointer-events:none}:root .color-input-container>button.pipetteButton{width:30px;height:30px;padding:0;display:inline-flex}.color-input-container .pipetteButton>svg{width:100%}.color-input-container .pipetteButton .pickColorInstructions{display:none;font-size:1em;position:absolute;margin-left:30px;background-color:var(--background-color-1);border-radius:30px;padding:4px;opacity:0;transition:.2s ease opacity}@media(prefers-reduced-motion: reduce){.color-input-container .pipetteButton .pickColorInstructions{transition:none}}.color-input-container .pipetteButton.active{background-color:var(--selection-background-color);--icon-color: var(--selection-foreground-color)}.color-input-container .pipetteButton.active .pickColorInstructions{display:block;opacity:.8}.tool-dropdown-separator{--border-color: rgba(100, 100, 100, 0.2);--border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);border-top:1px solid var(--border-color);padding-left:2px;margin-top:10px;margin-bottom:10px}.toolbar-element .toolbar--file-input-container{display:flex}.toolbar-element .toolbar--file-input-container>input[type=file]{opacity:0;width:0;min-width:0 !important;max-width:0;height:0}.toolbar-element .toolbar--file-input-container>label{display:block;flex-grow:1;padding:0 !important;padding-bottom:5px;--active-border-color: rgba(100, 100, 100, 0.5);--active-border-color: color-mix( in srgb, var(--foreground-color-1), transparent )}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description{background-color:var(--background-color-3);color:var(--foreground-color-3);border:1px dashed var(--active-border-color);padding:10px;margin-top:10px;display:flex;flex-direction:column;align-items:center;text-align:center;--action-color: var(--primary-action-foreground-color);--icon-color: var(--action-color)}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span{white-space:pre-wrap}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span>b{color:var(--action-color);cursor:pointer}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>.icon{width:min(50vw,42px);height:min(50vw,42px);margin-bottom:8px;display:block}.toolbar-element .toolbar--file-input-container>label:active,.toolbar-element .toolbar--file-input-container>label:hover,.toolbar-element .toolbar--file-input-container>label.drag-target{--active-border-color: var(--foreground-color-1)}.toolbar-element .toolbar--file-input-container>label.drag-target>.toolbar--file-input-description{border-width:2px}.toolbar-grid-selector{position:relative}.toolbar-grid-selector>div{display:flex;flex-direction:row;max-width:350px;flex-wrap:wrap;--button-size: 48px}.toolbar-grid-selector .choice-button{display:flex;flex-direction:column-reverse;box-sizing:border-box;flex-shrink:1;margin:2px}.toolbar-grid-selector .choice-button.focus-visible{outline:2px solid var(--foreground-color-1)}.toolbar-grid-selector .choice-button input{opacity:0;height:0}.toolbar-grid-selector .choice-button label{display:flex;flex-direction:column;box-sizing:border-box;width:var(--button-size);height:var(--button-size);font-size:.7rem;align-items:center;justify-content:center;padding:4px;user-select:none;-webkit-user-select:none}.toolbar-grid-selector .choice-button .icon{flex-grow:1;flex-shrink:1;width:100%}.toolbar-grid-selector .choice-button.checked{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-root{background-color:var(--background-color-1);--icon-color: var(--foreground-color-1);--toolbar-button-height: min(20vh, 60px);flex-wrap:wrap;box-sizing:border-box;width:100%;display:flex;flex-direction:row;justify-content:center}.toolbar-element{z-index:1;font-family:system-ui,-apple-system,sans-serif}.toolbar-element details>summary{cursor:pointer}.toolbar-element>.toolbar-toolContainer>.toolbar-button,.toolbar-element>.toolbar-toolContainer>*>button,.toolbar-element>.toolbar-buttonGroup>button,.toolbar-element>.toolbar-button{white-space:pre;height:var(--toolbar-button-height)}.toolbar-dropdown .toolbar-button>.toolbar-icon{max-width:50px;width:100%}.toolbar-button.disabled{filter:opacity(0.5) sepia(0.2);cursor:unset}.toolbar-button,.toolbar-element button{cursor:pointer;text-align:center;border-radius:6px;border:none;box-shadow:0px 0px 2px var(--shadow-color);user-select:none;-webkit-user-select:none;transition:background-color .15s ease,box-shadow .25s ease,opacity .2s ease}.toolbar-button,.toolbar-buttonGroup>button,.toolbar-toolContainer>*>button,.toolbar-root>button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-left:3px;padding-right:3px;min-width:40px;max-width:105px;width:min-content;font-size:1em}.toolbar-button>label{cursor:inherit;user-select:none;-webkit-user-select:none}.toolbar-root>.toolbar-toolContainer>.toolbar-button>label.long-label{font-size:.75em}.toolbar-dropdown>.toolbar-toolContainer>button,.toolbar-dropdown>.toolbar-toolContainer>.toolbar-button{width:6em}.toolbar-button:not(.disabled):hover,.toolbar-root button:not(:disabled):hover{box-shadow:0px 2px 4px var(--shadow-color)}.toolbar-root button:disabled{cursor:inherit;filter:opacity(0.5)}.toolbar-root .toolbar-icon{flex-shrink:1;user-select:none;width:100%;min-width:20px;min-height:20px}.toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{height:15px;transition:transform .25s ease}.toolbar-toolContainer.dropdownVisible>.toolbar-button>.toolbar-showHideDropdownIcon{transform:rotate(180deg)}.toolbar-dropdown.hidden,.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-dropdown:not(.hiding){display:none}.toolbar-dropdown{position:absolute;padding:15px;padding-top:5px;display:flex;flex-wrap:wrap;flex-direction:column;max-height:80vh;max-width:fit-content;z-index:2;background-color:var(--background-color-1);box-shadow:0px 3px 3px var(--shadow-color)}@keyframes dropdown-transition-in{0%{opacity:0;transform:scale(1, 0)}100%{opacity:1;transform:scale(1, 1)}}@keyframes dropdown-transition-out{0%{opacity:1;transform:scale(1, 1)}100%{opacity:0;transform:scale(1, 0)}}.toolbar-dropdown{transform-origin:top left;--dropdown-show-animation: dropdown-transition-in;--dropdown-hide-animation: dropdown-transition-out}@media(prefers-reduced-motion: reduce){.toolbar-dropdown{--dropdown-show-animation: none;--dropdown-hide-animation: none}.toolbar-dropdown.hiding{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{transition:none}:root .toolbar-button,.toolbar-root button{transition:none}}.toolbar-buttonGroup{display:flex;flex-direction:row;justify-content:center}.toolbar-closeColorPickerOverlay{display:none;position:fixed;top:0;left:0;bottom:0;right:0;touch-action:none;background-color:var(--background-color-1);opacity:.3;z-index:2}.toolbar-spacedList>*{padding-bottom:5px;padding-top:5px}.toolbar-indentedList{padding-left:10px}@media print{.toolbar-element{display:none}}@keyframes toolbar--edgemenu-transition-in{from{transform:translate(0, 100%)}to{transform:translate(0, 0)}}@keyframes toolbar--edgemenu-transition-out{to{transform:translate(0, 100%)}}@keyframes toolbar--edgemenu-container-transition-in{from{overflow-y:hidden}to{overflow-y:hidden}}@keyframes toolbar--edgemenu-container-transition-out{from{overflow-y:hidden}to{overflow-y:hidden}}.toolbar-edge-toolbar{--toolbar-button-height: min(20vh, 48px);--toolbar-button-size: var(--toolbar-button-height);--label-hover-offset-size: calc(14px + var(--toolbar-button-height));box-sizing:border-box;flex-direction:row;justify-content:space-around;--button-label-hover-offset-y: var(--label-hover-offset-size);--button-label-hover-offset-x: 0}@media screen and (min-width: 540px){.toolbar-edge-toolbar{flex-wrap:nowrap}.toolbar-edge-toolbar>.toolbar-action-row{max-width:50vw;flex-grow:0;flex-shrink:0}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline{font-size:.9em}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button{width:var(--toolbar-button-size)}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button label{opacity:0;animation:.2s linear hide-initially}@keyframes hide-initially{from{opacity:0}to{opacity:0}}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}}@media screen and (max-width: 700px)and (hover: hover){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:hover:not(:focus-visible)>label{opacity:.8;animation:1s ease show-label}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:active>label{opacity:.8;animation:1s ease show-label}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s ease opacity,.2s ease margin-top}}@media screen and (max-width: 700px)and (prefers-reduced-motion: reduce){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{transition:none}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon.toolbar-icon{margin-left:0;margin-right:0}}.toolbar-edge-toolbar>div.toolbar-element{flex-direction:row;display:flex;flex-grow:1;justify-content:center;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);--extra-left-right-padding: 0px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar{width:3px;height:3px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar-thumb{background-color:var(--shadow-color)}.toolbar-edge-toolbar>div.toolbar-element.toolbar-tool-row{overflow-x:auto;overflow-y:hidden;flex-grow:100}.toolbar-edge-toolbar>div.toolbar-element.toolbar-action-row{z-index:2;background-color:var(--background-color-3);color:var(--foreground-color-3);--icon-color: var(--foreground-color-3)}.toolbar-edge-toolbar>div.toolbar-element.has-scroll{justify-content:start;position:relative;--button-label-hover-offset-y: 0;--button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size))}.toolbar-edge-toolbar>div.toolbar-element.has-scroll>:nth-child(1){--button-label-hover-offset-x: var(--label-hover-offset-size)}.toolbar-edge-toolbar .toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-edge-toolbar .toolbar-button{box-sizing:border-box;background-color:rgba(0,0,0,0)}.toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon{flex-shrink:.01;height:12px}.toolbar-edge-toolbar .toolbar-toolContainer{order:1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline{flex-grow:1;display:flex;--button-flex-direction: row}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left{justify-content:end;--button-flex-direction: row-reverse;order:100}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left>.toolbar-button>.toolbar-icon{margin-left:7px;margin-right:0}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right{order:-1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button{width:auto;flex-direction:var(--button-flex-direction)}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon{height:100%;margin-right:7px;margin-left:0;width:22px}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button{width:calc(var(--toolbar-button-size) + var(--extra-left-right-padding));height:var(--toolbar-button-size)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover:not(:focus-visible)>label{opacity:.8;animation:1s ease show-label}}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active>label{opacity:.8;animation:1s ease show-label}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{transition:none}}.toolbar-edge-toolbar>div>.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:block;visibility:hidden}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button{margin:0;border-radius:0;padding:8px;box-shadow:none}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button.has-dropdown{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:0px}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container{height:0;background-color:rgba(0,0,0,0);opacity:.9}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container .toolbar-edgemenu{position:absolute}.toolbar-edgemenu-container{background-color:var(--background-color-transparent);transition:.15s ease-in-out height,.15s ease-in-out background-color,.2s ease-in-out opacity;position:absolute;width:var(--editor-current-width-px);height:var(--editor-current-height-px);box-sizing:border-box;display:flex;flex-direction:column-reverse;align-items:center;z-index:2}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container{transition:none}}.toolbar-edgemenu-container.dropdown-below-edge{overflow-y:hidden}.toolbar-edgemenu-container button{font-size:1.2em;box-shadow:none;border:none;padding:10px;color:var(--foreground-color-1);transition:.2s ease box-shadow;font-weight:bold;color:var(--primary-action-foreground-color)}.toolbar-edgemenu-container button:hover{box-shadow:0 1px 2px var(--shadow-color)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button{--button-label-hover-offset-y: var(--button-size)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover:not(:focus-visible)>label>.button-label-text{opacity:.8;animation:1s ease show-label}}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active>label>.button-label-text{opacity:.8;animation:1s ease show-label}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:has(:focus-visible)>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{transition:none}}.toolbar-edgemenu-container .toolbar-edgemenu{--toolbar-button-height: 48px;touch-action:none;user-select:none;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);box-shadow:0px 0px 1px var(--shadow-color);padding-left:10px;padding-right:10px;width:min(400px,100vw);box-sizing:border-box;border-top-left-radius:30px;border-top-right-radius:30px;transition:transform .1s ease,padding-bottom .1s ease}.toolbar-edgemenu-container .toolbar-edgemenu input,.toolbar-edgemenu-container .toolbar-edgemenu textarea{user-select:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:inline-block}.toolbar-edgemenu-container .toolbar-edgemenu button{background-color:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem{height:40px;display:block;cursor:ns-resize;position:relative;margin-top:-15px;margin-bottom:10px;width:100%;border:none;box-shadow:none;background:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem::before{content:"";background-color:var(--icon-color);opacity:.2;display:block;position:relative;top:10px;height:5px;border-radius:5px;width:min(80%,40px);margin-left:auto;margin-right:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:block}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button{flex-direction:row;max-width:unset;width:100%;box-sizing:border-box;justify-content:flex-start;box-shadow:none;padding:2px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>.toolbar-icon{width:25px;height:25px;padding:13px;margin-right:15px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button label,.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>label.long-label{font-size:1em}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-nonbutton-controls-main-list{padding-left:10px;padding-right:10px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList{box-sizing:border-box;--align-items-to-x: 105px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div{display:flex;align-items:center;margin-top:5px;min-height:35px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>label{padding-right:35px;min-width:var(--align-items-to-x);flex-shrink:1;box-sizing:border-box}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input[type=checkbox]{width:20px;height:20px;margin-left:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input:not([type=checkbox]){flex-grow:1;min-width:48px;flex-shrink:1}.toolbar-dropdown-toolbar button,.toolbar-dropdown-toolbar .toolbar-button{background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2)}.toolbar-dropdown-toolbar,.toolbar-dropdown-toolbar .toolbar-dropdown{background-color:var(--background-color-3);color:var(--foreground-color-3)}.toolbar-dropdown-toolbar .toolbar-spacedList>div>label{padding-right:10px;min-width:50px}.toolbar-dropdown-toolbar .clr-field button{width:100%;height:100%;top:50%;left:0;border-radius:5px}.toolbar-dropdown-toolbar .toolbar-grid-selector>div{--button-size: 57px}.toolbar-dropdown-toolbar .toolbar-dropdown>div>.toolbar-toolContainer{display:inline-block}.ScrollbarTool-overlay{width:0;height:0;overflow:visible;opacity:.2;pointer-events:none;--fade-out-animation: 1s ease 0s fade-out;--scrollbar-size: 3px}@media(prefers-reduced-motion: reduce){.ScrollbarTool-overlay{--fade-out-animation: none !important}}@keyframes fade-out{from{opacity:.2}to{opacity:0}}.ScrollbarTool-overlay:not(.just-updated){animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay .vertical-scrollbar,.ScrollbarTool-overlay .horizontal-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size);min-width:var(--scrollbar-size);min-height:var(--scrollbar-size);background-color:var(--foreground-color-1);border-radius:var(--scrollbar-size);position:absolute}.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll,.ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll{animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar{margin-left:calc(var(--editor-current-display-width-px) - var(--scrollbar-size))}.ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar{margin-top:calc(var(--editor-current-display-height-px) - var(--scrollbar-size))}.selection-tool-selection-background{background-color:var(--selection-background-color);opacity:.5;overflow:visible;position:absolute}.selection-tool-handle{border:1px solid var(--foreground-color-1);background:var(--background-color-1);position:absolute;box-sizing:border-box;padding:3px}.selection-tool-handle .icon{width:100%;height:100%}.selection-tool-handle.selection-tool-circle{border-radius:100%}.selection-tool-handle.selection-tool-rotate{cursor:grab}.selection-tool-handle.selection-tool-resize-x{cursor:ew-resize}.selection-tool-handle.selection-tool-resize-y{cursor:ns-resize}.selection-tool-handle.selection-tool-resize-xy{cursor:nwse-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x{cursor:ns-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-y{cursor:ew-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy{cursor:nesw-resize}.overlay.handleOverlay{height:0;overflow:visible}@keyframes selection-duplicated-animation{0%{scale:1 1}50%{scale:1.02 1.02}100%{scale:1 1}}@media(prefers-reduced-motion: reduce){@keyframes selection-duplicated-animation{}}.find-tool-overlay{order:-1;position:absolute}.js-draw-sound-ui-toggle{width:0px;height:0px;overflow:hidden}.js-draw-sound-ui-toggle button{margin-top:1px}.js-draw-sound-ui-toggle:focus-within,.js-draw-sound-ui-toggle.sound-ui-tool-enabled{overflow:visible;z-index:5}.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled{opacity:.5}.about-dialog-container dialog{display:flex;flex-direction:column}.about-dialog-container dialog .close-button{display:block;margin-left:auto;margin-right:auto}.about-dialog-container dialog .about-entry-container{flex-grow:1;flex-shrink:1;overflow-y:auto;margin-left:20px;margin-right:20px;padding-bottom:20px;white-space:pre-wrap;font-family:monospace}.about-dialog-container dialog .about-entry-container>h2,.about-dialog-container dialog .about-entry-container>details>summary{cursor:pointer;margin-top:15px;font-size:1.2em;font-weight:bold}.about-dialog-container dialog .about-entry-container>h2 a,.about-dialog-container dialog .about-entry-container>details>summary a{color:var(--foreground-color-1);text-decoration:underline}.dialog-container.dialog-container{background-color:var(--background-color-transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);position:absolute;z-index:3;width:var(--editor-current-width-px);height:var(--editor-current-height-px);display:flex;flex-direction:column-reverse;align-items:center;justify-content:center}.dialog-container.dialog-container dialog{background-color:var(--background-color-1);color:var(--foreground-color-1);border:none;outline:none;box-shadow:0 0 2px var(--shadow-color);border-radius:8px;max-height:90vh;width:min(100%,500px);box-sizing:border-box}#clr-picker{--clr-slider-size: 30px}#clr-picker #clr-color-area,#clr-picker .clr_hue{touch-action:none}#clr-picker .clr-alpha{margin-top:15px;margin-bottom:15px}#clr-picker.clr-picker input[type=range]::-moz-range-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-runnable-track{height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-moz-range-track{height:var(--clr-slider-size)}.imageEditorContainer{--background-color-1: white;--foreground-color-1: black;--background-color-2: #f5f5f5;--foreground-color-2: #2c303a;--background-color-3: #e5e5e5;--foreground-color-3: #1c202a;--selection-background-color: #cbdaf1;--selection-foreground-color: #2c303a;--background-color-transparent: rgba(105, 100, 100, 0.5);--shadow-color: rgba(0, 0, 0, 0.5);--primary-action-foreground-color: #15b}@media(prefers-color-scheme: dark){.imageEditorContainer{--background-color-1: #151515;--foreground-color-1: white;--background-color-2: #222;--foreground-color-2: #efefef;--background-color-3: #272627;--foreground-color-3: #eee;--selection-background-color: #607;--selection-foreground-color: white;--shadow-color: rgba(250, 250, 250, 0.5);--background-color-transparent: rgba(50, 50, 50, 0.5);--primary-action-foreground-color: #7ae}}.imageEditorContainer{--icon-color: var(--foreground-color-1)}.imageEditorContainer{color:var(--foreground-color-1);font-family:system-ui,-apple-system,sans-serif;background-color:var(--background-color-1);width:100%;height:400px;min-height:220px;min-width:100px;box-sizing:border-box;display:flex;flex-direction:column-reverse}.imageEditorContainer input{accent-color:var(--primary-action-foreground-color)}.imageEditorContainer .imageEditorRenderArea{display:grid;grid-template-columns:1fr;flex-grow:2;flex-shrink:1;min-height:100px;min-width:0;width:100%;height:100%}.imageEditorContainer .imageEditorRenderArea canvas{grid-row:1/1;grid-column:1/1;touch-action:none;box-sizing:border-box;width:100%;height:100%;min-width:0;max-width:inherit;min-height:0px;max-height:inherit}.imageEditorContainer .loadingMessage{position:fixed;text-align:center;font-size:2em;bottom:0;left:0;right:0}.imageEditorContainer .accessibilityAnnouncement{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.imageEditorContainer .textRendererOutputContainer{width:1px;height:1px;overflow:hidden}.imageEditorContainer .textRendererOutputContainer:focus-within{overflow:visible;z-index:5}@media print{.imageEditorContainer .loadingMessage{display:none}.imageEditorContainer .imageEditorRenderArea canvas{width:100%;height:initial}}',""]);const l=i},609:o=>{o.exports=function(o){var e=[];return e.toString=function(){return this.map((function(e){var r="",n=void 0!==e[5];return e[4]&&(r+="@supports (".concat(e[4],") {")),e[2]&&(r+="@media ".concat(e[2]," {")),n&&(r+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),r+=o(e),n&&(r+="}"),e[2]&&(r+="}"),e[4]&&(r+="}"),r})).join("")},e.i=function(o,r,n,t,a){"string"==typeof o&&(o=[[null,o,void 0]]);var i={};if(n)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(i[d]=!0)}for(var c=0;c<o.length;c++){var b=[].concat(o[c]);n&&i[b[0]]||(void 0!==a&&(void 0===b[5]||(b[1]="@layer".concat(b[5].length>0?" ".concat(b[5]):""," {").concat(b[1],"}")),b[5]=a),r&&(b[2]?(b[1]="@media ".concat(b[2]," {").concat(b[1],"}"),b[2]=r):b[2]=r),t&&(b[4]?(b[1]="@supports (".concat(b[4],") {").concat(b[1],"}"),b[4]=t):b[4]="".concat(t)),e.push(b))}},e}},601:o=>{o.exports=function(o){return o[1]}},62:o=>{var e=[];function r(o){for(var r=-1,n=0;n<e.length;n++)if(e[n].identifier===o){r=n;break}return r}function n(o,n){for(var a={},i=[],l=0;l<o.length;l++){var d=o[l],c=n.base?d[0]+n.base:d[0],b=a[c]||0,p="".concat(c," ").concat(b);a[c]=b+1;var s=r(p),u={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==s)e[s].references++,e[s].updater(u);else{var g=t(u,n);n.byIndex=l,e.splice(l,0,{identifier:p,updater:g,references:1})}i.push(p)}return i}function t(o,e){var r=e.domAPI(e);r.update(o);return function(e){if(e){if(e.css===o.css&&e.media===o.media&&e.sourceMap===o.sourceMap&&e.supports===o.supports&&e.layer===o.layer)return;r.update(o=e)}else r.remove()}}o.exports=function(o,t){var a=n(o=o||[],t=t||{});return function(o){o=o||[];for(var i=0;i<a.length;i++){var l=r(a[i]);e[l].references--}for(var d=n(o,t),c=0;c<a.length;c++){var b=r(a[c]);0===e[b].references&&(e[b].updater(),e.splice(b,1))}a=d}}},793:o=>{var e={};o.exports=function(o,r){var n=function(o){if(void 0===e[o]){var r=document.querySelector(o);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(o){r=null}e[o]=r}return e[o]}(o);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},173:o=>{o.exports=function(o){var e=document.createElement("style");return o.setAttributes(e,o.attributes),o.insert(e,o.options),e}},892:(o,e,r)=>{o.exports=function(o){var e=r.nc;e&&o.setAttribute("nonce",e)}},36:o=>{o.exports=function(o){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=o.insertStyleElement(o);return{update:function(r){!function(o,e,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var t=void 0!==r.layer;t&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,t&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var a=r.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(n,o,e.options)}(e,o,r)},remove:function(){!function(o){if(null===o.parentNode)return!1;o.parentNode.removeChild(o)}(e)}}}},464:o=>{o.exports=function(o,e){if(e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}}},e={};function r(n){var t=e[n];if(void 0!==t)return t.exports;var a=e[n]={id:n,exports:{}};return o[n](a,a.exports,r),a.exports}r.n=o=>{var e=o&&o.__esModule?()=>o.default:()=>o;return r.d(e,{a:e}),e},r.d=(o,e)=>{for(var n in e)r.o(e,n)&&!r.o(o,n)&&Object.defineProperty(o,n,{enumerable:!0,get:e[n]})},r.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},r.nc=void 0;var n={};(()=>{r.r(n);var o=r(62),e=r.n(o),t=r(36),a=r.n(t),i=r(793),l=r.n(i),d=r(892),c=r.n(d),b=r(173),p=r.n(b),s=r(464),u=r.n(s),g=r(245),h={};h.styleTagTransform=u(),h.setAttributes=c(),h.insert=l().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=p();e()(g.Z,h);g.Z&&g.Z.locals&&g.Z.locals;var f=r(489),x={};x.styleTagTransform=u(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=a(),x.insertStyleElement=p();e()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=n})();
package/dist/cjs/toolbar/AbstractToolbar.d.ts CHANGED
@@ -124,24 +124,30 @@ export default abstract class AbstractToolbar {
124
124
  * toolbar.addDefaults();
125
125
  * toolbar.addSaveButton(() => alert('save clicked!'));
126
126
  * ```
127
+ *
128
+ * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
127
129
  */
128
- addSaveButton(saveCallback: () => void): BaseWidget;
130
+ addSaveButton(saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
129
131
  /**
130
132
  * Adds an "Exit" button that, when clicked, calls `exitCallback`.
131
133
  *
132
- * **Note**: This is equivalent to
134
+ * **Note**: This is roughly equivalent to
133
135
  * ```ts
134
136
  * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
135
137
  * label: this.editor.localization.exit,
136
138
  * icon: this.editor.icons.makeCloseIcon(),
139
+ *
140
+ * // labelOverride can be used to override label or icon.
141
+ * ...labelOverride,
137
142
  * }, () => {
138
143
  * exitCallback();
139
144
  * });
140
145
  * ```
146
+ * with some additional configuration.
141
147
  *
142
148
  * @final
143
149
  */
144
- addExitButton(exitCallback: () => void): BaseWidget;
150
+ addExitButton(exitCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
145
151
  /**
146
152
  * Adds undo and redo buttons that trigger the editor's built-in undo and redo
147
153
  * functionality.
package/dist/cjs/toolbar/AbstractToolbar.js CHANGED
@@ -292,9 +292,11 @@ class AbstractToolbar {
292
292
  * toolbar.addDefaults();
293
293
  * toolbar.addSaveButton(() => alert('save clicked!'));
294
294
  * ```
295
+ *
296
+ * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
295
297
  */
296
- addSaveButton(saveCallback) {
297
- const widget = new SaveActionWidget_1.default(this.editor, this.localizationTable, saveCallback);
298
+ addSaveButton(saveCallback, labelOverride = {}) {
299
+ const widget = new SaveActionWidget_1.default(this.editor, this.localizationTable, saveCallback, labelOverride);
298
300
  widget.setTags([BaseWidget_1.ToolbarWidgetTag.Save]);
299
301
  this.addWidget(widget);
300
302
  return widget;
@@ -302,22 +304,27 @@ class AbstractToolbar {
302
304
  /**
303
305
  * Adds an "Exit" button that, when clicked, calls `exitCallback`.
304
306
  *
305
- * **Note**: This is equivalent to
307
+ * **Note**: This is roughly equivalent to
306
308
  * ```ts
307
309
  * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
308
310
  * label: this.editor.localization.exit,
309
311
  * icon: this.editor.icons.makeCloseIcon(),
312
+ *
313
+ * // labelOverride can be used to override label or icon.
314
+ * ...labelOverride,
310
315
  * }, () => {
311
316
  * exitCallback();
312
317
  * });
313
318
  * ```
319
+ * with some additional configuration.
314
320
  *
315
321
  * @final
316
322
  */
317
- addExitButton(exitCallback) {
323
+ addExitButton(exitCallback, labelOverride = {}) {
318
324
  return this.addTaggedActionButton([BaseWidget_1.ToolbarWidgetTag.Exit], {
319
325
  label: this.editor.localization.exit,
320
326
  icon: this.editor.icons.makeCloseIcon(),
327
+ ...labelOverride,
321
328
  }, () => {
322
329
  exitCallback();
323
330
  }, {
package/dist/cjs/toolbar/AbstractToolbar.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/cjs/toolbar/EdgeToolbar.js CHANGED
@@ -235,11 +235,11 @@ class EdgeToolbar extends AbstractToolbar_1.default {
235
235
  widget.removeCSSClassFromContainer('label-right');
236
236
  if (tags.includes(BaseWidget_1.ToolbarWidgetTag.Save)) {
237
237
  widget.addCSSClassToContainer('label-inline');
238
- widget.addCSSClassToContainer('label-right');
238
+ widget.addCSSClassToContainer('label-left');
239
239
  }
240
240
  if (tags.includes(BaseWidget_1.ToolbarWidgetTag.Exit)) {
241
241
  widget.addCSSClassToContainer('label-inline');
242
- widget.addCSSClassToContainer('label-left');
242
+ widget.addCSSClassToContainer('label-right');
243
243
  }
244
244
  }
245
245
  addWidgetInternal(widget) {
package/dist/cjs/toolbar/widgets/SaveActionWidget.d.ts CHANGED
@@ -2,8 +2,9 @@ import { KeyPressEvent } from '../../inputEvents';
2
2
  import Editor from '../../Editor';
3
3
  import { ToolbarLocalization } from '../localization';
4
4
  import ActionButtonWidget from './ActionButtonWidget';
5
+ import { ActionButtonIcon } from '../types';
5
6
  declare class SaveActionWidget extends ActionButtonWidget {
6
- constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void);
7
+ constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
7
8
  protected shouldAutoDisableInReadOnlyEditor(): boolean;
8
9
  protected onKeyPress(event: KeyPressEvent): boolean;
9
10
  mustBeInToplevelMenu(): boolean;
package/dist/cjs/toolbar/widgets/SaveActionWidget.js CHANGED
@@ -7,8 +7,12 @@ const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
7
7
  const BaseWidget_1 = require("./BaseWidget");
8
8
  const keybindings_1 = require("./keybindings");
9
9
  class SaveActionWidget extends ActionButtonWidget_1.default {
10
- constructor(editor, localization, saveCallback) {
11
- super(editor, 'save-button', editor.icons.makeSaveIcon, localization.save, saveCallback);
10
+ constructor(editor, localization, saveCallback, labelOverride = {}) {
11
+ super(editor, 'save-button',
12
+ // Creates an icon
13
+ () => {
14
+ return labelOverride.icon ?? editor.icons.makeSaveIcon();
15
+ }, labelOverride.label ?? localization.save, saveCallback);
12
16
  this.setTags([BaseWidget_1.ToolbarWidgetTag.Save]);
13
17
  }
14
18
  shouldAutoDisableInReadOnlyEditor() {
package/dist/cjs/tools/SelectionTool/Selection.js CHANGED
@@ -157,8 +157,10 @@ class Selection {
157
157
  // Reset for the next drag
158
158
  this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
159
159
  this.transform = math_1.Mat33.identity;
160
- // Make the commands undo-able
161
- await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
160
+ // Make the commands undo-able, but only if the transform is non-empty.
161
+ if (!fullTransform.eq(math_1.Mat33.identity)) {
162
+ await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
163
+ }
162
164
  // Clear renderings of any in-progress transformations
163
165
  const wetInkRenderer = this.editor.display.getWetInkRenderer();
164
166
  wetInkRenderer.clear();
package/dist/cjs/version.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = {
4
- number: '1.4.1',
4
+ number: '1.5.0',
5
5
  };
package/dist/mjs/toolbar/AbstractToolbar.d.ts CHANGED
@@ -124,24 +124,30 @@ export default abstract class AbstractToolbar {
124
124
  * toolbar.addDefaults();
125
125
  * toolbar.addSaveButton(() => alert('save clicked!'));
126
126
  * ```
127
+ *
128
+ * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
127
129
  */
128
- addSaveButton(saveCallback: () => void): BaseWidget;
130
+ addSaveButton(saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
129
131
  /**
130
132
  * Adds an "Exit" button that, when clicked, calls `exitCallback`.
131
133
  *
132
- * **Note**: This is equivalent to
134
+ * **Note**: This is roughly equivalent to
133
135
  * ```ts
134
136
  * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
135
137
  * label: this.editor.localization.exit,
136
138
  * icon: this.editor.icons.makeCloseIcon(),
139
+ *
140
+ * // labelOverride can be used to override label or icon.
141
+ * ...labelOverride,
137
142
  * }, () => {
138
143
  * exitCallback();
139
144
  * });
140
145
  * ```
146
+ * with some additional configuration.
141
147
  *
142
148
  * @final
143
149
  */
144
- addExitButton(exitCallback: () => void): BaseWidget;
150
+ addExitButton(exitCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
145
151
  /**
146
152
  * Adds undo and redo buttons that trigger the editor's built-in undo and redo
147
153
  * functionality.
package/dist/mjs/toolbar/AbstractToolbar.mjs CHANGED
@@ -287,9 +287,11 @@ class AbstractToolbar {
287
287
  * toolbar.addDefaults();
288
288
  * toolbar.addSaveButton(() => alert('save clicked!'));
289
289
  * ```
290
+ *
291
+ * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
290
292
  */
291
- addSaveButton(saveCallback) {
292
- const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback);
293
+ addSaveButton(saveCallback, labelOverride = {}) {
294
+ const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback, labelOverride);
293
295
  widget.setTags([ToolbarWidgetTag.Save]);
294
296
  this.addWidget(widget);
295
297
  return widget;
@@ -297,22 +299,27 @@ class AbstractToolbar {
297
299
  /**
298
300
  * Adds an "Exit" button that, when clicked, calls `exitCallback`.
299
301
  *
300
- * **Note**: This is equivalent to
302
+ * **Note**: This is roughly equivalent to
301
303
  * ```ts
302
304
  * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
303
305
  * label: this.editor.localization.exit,
304
306
  * icon: this.editor.icons.makeCloseIcon(),
307
+ *
308
+ * // labelOverride can be used to override label or icon.
309
+ * ...labelOverride,
305
310
  * }, () => {
306
311
  * exitCallback();
307
312
  * });
308
313
  * ```
314
+ * with some additional configuration.
309
315
  *
310
316
  * @final
311
317
  */
312
- addExitButton(exitCallback) {
318
+ addExitButton(exitCallback, labelOverride = {}) {
313
319
  return this.addTaggedActionButton([ToolbarWidgetTag.Exit], {
314
320
  label: this.editor.localization.exit,
315
321
  icon: this.editor.icons.makeCloseIcon(),
322
+ ...labelOverride,
316
323
  }, () => {
317
324
  exitCallback();
318
325
  }, {
package/dist/mjs/toolbar/AbstractToolbar.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/mjs/toolbar/EdgeToolbar.mjs CHANGED
@@ -228,11 +228,11 @@ export default class EdgeToolbar extends AbstractToolbar {
228
228
  widget.removeCSSClassFromContainer('label-right');
229
229
  if (tags.includes(ToolbarWidgetTag.Save)) {
230
230
  widget.addCSSClassToContainer('label-inline');
231
- widget.addCSSClassToContainer('label-right');
231
+ widget.addCSSClassToContainer('label-left');
232
232
  }
233
233
  if (tags.includes(ToolbarWidgetTag.Exit)) {
234
234
  widget.addCSSClassToContainer('label-inline');
235
- widget.addCSSClassToContainer('label-left');
235
+ widget.addCSSClassToContainer('label-right');
236
236
  }
237
237
  }
238
238
  addWidgetInternal(widget) {
package/dist/mjs/toolbar/widgets/SaveActionWidget.d.ts CHANGED
@@ -2,8 +2,9 @@ import { KeyPressEvent } from '../../inputEvents';
2
2
  import Editor from '../../Editor';
3
3
  import { ToolbarLocalization } from '../localization';
4
4
  import ActionButtonWidget from './ActionButtonWidget';
5
+ import { ActionButtonIcon } from '../types';
5
6
  declare class SaveActionWidget extends ActionButtonWidget {
6
- constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void);
7
+ constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
7
8
  protected shouldAutoDisableInReadOnlyEditor(): boolean;
8
9
  protected onKeyPress(event: KeyPressEvent): boolean;
9
10
  mustBeInToplevelMenu(): boolean;
package/dist/mjs/toolbar/widgets/SaveActionWidget.mjs CHANGED
@@ -2,8 +2,12 @@ import ActionButtonWidget from './ActionButtonWidget.mjs';
2
2
  import { ToolbarWidgetTag } from './BaseWidget.mjs';
3
3
  import { saveKeyboardShortcut } from './keybindings.mjs';
4
4
  class SaveActionWidget extends ActionButtonWidget {
5
- constructor(editor, localization, saveCallback) {
6
- super(editor, 'save-button', editor.icons.makeSaveIcon, localization.save, saveCallback);
5
+ constructor(editor, localization, saveCallback, labelOverride = {}) {
6
+ super(editor, 'save-button',
7
+ // Creates an icon
8
+ () => {
9
+ return labelOverride.icon ?? editor.icons.makeSaveIcon();
10
+ }, labelOverride.label ?? localization.save, saveCallback);
7
11
  this.setTags([ToolbarWidgetTag.Save]);
8
12
  }
9
13
  shouldAutoDisableInReadOnlyEditor() {
package/dist/mjs/tools/SelectionTool/Selection.mjs CHANGED
@@ -129,8 +129,10 @@ class Selection {
129
129
  // Reset for the next drag
130
130
  this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
131
131
  this.transform = Mat33.identity;
132
- // Make the commands undo-able
133
- await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
132
+ // Make the commands undo-able, but only if the transform is non-empty.
133
+ if (!fullTransform.eq(Mat33.identity)) {
134
+ await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
135
+ }
134
136
  // Clear renderings of any in-progress transformations
135
137
  const wetInkRenderer = this.editor.display.getWetInkRenderer();
136
138
  wetInkRenderer.clear();
package/dist/mjs/version.mjs CHANGED
@@ -1,3 +1,3 @@
1
1
  export default {
2
- number: '1.4.1',
2
+ number: '1.5.0',
3
3
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "js-draw",
3
- "version": "1.4.1",
3
+ "version": "1.5.0",
4
4
  "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
5
5
  "types": "./dist/mjs/lib.d.ts",
6
6
  "main": "./dist/cjs/lib.js",
@@ -86,5 +86,5 @@
86
86
  "freehand",
87
87
  "svg"
88
88
  ],
89
- "gitHead": "cf64a8bf9fccc54c87478ea6ed5da771346b62bf"
89
+ "gitHead": "c2252181b1ab0eb7047ad66590bca2eabd61681d"
90
90
  }
package/src/toolbar/EdgeToolbar.scss CHANGED
@@ -60,7 +60,7 @@
60
60
  @media (hover: hover) {
61
61
  // Only show an animation when opening the label due to a hover --
62
62
  // show the label immediately otherwise.
63
- &:hover > #{$label-selector} {
63
+ &:hover:not(:focus-visible) > #{$label-selector} {
64
64
  opacity: $label-visible-opacity;
65
65
  animation: 1s $hover-active-animation;
66
66
  }
@@ -69,7 +69,7 @@
69
69
  // When the user is pressing/long-pressing the button
70
70
  &:active > #{$label-selector} {
71
71
  opacity: $label-visible-opacity;
72
- animation: 0.5s $hover-active-animation;
72
+ animation: 1s $hover-active-animation;
73
73
  }
74
74
 
75
75
  $keyboard-hide-animation: 1.5s ease rehide-label;
@@ -265,7 +265,7 @@
265
265
  --button-flex-direction: row-reverse;
266
266
 
267
267
  > .toolbar-button > .toolbar-icon {
268
- margin-left: 10px;
268
+ margin-left: 7px;
269
269
  margin-right: 0;
270
270
  }
271
271
 
@@ -284,8 +284,11 @@
284
284
 
285
285
  > .toolbar-icon {
286
286
  height: 100%;
287
- margin-right: 10px;
287
+ margin-right: 7px;
288
288
  margin-left: 0;
289
+
290
+ // Make smaller than the other icons
291
+ width: 22px;
289
292
  }
290
293
  }
291
294
  }
package/src/tools/SelectionTool/SelectionTool.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  &.selection-tool-resize-xy {
41
- cursor: nw-resize;
41
+ cursor: nwse-resize;
42
42
  }
43
43
  }
44
44
 
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
  &.selection-tool-resize-xy {
55
- cursor: sw-resize;
55
+ cursor: nesw-resize;
56
56
  }
57
57
  }
58
58