pixedi 1.0.6 → 1.1.0

package/dist/lib/index.js

@@ -1,10 +1,11 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.btn{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:8px;height:32px;padding-left:8px;padding-right:8px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s,opacity .2s;display:inline-flex}.btn:disabled{pointer-events:none;opacity:.5}.btn:active{transform:translateY(1px)}.btn svg{flex-shrink:0;width:16px;height:16px}.btn-default{background-color:var(--primary);color:var(--primary-foreground)}.btn-default:hover{opacity:.9}.btn-outline{border-color:var(--border);background-color:var(--background);color:var(--foreground)}.btn-outline:hover{background-color:var(--secondary)}.btn-ghost{color:var(--foreground);padding-left:8px;padding-right:8px}.btn-ghost:hover{background-color:var(--secondary)}.btn-rect{width:32px;height:32px}.btn-crop{border:1px solid var(--border);background-color:var(--background);color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;font-family:inherit;font-size:12px;transition:all .2s;display:inline-flex}.btn-crop:hover:not([aria-pressed=true]){background-color:var(--secondary)}.btn-crop[aria-pressed=true]{border-color:var(--accent-blue);background-color:var(--accent-blue-light);color:var(--foreground)}.btn-crop svg{flex-shrink:0;width:20px;height:20px}.btn-crop span{white-space:nowrap}.separator{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}.separator[data-orientation=horizontal]{width:100%;height:1px}.separator[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}.select-wrapper{box-sizing:border-box;width:100%;position:relative}.select-trigger{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--border);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;justify-content:space-between;align-items:center;padding-left:10px;padding-right:8px;font-family:inherit;font-size:14px;transition:border-color .2s;display:flex}.select-trigger:hover,.select-trigger:focus{border-color:var(--muted-foreground)}.select-trigger-arrow{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}.select-wrapper[data-state=open] .select-trigger-arrow{transform:rotate(180deg)}.select-content{background-color:var(--background);border:1px solid var(--border);z-index:50;box-sizing:border-box;border-radius:4px;width:100%;max-height:282px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.select-content::-webkit-scrollbar{width:4px}.select-content::-webkit-scrollbar-track{background:0 0}.select-content::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}.select-wrapper[data-state=closed] .select-content{display:none}.select-group-label{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}.select-item{width:100%;color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 10px;display:flex}.select-item:hover{background-color:var(--secondary)}.select-item-left{font-size:14px;font-weight:400}.select-item-addon{align-items:center;gap:8px;display:flex}.select-item-addon>span{color:var(--muted-foreground);font-size:12px}.select-item-addon>svg{font-size:14px}.select-item-addon>b{flex-shrink:0;width:16px;height:16px}.select-item-right-container{align-items:center;gap:8px;display:flex}.select-item-right{color:var(--muted-foreground);font-size:14px}.select-item-check{width:16px;height:16px;color:var(--foreground);flex-shrink:0}.input{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--input);box-sizing:border-box;border-radius:4px;outline:none;padding-left:8px;padding-right:8px;font-family:inherit;font-size:14px;line-height:normal;transition:border-color .2s,box-shadow .2s;display:block}.input:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}.input:focus{box-shadow:0 0 0 1px var(--ring)}.input:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}.input::placeholder{color:var(--muted-foreground);opacity:1}.input-number-clean::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number-clean::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-number-clean[type=number]{-moz-appearance:textfield}.input-pixel-container{position:relative}.input-pixel-legend{color:var(--muted-foreground);background:var(--background);margin-left:8px;padding-left:4px;padding-right:4px;font-size:12px;position:absolute;top:-9px}.input-pixel-suffix{color:var(--muted-foreground);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;bottom:2px;right:8px}.header{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:48px;padding-left:8px;padding-right:8px;display:flex}.header-tools{gap:8px;display:flex}.header-history{align-items:center;gap:8px;display:flex}.header-history-text{color:var(--muted-foreground);font-size:14px}.crop-image{width:100%;height:100%;position:absolute;inset:0}.crop-box{cursor:move;position:absolute}.crop-tools{background-color:var(--background);box-sizing:border-box;border:1px solid var(--border);border-radius:4px;align-items:center;height:36px;padding-left:12px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.crop-tools-info{min-width:54px;margin-top:-2px;display:inline-block}.crop-tools-info-label{color:var(--muted-foreground);font-size:12px;line-height:12px}.crop-tools-info-value{font-size:14px;line-height:14px}.crop-b{background-color:var(--accent-blue);position:absolute}.crop-b-t{cursor:ns-resize;width:100%;height:2px;top:0;left:0}.crop-b-r{cursor:ew-resize;width:2px;height:100%;top:0;right:0}.crop-b-b{cursor:ns-resize;width:100%;height:2px;bottom:0;left:0;transform:translateY(1px)}.crop-b-l{cursor:ew-resize;width:2px;height:100%;top:0;left:-1px;transform:translate(1px)}.crop-l-box{pointer-events:none;position:absolute;inset:2px}.crop-l{border:1px dashed var(--color-white);opacity:.5;position:absolute}.crop-l-v{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}.crop-l-h{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}.crop-ps{box-sizing:border-box;border:1px solid var(--accent-blue);background-color:var(--overlay-bg-white);border-radius:50%;width:12px;height:12px;position:absolute}.crop-ps-tl{cursor:nwse-resize;top:-5px;left:-5px}.crop-ps-t{cursor:ns-resize;top:-5px;left:50%;transform:translate(-50%)}.crop-ps-tr{cursor:nesw-resize;top:-5px;right:-5px}.crop-ps-r{cursor:ew-resize;top:50%;right:-5px;transform:translateY(-50%)}.crop-ps-br{cursor:nwse-resize;bottom:-5px;right:-5px}.crop-ps-b{cursor:ns-resize;bottom:-5px;left:50%;transform:translate(-50%)}.crop-ps-bl{cursor:nesw-resize;bottom:-5px;left:-5px}.crop-ps-l{cursor:ew-resize;top:50%;left:-5px;transform:translateY(-50%)}.crop-p-b{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}.crop-p-p{background-color:var(--overlay-bg-white);border:3px solid var(--accent-blue);box-sizing:border-box;border-radius:50%;width:32px;height:32px;position:absolute;bottom:-16px;right:-16px}.frame{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;padding:16px;display:flex;position:relative;overflow:hidden}.frame--faded{background-color:#00000080}.frame-preview{-webkit-user-select:none;user-select:none;flex-shrink:1;width:auto;min-width:0;max-width:100%;height:auto;min-height:0;max-height:100%;transition:transform .2s;display:block;position:relative}.frame-image{object-fit:contain;width:100%;height:100%}.frame-image--faded{opacity:.4}.resize{background-color:var(--background);border-radius:4px;flex-direction:column;padding:16px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}.resize-text{text-align:center;color:var(--muted-foreground);font-size:14px}.resize-border{border-bottom:1px solid var(--border);width:60px;margin:12px auto 4px;display:inline-block}.resize-tools{align-items:center;gap:6px;margin-top:16px;display:flex}.resize-tools-lock{width:12px;height:12px;color:var(--muted-foreground)}.resize-tools-buttons{margin-left:4px;display:flex}.resize-tools-save{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}.resize-tools-close{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}.sidebar{z-index:10;width:0;transition:transform .15s ease-out;position:relative}@media (width>=768px){.sidebar{width:320px;transition:none}}.sidebar-settings{border-radius:50%;width:40px;height:40px;position:absolute;top:8px;right:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@media (width>=768px){.sidebar-settings{display:none}}.sidebar-container{box-sizing:border-box;border-left:1px solid var(--border);position:absolute;inset:0}.sidebar-content{background-color:var(--background);box-sizing:border-box;flex-direction:column;width:320px;height:100%;padding:16px;display:flex;position:absolute;top:0;left:0;overflow-y:auto}@media (width<=767px){.sidebar-content{padding-top:48px}}.sidebar-close-btn{position:absolute;top:8px;right:8px}.sidebar-separator{margin-top:20px;margin-bottom:12px}.sidebar-resize{justify-content:space-between;align-items:center;display:flex}.sidebar-resize-icon{align-items:center;gap:8px;display:flex}.sidebar-resize-size{color:var(--muted-foreground);font-size:14px}.sidebar-crop{flex-direction:column;gap:8px;display:flex}.sidebar-crop-ratios{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sidebar-preset{flex-direction:column;gap:8px;display:flex}.picedi{font-size:16px;font-family:var(--font-sans);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Helvetica, Arial, sans-serif;--color-white:#fff;--color-black:#000;--color-transparent:transparent;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--accent-blue:oklch(60.9% .221 251.687);--accent-blue-light:oklch(96% .02 250);--destructive:oklch(57.7% .245 27.325);--success:oklch(76.8% .188 151.716);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:4px;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 50%, transparent);--overlay-bg-white:color-mix(in srgb, var(--color-white) 80%, transparent)}:host([data-theme=dark]) .picedi,[data-theme=dark] .picedi,[data-theme=dark].picedi{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--accent-blue-light:oklch(25% .06 250);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 75%, transparent)}.picedi h1,.picedi h2,.picedi h3,.picedi h4,.picedi h5,.picedi h6{margin:0;font-weight:600}.text-red{color:var(--color-red)}.bg-red{background-color:var(--color-red)}.bg-green{background-color:var(--color-green)}.text-green{color:var(--color-green)}.mask{background-color:var(--overlay-bg)}.semibold{letter-spacing:.4px;font-weight:600}.bold{letter-spacing:.4px;font-weight:700}.sys{width:100%;height:100%;color:var(--muted-foreground);justify-content:center;align-items:center;display:flex;position:relative}.main{background-color:var(--background);grid-template-rows:auto 1fr;height:100%;display:grid;overflow:hidden}.grid{grid-template-columns:1fr auto;min-height:0;display:grid;position:relative;overflow:hidden}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._button_snd36_1{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:8px;height:32px;padding:0 8px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s,opacity .2s;display:inline-flex}._button_snd36_1:disabled{pointer-events:none;opacity:.5}._button_snd36_1 svg{flex-shrink:0;width:16px;height:16px}._default_snd36_32{background-color:var(--primary);color:var(--primary-foreground)}._default_snd36_32:hover{opacity:.9}._outline_snd36_39{border-color:var(--border);background-color:var(--background);color:var(--foreground)}._outline_snd36_39:hover{background-color:var(--secondary)}._ghost_snd36_47{color:var(--foreground);padding:0 8px}._ghost_snd36_47:hover{background-color:var(--secondary)}._rect_snd36_54{width:32px;height:32px}._button_gf7m5_1{border:1px solid var(--border);background-color:var(--background);color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;font-family:inherit;font-size:12px;transition:all .2s;display:inline-flex}._button_gf7m5_1:hover:not([aria-pressed=true]){background-color:var(--secondary)}._button_gf7m5_1[aria-pressed=true]{border-color:var(--accent-blue);background-color:var(--accent-blue-light);color:var(--foreground)}._button_gf7m5_1 svg{flex-shrink:0;width:20px;height:20px}._button_gf7m5_1 span{white-space:nowrap}:host{height:100%;display:block}:host *{box-sizing:border-box}._root_1kq9x_8{width:100%;height:100%;font-size:16px;font-family:var(--font-sans);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Helvetica, Arial, sans-serif;--color-white:#fff;--color-black:#000;--color-transparent:transparent;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--accent-blue:oklch(60.9% .221 251.687);--accent-blue-light:oklch(96% .02 250);--destructive:oklch(57.7% .245 27.325);--success:oklch(76.8% .188 151.716);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:4px;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 50%, transparent);--overlay-bg-white:color-mix(in srgb, var(--color-white) 80%, transparent);position:relative}._root_1kq9x_8[data-theme=dark]{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--accent-blue-light:oklch(25% .06 250);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 75%, transparent)}._root_1kq9x_8 h1,._root_1kq9x_8 h2,._root_1kq9x_8 h3,._root_1kq9x_8 h4,._root_1kq9x_8 h5,._root_1kq9x_8 h6{margin:0;font-weight:600}._textRed_1kq9x_97{color:var(--color-red)}._bgRed_1kq9x_100{background-color:var(--color-red)}._bgGreen_1kq9x_103{background-color:var(--color-green)}._textGreen_1kq9x_106{color:var(--color-green)}._mask_1kq9x_109{background-color:var(--overlay-bg)}._semibold_1kq9x_112{letter-spacing:.4px;font-weight:600}._bold_1kq9x_116{letter-spacing:.4px;font-weight:700}._system_1kq9x_120{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_1kq9x_129{width:100%;height:100%;min-height:480px;position:relative}._main_1kq9x_135{background-color:var(--background);grid-template-rows:auto 1fr;display:grid;position:absolute;inset:0;overflow:hidden}._grid_1kq9x_143{grid-template-columns:1fr auto;min-height:0;display:grid;position:relative;overflow:hidden}._separator_rqskq_1{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}._separator_rqskq_1[data-orientation=horizontal]{width:100%;height:1px}._separator_rqskq_1[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}._wrapper_12rgt_1{box-sizing:border-box;width:100%;position:relative}._trigger_12rgt_6{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--border);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;justify-content:space-between;align-items:center;padding:0 8px 0 10px;font-family:inherit;font-size:14px;transition:border-color .2s;display:flex}._trigger_12rgt_6:hover,._trigger_12rgt_6:focus{border-color:var(--muted-foreground)}._triggerArrow_12rgt_29{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}._wrapper_12rgt_1[data-state=open] ._triggerArrow_12rgt_29{transform:rotate(180deg)}._content_12rgt_38{background-color:var(--background);border:1px solid var(--border);z-index:50;box-sizing:border-box;border-radius:4px;width:100%;max-height:282px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}._content_12rgt_38::-webkit-scrollbar{width:4px}._content_12rgt_38::-webkit-scrollbar-track{background:0 0}._content_12rgt_38::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}._wrapper_12rgt_1[data-state=closed] ._content_12rgt_38{display:none}._groupLabel_12rgt_68{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}._item_12rgt_75{width:100%;color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 10px;display:flex}._item_12rgt_75:hover{background-color:var(--secondary)}._itemLeft_12rgt_91{font-size:14px;font-weight:400}._itemAddon_12rgt_95{align-items:center;gap:8px;display:flex}._itemAddon_12rgt_95>span{color:var(--muted-foreground);font-size:12px}._itemAddon_12rgt_95>svg{font-size:14px}._itemAddon_12rgt_95>b{flex-shrink:0;width:16px;height:16px}._itemRightContainer_12rgt_112{align-items:center;gap:8px;display:flex}._itemRight_12rgt_112{color:var(--muted-foreground);font-size:14px}._itemCheck_12rgt_121{width:16px;height:16px;color:var(--foreground);flex-shrink:0}._input_j55nq_1{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--input);box-sizing:border-box;border-radius:4px;outline:none;padding:0 8px;font-family:inherit;font-size:14px;line-height:normal;transition:border-color .2s,box-shadow .2s;display:block}._input_j55nq_1:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}._input_j55nq_1:focus{box-shadow:0 0 0 1px var(--ring)}._input_j55nq_1:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}._input_j55nq_1::placeholder{color:var(--muted-foreground);opacity:1}._numberClean_j55nq_34::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._numberClean_j55nq_34::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._numberClean_j55nq_34[type=number]{-moz-appearance:textfield}._container_14vsv_1{position:relative}._legend_14vsv_4{color:var(--muted-foreground);background:var(--background);margin-left:8px;padding:0 4px;font-size:12px;position:absolute;top:-9px}._suffix_14vsv_13{color:var(--muted-foreground);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;bottom:2px;right:8px}._scGroup_ih963_1{margin-left:4px;display:flex}._scGroupSave_ih963_6{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._scGroupClose_ih963_12{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._header_1ff13_1{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:48px;padding:0 8px;display:flex}._headerTools_1ff13_11{gap:8px;display:flex}._headerHistory_1ff13_15{align-items:center;gap:8px;display:flex}._headerHistoryText_1ff13_20{color:var(--muted-foreground);font-size:14px}._resize_lyibl_1{background-color:var(--background);border-radius:4px;flex-direction:column;padding:16px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._resizeText_lyibl_13{text-align:center;color:var(--muted-foreground);font-size:14px}._resizeBorder_lyibl_18{border-bottom:1px solid var(--border);width:60px;margin:12px auto 4px;display:inline-block}._resizeTools_lyibl_24{align-items:center;gap:6px;margin-top:16px;display:flex}._resizeToolsLock_lyibl_30{width:12px;height:12px;color:var(--muted-foreground)}._resizeToolsButtons_lyibl_35{margin-left:4px;display:flex}._resizeToolsSave_lyibl_39{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._resizeToolsClose_lyibl_44{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._cropImage_1m63v_1{width:100%;height:100%;position:absolute;inset:0}._cropBox_1m63v_7{cursor:move;position:absolute}._cropTools_1m63v_11{background-color:var(--background);box-sizing:border-box;border:1px solid var(--border);border-radius:4px;align-items:center;padding:4px 4px 4px 8px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}._cropToolsInfo_1m63v_27{min-width:54px;margin-top:-2px;display:inline-block}._cropToolsInfoLabel_1m63v_32{color:var(--muted-foreground);font-size:12px;line-height:12px}._cropToolsInfoValue_1m63v_37{font-size:14px;line-height:14px}._cropBorder_1m63v_41{background-color:var(--accent-blue);position:absolute}._cropBorderTop_1m63v_45{cursor:ns-resize;width:100%;height:2px;top:0;left:0}._cropBorderRight_1m63v_52{cursor:ew-resize;width:2px;height:100%;top:0;right:0}._cropBorderBottom_1m63v_59{cursor:ns-resize;width:100%;height:2px;bottom:0;left:0;transform:translateY(1px)}._cropBorderLeft_1m63v_67{cursor:ew-resize;width:2px;height:100%;top:0;left:-1px;transform:translate(1px)}._cropLinesBox_1m63v_75{pointer-events:none;position:absolute;inset:2px}._cropLine_1m63v_75{border:1px dashed var(--color-white);opacity:.5;position:absolute}._cropLineVertical_1m63v_85{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}._cropLineHorizontal_1m63v_93{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}._cropPointer_1m63v_101{box-sizing:border-box;border:1px solid var(--accent-blue);background-color:var(--overlay-bg-white);border-radius:50%;width:12px;height:12px;position:absolute}._cropPointerTopLeft_1m63v_110{cursor:nwse-resize;top:-5px;left:-5px}._cropPointerTop_1m63v_110{cursor:ns-resize;top:-5px;left:50%;transform:translate(-50%)}._cropPointerTopRight_1m63v_121{cursor:nesw-resize;top:-5px;right:-5px}._cropPointerRight_1m63v_126{cursor:ew-resize;top:50%;right:-5px;transform:translateY(-50%)}._cropPointerBottomRight_1m63v_132{cursor:nwse-resize;bottom:-5px;right:-5px}._cropPointerBottom_1m63v_132{cursor:ns-resize;bottom:-5px;left:50%;transform:translate(-50%)}._cropPointerBottomLeft_1m63v_143{cursor:nesw-resize;bottom:-5px;left:-5px}._cropPointerLeft_1m63v_148{cursor:ew-resize;top:50%;left:-5px;transform:translateY(-50%)}._cropMobileBorder_1m63v_154{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}._cropMobilePointer_1m63v_160{background-color:var(--overlay-bg-white);border:3px solid var(--accent-blue);box-sizing:border-box;border-radius:50%;width:32px;height:32px;position:absolute;bottom:-16px;right:-16px}._flip_70quv_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._flipBtnH_70quv_14{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._flipBtnV_70quv_20{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._frame_ihor9_1{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;padding:16px;display:flex;position:relative;overflow:hidden}._framePreview_ihor9_13{-webkit-user-select:none;user-select:none;flex-shrink:1;width:auto;min-width:0;max-width:100%;height:auto;min-height:0;max-height:100%;display:block;position:relative}._frameImage_ihor9_25{object-fit:contain;width:100%;height:100%}._frameImageFaded_ihor9_30{opacity:.4}._sidebar_1obd8_1{z-index:10;width:0;transition:transform .15s ease-out;position:relative}@media (width>=768px){._sidebar_1obd8_1{width:320px;transition:none}}._sidebarSettings_1obd8_11{border-radius:50%;width:40px;height:40px;position:absolute;top:8px;right:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@media (width>=768px){._sidebarSettings_1obd8_11{display:none}}._sidebarContainer_1obd8_25{box-sizing:border-box;border-left:1px solid var(--border);position:absolute;inset:0}._sidebarContent_1obd8_31{background-color:var(--background);box-sizing:border-box;flex-direction:column;width:320px;height:100%;padding:16px;display:flex;position:absolute;top:0;left:0;overflow-y:auto}@media (width<=767px){._sidebarContent_1obd8_31{padding-top:48px}}._sidebarCloseBtn_1obd8_47{position:absolute;top:8px;right:8px}._sidebarSeparator_1obd8_52{margin-top:20px;margin-bottom:12px}._sidebarResize_1obd8_56{justify-content:space-between;align-items:center;display:flex}._sidebarResizeIcon_1obd8_61{align-items:center;gap:8px;display:flex}._sidebarResizeSize_1obd8_66{color:var(--muted-foreground);font-size:14px}._sidebarCrop_1obd8_70{flex-direction:column;gap:8px;display:flex}._sidebarCropRatios_1obd8_75{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}._sidebarPreset_1obd8_80{flex-direction:column;gap:8px;display:flex}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
 import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { flushSync as l } from "react-dom";
 //#region \0rolldown/runtime.js
-var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+var u = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), d = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), d = /* @__PURE__ */ l(((e) => {
+}), f = /* @__PURE__ */ u(((e) => {
 	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
 	function r(e, n, r) {
 		var i = null;
@@ -19,11 +20,11 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		};
 	}
 	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), f = /* @__PURE__ */ l(((e) => {
+})), p = /* @__PURE__ */ u(((e) => {
 	process.env.NODE_ENV !== "production" && (function() {
 		function t(e) {
 			if (e == null) return null;
-			if (typeof e == "function") return e.$$typeof === O ? null : e.displayName || e.name || null;
+			if (typeof e == "function") return e.$$typeof === ee ? null : e.displayName || e.name || null;
 			if (typeof e == "string") return e;
 			switch (e) {
 				case v: return "Fragment";
@@ -31,7 +32,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				case y: return "StrictMode";
 				case w: return "Suspense";
 				case T: return "SuspenseList";
-				case ee: return "Activity";
+				case O: return "Activity";
 			}
 			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
 				case _: return "Portal";
@@ -91,7 +92,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function c(e, t) {
 			function n() {
-				N || (N = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+				M || (M = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
 			}
 			n.isReactWarning = !0, Object.defineProperty(e, "key", {
 				get: n,
@@ -100,9 +101,9 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function l() {
 			var e = t(this.type);
-			return P[e] || (P[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+			return ne[e] || (ne[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
 		}
-		function d(e, t, n, r, i, a) {
+		function u(e, t, n, r, i, a) {
 			var o = n.ref;
 			return e = {
 				$$typeof: g,
@@ -138,9 +139,9 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				value: a
 			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
 		}
-		function f(e, n, i, o, l, u) {
+		function f(e, n, i, o, l, d) {
 			var f = n.children;
-			if (f !== void 0) if (o) if (j(f)) {
+			if (f !== void 0) if (o) if (te(f)) {
 				for (o = 0; o < f.length; o++) p(f[o]);
 				Object.freeze && Object.freeze(f);
 			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
@@ -150,11 +151,11 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				var m = Object.keys(n).filter(function(e) {
 					return e !== "key";
 				});
-				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", L[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), L[f + o] = !0);
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", ae[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), ae[f + o] = !0);
 			}
 			if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
 			else i = n;
-			return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), l, u);
+			return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, f, i, a(), l, d);
 		}
 		function p(e) {
 			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
@@ -162,26 +163,26 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		function m(e) {
 			return typeof e == "object" && !!e && e.$$typeof === g;
 		}
-		var h = u("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), O = Symbol.for("react.client.reference"), k = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, j = Array.isArray, M = console.createTask ? console.createTask : function() {
+		var h = d("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), k = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, te = Array.isArray, j = console.createTask ? console.createTask : function() {
 			return null;
 		};
 		h = { react_stack_bottom_frame: function(e) {
 			return e();
 		} };
-		var N, P = {}, F = h.react_stack_bottom_frame.bind(h, o)(), I = M(i(o)), L = {};
+		var M, ne = {}, re = h.react_stack_bottom_frame.bind(h, o)(), ie = j(i(o)), ae = {};
 		e.Fragment = v, e.jsx = function(e, t, n) {
 			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : F, r ? M(i(e)) : I);
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : re, r ? j(i(e)) : ie);
 		}, e.jsxs = function(e, t, n) {
 			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : F, r ? M(i(e)) : I);
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : re, r ? j(i(e)) : ie);
 		};
 	})();
-})), p = (/* @__PURE__ */ l(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = d() : t.exports = f();
+})), m = (/* @__PURE__ */ u(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = f() : t.exports = p();
 })))();
-function m({ size: e = 36, className: t, style: n, color: r = "currentColor" }) {
-	return /* @__PURE__ */ (0, p.jsxs)("svg", {
+function h({ size: e = 36, className: t, style: n, color: r = "currentColor" }) {
+	return /* @__PURE__ */ (0, m.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		x: "0px",
 		y: "0px",
@@ -191,9 +192,9 @@ function m({ size: e = 36, className: t, style: n, color: r = "currentColor" })
 		fill: r,
 		className: t,
 		style: n,
-		children: [/* @__PURE__ */ (0, p.jsx)("path", {
+		children: [/* @__PURE__ */ (0, m.jsx)("path", {
 			d: "M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1\n		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1\n		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1\n		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5\n		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1\n		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9\n		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9\n		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2\n		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9\n		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1\n		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7\n		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1\n		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z",
-			children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
+			children: /* @__PURE__ */ (0, m.jsx)("animateTransform", {
 				attributeType: "xml",
 				attributeName: "transform",
 				type: "rotate",
@@ -202,10 +203,10 @@ function m({ size: e = 36, className: t, style: n, color: r = "currentColor" })
 				dur: "0.8s",
 				repeatCount: "indefinite"
 			})
-		}), /* @__PURE__ */ (0, p.jsx)("path", {
+		}), /* @__PURE__ */ (0, m.jsx)("path", {
 			fill: "currentColor",
 			d: "M62,40.1c0,0,0,0.2-0.1,0.7c0,0.2,0,0.5-0.1,0.8c0,0.2,0,0.3,0,0.5c0,0.2-0.1,0.4-0.1,0.7\n		c-0.1,0.5-0.2,1-0.3,1.6c-0.2,0.5-0.3,1.1-0.5,1.8c-0.2,0.6-0.5,1.3-0.7,1.9c-0.3,0.7-0.7,1.3-1,2.1c-0.4,0.7-0.9,1.4-1.4,2.1\n		c-0.5,0.7-1.1,1.4-1.7,2c-1.2,1.3-2.7,2.5-4.4,3.6c-1.7,1-3.6,1.8-5.5,2.4c-2,0.5-4,0.7-6.2,0.7c-1.9-0.1-4.1-0.4-6-1.1\n		c-1.9-0.7-3.7-1.5-5.2-2.6c-1.5-1.1-2.9-2.3-4-3.7c-0.6-0.6-1-1.4-1.5-2c-0.4-0.7-0.8-1.4-1.2-2c-0.3-0.7-0.6-1.3-0.8-2\n		c-0.2-0.6-0.4-1.2-0.6-1.8c-0.1-0.6-0.3-1.1-0.4-1.6c-0.1-0.5-0.1-1-0.2-1.4c-0.1-0.9-0.1-1.5-0.1-2c0-0.5,0-0.7,0-0.7\n		s0,0.2,0.1,0.7c0.1,0.5,0,1.1,0.2,2c0.1,0.4,0.2,0.9,0.3,1.4c0.1,0.5,0.3,1,0.5,1.6c0.2,0.6,0.4,1.1,0.7,1.8\n		c0.3,0.6,0.6,1.2,0.9,1.9c0.4,0.6,0.8,1.3,1.2,1.9c0.5,0.6,1,1.3,1.6,1.8c1.1,1.2,2.5,2.3,4,3.2c1.5,0.9,3.2,1.6,5,2.1\n		c1.8,0.5,3.6,0.6,5.6,0.6c1.8-0.1,3.7-0.4,5.4-1c1.7-0.6,3.3-1.4,4.7-2.4c1.4-1,2.6-2.1,3.6-3.3c0.5-0.6,0.9-1.2,1.3-1.8\n		c0.4-0.6,0.7-1.2,1-1.8c0.3-0.6,0.6-1.2,0.8-1.8c0.2-0.6,0.4-1.1,0.5-1.7c0.1-0.5,0.2-1,0.3-1.5c0.1-0.4,0.1-0.8,0.1-1.2\n		c0-0.2,0-0.4,0.1-0.5c0-0.2,0-0.4,0-0.5c0-0.3,0-0.6,0-0.8c0-0.5,0-0.7,0-0.7c0-1.1,0.9-2,2-2s2,0.9,2,2C62,40,62,40.1,62,40.1z",
-			children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
+			children: /* @__PURE__ */ (0, m.jsx)("animateTransform", {
 				attributeType: "xml",
 				attributeName: "transform",
 				type: "rotate",
@@ -219,7 +220,7 @@ function m({ size: e = 36, className: t, style: n, color: r = "currentColor" })
 }
 //#endregion
 //#region src/shared/components/ImageEditor/provider/initialState.ts
-var h = (e, t, n, r) => ({
+var g = (e, t, n, r) => ({
 	history: {
 		pointer: 0,
 		items: [{
@@ -232,8 +233,8 @@ var h = (e, t, n, r) => ({
 	currentAction: null,
 	extension: e,
 	sidebar: !1
-}), g = e(void 0), _ = ({ children: e, base64: t, width: n, height: r, ext: i }) => {
-	let [a, o] = c(h(i, n, r, t)), s = () => a.currentAction, l = (e) => o((t) => ({
+}), _ = e(void 0), v = ({ children: e, base64: t, width: n, height: r, ext: i }) => {
+	let [a, o] = c(g(i, n, r, t)), s = () => a.currentAction, l = (e) => o((t) => ({
 		...t,
 		currentAction: e
 	})), u = (e) => o((t) => {
@@ -248,8 +249,8 @@ var h = (e, t, n, r) => ({
 		};
 	}), d = () => a.history.items.at(a.history.pointer), f = () => o((e) => ({
 		...e,
-		history: h(i, n, r, t).history
-	})), m = () => o((e) => {
+		history: g(i, n, r, t).history
+	})), p = () => o((e) => {
 		let t = e.history.items.at(e.history.pointer);
 		return {
 			...e,
@@ -258,7 +259,7 @@ var h = (e, t, n, r) => ({
 				pointer: 0
 			}
 		};
-	}), _ = () => o((e) => e.history.pointer <= 0 ? e : {
+	}), h = () => o((e) => e.history.pointer <= 0 ? e : {
 		...e,
 		history: {
 			...e.history,
@@ -274,15 +275,15 @@ var h = (e, t, n, r) => ({
 		...t,
 		sidebar: e
 	}));
-	return /* @__PURE__ */ (0, p.jsx)(g, {
+	return /* @__PURE__ */ (0, m.jsx)(_, {
 		value: {
 			...a,
 			getCurrentAction: s,
 			setCurrentAction: l,
 			addToHistory: u,
 			resetHistory: f,
-			resetHistoryAfterSave: m,
-			undo: _,
+			resetHistoryAfterSave: p,
+			undo: h,
 			redo: v,
 			getLastHistoryItem: d,
 			getSidebar: y,
@@ -290,13 +291,13 @@ var h = (e, t, n, r) => ({
 		},
 		children: e
 	});
-}, v = {
+}, y = {
 	"image/jpeg": "jpg",
 	"image/jpg": "jpg",
 	"image/png": "png",
 	"image/gif": "gif",
 	"image/webp": "webp"
-}, y = (e) => {
+}, b = (e) => {
 	let [t, n] = c({
 		loading: !0,
 		error: null,
@@ -311,7 +312,7 @@ var h = (e, t, n, r) => ({
 			try {
 				let r = await fetch(e);
 				if (!r.ok) throw Error(`HTTP error! Status: ${r.status}`);
-				let i = (r.headers.get("content-type") || "").split(";")[0].toLowerCase().trim(), a = i.startsWith("image/"), o = v[i] || "unknown";
+				let i = (r.headers.get("content-type") || "").split(";")[0].toLowerCase().trim(), a = i.startsWith("image/"), o = y[i] || "unknown";
 				if (!a) {
 					t && n((e) => ({
 						...e,
@@ -350,7 +351,7 @@ var h = (e, t, n, r) => ({
 			t = !1;
 		};
 	}, [e]), t;
-}, b = () => {
+}, x = () => {
 	let e = s(null), t = n((e) => {
 		let t = e.match(/^data:(image\/[a-zA-Z+.-]+);base64,(.+)$/);
 		if (!t) throw Error("Invalid Base64 image format");
@@ -417,14 +418,14 @@ var h = (e, t, n, r) => ({
 			a
 		])
 	};
-}, x = () => {
+}, S = () => {
 	if (typeof window > "u" || !window.navigator) return null;
 	let e = window.navigator.userAgent.toLowerCase();
 	return /android/.test(e) ? "android" : /iphone|ipad|ipod/.test(e) ? "ios" : /windows phone/.test(e) ? "windows-phone" : /blackberry|bb10/.test(e) ? "blackberry" : /opera mini/.test(e) ? "opera-mini" : /mobile/.test(e) ? "mobile" : null;
-}, S = () => {
-	let [e] = c(() => x());
+}, C = () => {
+	let [e] = c(() => S());
 	return e;
-}, C = {
+}, w = {
 	sm: 640,
 	md: 768,
 	lg: 1024,
@@ -432,18 +433,18 @@ var h = (e, t, n, r) => ({
 };
 //#endregion
 //#region src/shared/components/ImageEditor/hooks/useBellow.tsx
-function w(e) {
-	let [t, n] = c(() => window.innerWidth < C[e]);
+function T(e) {
+	let [t, n] = c(() => window.innerWidth < w[e]);
 	return i(() => {
 		function t() {
-			n(window.innerWidth < C[e]);
+			n(window.innerWidth < w[e]);
 		}
 		return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
 	}, [e]), t;
 }
 //#endregion
 //#region src/shared/components/ImageEditor/assets/icons.tsx
-var T = {
+var E = {
 	xmlns: "http://w3.org",
 	width: "24",
 	height: "24",
@@ -453,58 +454,58 @@ var T = {
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, E = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
-	...T,
+}, D = (e) => /* @__PURE__ */ (0, m.jsx)("svg", {
+	...E,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("path", { d: "M20 6 9 17l-5-5" })
-}), D = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+	children: /* @__PURE__ */ (0, m.jsx)("path", { d: "M20 6 9 17l-5-5" })
+}), O = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "m6 6 12 12" })]
-}), ee = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+	children: [/* @__PURE__ */ (0, m.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, m.jsx)("path", { d: "m6 6 12 12" })]
+}), ee = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("rect", {
+	children: [/* @__PURE__ */ (0, m.jsx)("rect", {
 		width: "18",
 		height: "11",
 		x: "3",
 		y: "11",
 		rx: "2",
 		ry: "2"
-	}), /* @__PURE__ */ (0, p.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
-}), O = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+	}), /* @__PURE__ */ (0, m.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
+}), k = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M19 12H5" })]
-}), k = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
-	...T,
+	children: [/* @__PURE__ */ (0, m.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, m.jsx)("path", { d: "M19 12H5" })]
+}), A = (e) => /* @__PURE__ */ (0, m.jsx)("svg", {
+	...E,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("path", { d: "m6 9 6 6 6-6" })
-}), A = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+	children: /* @__PURE__ */ (0, m.jsx)("path", { d: "m6 9 6 6 6-6" })
+}), te = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
-}), j = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+	children: [/* @__PURE__ */ (0, m.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, m.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
+}), j = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
-}), M = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+	children: [/* @__PURE__ */ (0, m.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, m.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
+}), M = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }), /* @__PURE__ */ (0, p.jsx)("circle", {
+	children: [/* @__PURE__ */ (0, m.jsx)("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }), /* @__PURE__ */ (0, m.jsx)("circle", {
 		cx: "12",
 		cy: "12",
 		r: "3"
 	})]
-}), N = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+}), ne = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
-}), P = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+	children: [/* @__PURE__ */ (0, m.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, m.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
+}), re = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
 	children: [
-		/* @__PURE__ */ (0, p.jsx)("rect", {
+		/* @__PURE__ */ (0, m.jsx)("rect", {
 			width: "18",
 			height: "18",
 			x: "3",
@@ -512,32 +513,32 @@ var T = {
 			rx: "2",
 			ry: "2"
 		}),
-		/* @__PURE__ */ (0, p.jsx)("circle", {
+		/* @__PURE__ */ (0, m.jsx)("circle", {
 			cx: "9",
 			cy: "9",
 			r: "2"
 		}),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 	]
-}), F = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
-	...T,
+}), ie = (e) => /* @__PURE__ */ (0, m.jsx)("svg", {
+	...E,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("rect", {
+	children: /* @__PURE__ */ (0, m.jsx)("rect", {
 		width: "18",
 		height: "18",
 		x: "3",
 		y: "3",
 		rx: "2"
 	})
-}), I = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
-	...T,
+}), ae = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
 	children: [
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
-		/* @__PURE__ */ (0, p.jsx)("rect", {
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+		/* @__PURE__ */ (0, m.jsx)("rect", {
 			width: "10",
 			height: "8",
 			x: "7",
@@ -545,12 +546,34 @@ var T = {
 			rx: "1"
 		})
 	]
-}), L = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
-	...T,
+}), oe = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("path", {
+	children: [
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M12 20v2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M12 14v2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M12 8v2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M12 2v2" })
+	]
+}), se = (e) => /* @__PURE__ */ (0, m.jsxs)("svg", {
+	...E,
+	...e,
+	children: [
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M4 12H2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M10 12H8" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M16 12h-2" }),
+		/* @__PURE__ */ (0, m.jsx)("path", { d: "M22 12h-2" })
+	]
+}), ce = (e) => /* @__PURE__ */ (0, m.jsx)("svg", {
+	...E,
+	...e,
+	children: /* @__PURE__ */ (0, m.jsx)("path", {
 		d: "M21 12a9 9 0 1 1-6.219-8.56",
-		children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
+		children: /* @__PURE__ */ (0, m.jsx)("animateTransform", {
 			attributeType: "xml",
 			attributeName: "transform",
 			type: "rotate",
@@ -560,42 +583,67 @@ var T = {
 			repeatCount: "indefinite"
 		})
 	})
-}), R = () => {
-	let e = r(g);
+}), N = () => {
+	let e = r(_);
 	if (!e) throw Error("useImageEditorContext must be used within an ImageEditorProvider");
 	return e;
-}, z = t(({ className: e = "", variant: t = "default", children: n, ...r }, i) => /* @__PURE__ */ (0, p.jsx)("button", {
-	ref: i,
-	className: `btn ${`btn-${t}`} ${e}`.trim(),
-	...r,
+}, P = {
+	button: "_button_snd36_1",
+	default: "_default_snd36_32",
+	outline: "_outline_snd36_39",
+	ghost: "_ghost_snd36_47",
+	rect: "_rect_snd36_54"
+}, F = ({ className: e = "", variant: t = "default", children: n, ref: r, ...i }) => /* @__PURE__ */ (0, m.jsx)("button", {
+	ref: r,
+	className: `${P.button} ${P[t]} ${e}`.trim(),
+	...i,
 	children: n
-})), B = t(({ className: e = "", active: t = !1, icon: n, label: r, ...i }, a) => /* @__PURE__ */ (0, p.jsxs)("button", {
-	ref: a,
+}), le = { button: "_button_gf7m5_1" }, I = {
+	root: "_root_1kq9x_8",
+	textRed: "_textRed_1kq9x_97",
+	bgRed: "_bgRed_1kq9x_100",
+	bgGreen: "_bgGreen_1kq9x_103",
+	textGreen: "_textGreen_1kq9x_106",
+	mask: "_mask_1kq9x_109",
+	semibold: "_semibold_1kq9x_112",
+	bold: "_bold_1kq9x_116",
+	system: "_system_1kq9x_120",
+	wrapper: "_wrapper_1kq9x_129",
+	main: "_main_1kq9x_135",
+	grid: "_grid_1kq9x_143"
+}, L = ({ className: e = "", active: t = !1, icon: n, label: r, ref: i, ...a }) => /* @__PURE__ */ (0, m.jsxs)("button", {
+	ref: i,
 	type: "button",
 	"aria-pressed": t,
-	className: `btn-crop ${e}`.trim(),
-	...i,
-	children: [n, /* @__PURE__ */ (0, p.jsx)("span", {
-		className: "semibold",
+	className: `${le.button} ${e}`.trim(),
+	...a,
+	children: [n, /* @__PURE__ */ (0, m.jsx)("span", {
+		className: I.semibold,
 		children: r
 	})]
-}));
-B.displayName = "ButtonCrop";
-//#endregion
-//#region src/shared/components/ImageEditor/ui/separator/Separator.tsx
-var V = t(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, p.jsx)("hr", {
+}), ue = { separator: "_separator_rqskq_1" }, R = t(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, m.jsx)("hr", {
 	ref: r,
 	role: "separator",
 	"aria-orientation": t,
 	"data-orientation": t,
-	className: `separator ${e}`.trim(),
+	className: `${ue.separator} ${e}`.trim(),
 	...n
 }));
-V.displayName = "Separator";
-//#endregion
-//#region src/shared/components/ImageEditor/ui/select/Select.tsx
-var te = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option", className: l = "", renderOption: u }) => {
-	let [d, f] = c(!1), m = s(null), h = s(null), g = s(null), _ = o(() => {
+R.displayName = "Separator";
+var z = {
+	wrapper: "_wrapper_12rgt_1",
+	trigger: "_trigger_12rgt_6",
+	triggerArrow: "_triggerArrow_12rgt_29",
+	content: "_content_12rgt_38",
+	groupLabel: "_groupLabel_12rgt_68",
+	item: "_item_12rgt_75",
+	itemLeft: "_itemLeft_12rgt_91",
+	itemAddon: "_itemAddon_12rgt_95",
+	itemRightContainer: "_itemRightContainer_12rgt_112",
+	itemRight: "_itemRight_12rgt_112",
+	itemCheck: "_itemCheck_12rgt_121"
+}, de = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option", className: l = "", renderOption: u }) => {
+	let [d, f] = c(!1), p = s(null), h = s(null), g = s(null), _ = o(() => {
 		let t = (e) => e.reduce((e, n) => n.options ? [...e, ...t(n.options.map((e) => ({
 			...e,
 			fullName: `${n.label} ${e.label}`
@@ -604,157 +652,290 @@ var te = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option"
 	}, [e]).find((e) => e.value === t);
 	i(() => {
 		let e = (e) => {
-			m.current && !m.current.contains(e.target) && f(!1);
+			p.current && !e.composedPath().includes(p.current) && f(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []), a(() => {
 		if (!d || !h.current || !g.current) return;
-		let e = m.current?.closest(".picedi.main")?.getBoundingClientRect(), t = h.current.getBoundingClientRect(), n = g.current.getBoundingClientRect(), r = (e?.bottom ?? window.innerHeight) - 16, i = t.bottom + n.height + 4, a = "calc(100% + 4px)";
+		let e = p.current?.closest(`.${I.main}`)?.getBoundingClientRect(), t = h.current.getBoundingClientRect(), n = g.current.getBoundingClientRect(), r = (e?.bottom ?? window.innerHeight) - 16, i = t.bottom + n.height + 4, a = "calc(100% + 4px)";
 		i > r && (a = `calc(100% + 4px - ${i - r}px)`), g.current.style.top = a;
 	}, [d, e]);
 	let v = (e) => {
 		n(e), f(!1);
 	};
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		ref: m,
-		className: `select-wrapper ${l}`.trim(),
+	return /* @__PURE__ */ (0, m.jsxs)("div", {
+		ref: p,
+		className: `${z.wrapper} ${l}`.trim(),
 		"data-state": d ? "open" : "closed",
-		children: [/* @__PURE__ */ (0, p.jsxs)("button", {
+		children: [/* @__PURE__ */ (0, m.jsxs)("button", {
 			ref: h,
 			type: "button",
-			className: "select-trigger",
+			className: z.trigger,
 			onClick: () => f(!d),
-			children: [/* @__PURE__ */ (0, p.jsx)("span", { children: _ ? _.fullName : r }), /* @__PURE__ */ (0, p.jsx)(k, { className: "select-trigger-arrow" })]
-		}), /* @__PURE__ */ (0, p.jsx)("div", {
+			children: [/* @__PURE__ */ (0, m.jsx)("span", { children: _ ? _.fullName : r }), /* @__PURE__ */ (0, m.jsx)(A, { className: z.triggerArrow })]
+		}), /* @__PURE__ */ (0, m.jsx)("div", {
 			ref: g,
-			className: "select-content",
-			children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, p.jsxs)("div", { children: [/* @__PURE__ */ (0, p.jsx)("div", {
-				className: "select-group-label semibold",
+			className: z.content,
+			children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, m.jsxs)("div", { children: [/* @__PURE__ */ (0, m.jsx)("div", {
+				className: `${z.groupLabel} ${I.semibold}`,
 				children: e.label
-			}), e.options.map((e) => /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "select-item",
+			}), e.options.map((e) => /* @__PURE__ */ (0, m.jsxs)("div", {
+				className: z.item,
 				onClick: () => v(e.value),
-				children: [u ? u(e) : /* @__PURE__ */ (0, p.jsx)("span", {
-					className: "select-item-left",
+				children: [u ? u(e) : /* @__PURE__ */ (0, m.jsx)("span", {
+					className: z.itemLeft,
 					children: e.label
-				}), /* @__PURE__ */ (0, p.jsxs)("div", {
-					className: "select-item-addon",
+				}), /* @__PURE__ */ (0, m.jsxs)("div", {
+					className: z.itemAddon,
 					children: [
-						e.rightLabel && /* @__PURE__ */ (0, p.jsx)("span", { children: e.rightLabel }),
-						t === e.value && /* @__PURE__ */ (0, p.jsx)(E, { className: "select-item-check" }),
-						t !== e.value && /* @__PURE__ */ (0, p.jsx)("b", {})
+						e.rightLabel && /* @__PURE__ */ (0, m.jsx)("span", { children: e.rightLabel }),
+						t === e.value && /* @__PURE__ */ (0, m.jsx)(D, { className: z.itemCheck }),
+						t !== e.value && /* @__PURE__ */ (0, m.jsx)("b", {})
 					]
 				})]
-			}, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "select-item",
+			}, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, m.jsxs)("div", {
+				className: z.item,
 				onClick: () => v(e.value),
-				children: [u ? u(e) : /* @__PURE__ */ (0, p.jsxs)("span", {
-					className: "select-item-left",
-					children: [e.label, "1"]
-				}), t === e.value && /* @__PURE__ */ (0, p.jsx)(E, { className: "select-item-check" })]
+				children: [u ? u(e) : /* @__PURE__ */ (0, m.jsx)("span", {
+					className: z.itemLeft,
+					children: e.label
+				}), t === e.value && /* @__PURE__ */ (0, m.jsx)(D, { className: z.itemCheck })]
 			}, e.value))
 		})]
 	});
-}, ne = t(({ className: e = "", type: t = "text", hideArrows: n = !0, ...r }, i) => /* @__PURE__ */ (0, p.jsx)("input", {
-	ref: i,
-	type: t,
-	className: `input ${t === "number" && n ? "input-number-clean" : ""} ${e}`.trim(),
-	...r
-}));
-ne.displayName = "Input";
-//#endregion
-//#region src/shared/components/ImageEditor/ui/input-pixel/InputPixel.tsx
-var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ */ (0, p.jsxs)("div", {
-	className: `input-pixel-container ${t}`.trim(),
+}, fe = {
+	input: "_input_j55nq_1",
+	numberClean: "_numberClean_j55nq_34"
+}, pe = ({ className: e = "", type: t = "text", hideArrows: n = !0, ref: r, ...i }) => {
+	let a = t === "number" && n ? fe.numberClean : "";
+	return /* @__PURE__ */ (0, m.jsx)("input", {
+		ref: r,
+		type: t,
+		className: `${fe.input} ${a} ${e}`.trim(),
+		...i
+	});
+}, B = {
+	container: "_container_14vsv_1",
+	legend: "_legend_14vsv_4",
+	suffix: "_suffix_14vsv_13"
+}, me = ({ label: e, className: t = "", style: n, ref: r, ...i }) => /* @__PURE__ */ (0, m.jsxs)("div", {
+	className: `${B.container} ${t}`.trim(),
 	style: n,
 	children: [
-		/* @__PURE__ */ (0, p.jsx)("span", {
-			className: "input-pixel-legend",
+		/* @__PURE__ */ (0, m.jsx)("span", {
+			className: B.legend,
 			children: e
 		}),
-		/* @__PURE__ */ (0, p.jsx)(ne, {
-			ref: i,
+		/* @__PURE__ */ (0, m.jsx)(pe, {
+			ref: r,
 			type: "number",
-			...r
+			...i
 		}),
-		/* @__PURE__ */ (0, p.jsx)("span", {
-			className: "input-pixel-suffix",
+		/* @__PURE__ */ (0, m.jsx)("span", {
+			className: B.suffix,
 			children: "px"
 		})
 	]
-})), re = ({ onBack: e, onSave: t }) => {
-	let [n, r] = c(!1), { history: i, undo: a, redo: o, resetHistory: s, resetHistoryAfterSave: l, getLastHistoryItem: u } = R(), { base64: d } = u(), f = i.items.length > 1 && !n, m = i.pointer === 0, h = i.pointer === i.items.length - 1, g = i.items.length < 2 || n;
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "header",
-		children: [/* @__PURE__ */ (0, p.jsx)(z, {
+}), V = {
+	scGroup: "_scGroup_ih963_1",
+	scGroupSave: "_scGroupSave_ih963_6",
+	scGroupClose: "_scGroupClose_ih963_12"
+}, H = ({ onSave: e, onClose: t, saving: n = !1, disabled: r = !1 }) => /* @__PURE__ */ (0, m.jsxs)("div", {
+	className: V.scGroup,
+	children: [/* @__PURE__ */ (0, m.jsx)(F, {
+		variant: "outline",
+		className: `${V.scGroupSave} ${I.textGreen}`,
+		disabled: r || n,
+		onClick: e,
+		children: n ? /* @__PURE__ */ (0, m.jsx)(ce, {}) : /* @__PURE__ */ (0, m.jsx)(D, {})
+	}), /* @__PURE__ */ (0, m.jsx)(F, {
+		variant: "outline",
+		className: `${V.scGroupClose} ${I.textRed}`,
+		disabled: n,
+		onClick: t,
+		children: /* @__PURE__ */ (0, m.jsx)(O, {})
+	})]
+}), U = {
+	header: "_header_1ff13_1",
+	headerTools: "_headerTools_1ff13_11",
+	headerHistory: "_headerHistory_1ff13_15",
+	headerHistoryText: "_headerHistoryText_1ff13_20"
+}, he = ({ onBack: e, onSave: t }) => {
+	let [n, r] = c(!1), { history: i, undo: a, redo: o, resetHistory: s, resetHistoryAfterSave: l, getLastHistoryItem: u, setCurrentAction: d } = N(), { base64: f } = u(), p = i.items.length > 1 && !n, h = i.pointer === 0, g = i.pointer === i.items.length - 1, _ = i.items.length < 2 || n;
+	return /* @__PURE__ */ (0, m.jsxs)("div", {
+		className: U.header,
+		children: [/* @__PURE__ */ (0, m.jsx)(F, {
 			variant: "ghost",
-			className: "btn-rect",
+			className: P.rect,
 			onClick: e,
-			children: /* @__PURE__ */ (0, p.jsx)(O, {})
-		}), /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "header-tools",
+			children: /* @__PURE__ */ (0, m.jsx)(k, {})
+		}), /* @__PURE__ */ (0, m.jsxs)("div", {
+			className: U.headerTools,
 			children: [
-				f && /* @__PURE__ */ (0, p.jsxs)("div", {
-					className: "header-history",
+				p && /* @__PURE__ */ (0, m.jsxs)("div", {
+					className: U.headerHistory,
 					children: [
-						/* @__PURE__ */ (0, p.jsx)(z, {
+						/* @__PURE__ */ (0, m.jsx)(F, {
 							variant: "outline",
-							disabled: m,
-							className: "btn-rect",
+							disabled: h,
+							className: P.rect,
 							onClick: a,
-							children: /* @__PURE__ */ (0, p.jsx)(A, {})
+							children: /* @__PURE__ */ (0, m.jsx)(te, {})
 						}),
-						/* @__PURE__ */ (0, p.jsxs)("div", {
-							className: "header-history-text",
+						/* @__PURE__ */ (0, m.jsxs)("div", {
+							className: U.headerHistoryText,
 							children: [
 								i.pointer + 1,
 								"/",
 								i.items.length
 							]
 						}),
-						/* @__PURE__ */ (0, p.jsx)(z, {
+						/* @__PURE__ */ (0, m.jsx)(F, {
 							variant: "outline",
-							disabled: h,
-							className: "btn-rect",
+							disabled: g,
+							className: P.rect,
 							onClick: o,
-							children: /* @__PURE__ */ (0, p.jsx)(j, {})
+							children: /* @__PURE__ */ (0, m.jsx)(j, {})
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, p.jsx)(z, {
+				/* @__PURE__ */ (0, m.jsx)(F, {
 					variant: "outline",
-					disabled: n,
-					onClick: s,
+					disabled: _,
+					onClick: () => {
+						d(null), s();
+					},
 					children: "Reset"
 				}),
-				/* @__PURE__ */ (0, p.jsxs)(z, {
-					disabled: g,
+				/* @__PURE__ */ (0, m.jsxs)(F, {
+					disabled: _,
 					onClick: async () => {
-						if (d) {
+						if (f) {
 							r(!0);
 							try {
-								await t(d), l();
+								await t(f), d(null), l();
 							} finally {
 								r(!1);
 							}
 						}
 					},
-					children: [n ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {}), "Save"]
+					children: [n ? /* @__PURE__ */ (0, m.jsx)(ce, {}) : /* @__PURE__ */ (0, m.jsx)(D, {}), "Save"]
 				})
 			]
 		})]
 	});
-}, U = 32, W = (e) => ({
+}, W = {
+	resize: "_resize_lyibl_1",
+	resizeText: "_resizeText_lyibl_13",
+	resizeBorder: "_resizeBorder_lyibl_18",
+	resizeTools: "_resizeTools_lyibl_24",
+	resizeToolsLock: "_resizeToolsLock_lyibl_30",
+	resizeToolsButtons: "_resizeToolsButtons_lyibl_35",
+	resizeToolsSave: "_resizeToolsSave_lyibl_39",
+	resizeToolsClose: "_resizeToolsClose_lyibl_44"
+}, G = 10, K = 200, ge = (e, t, n) => (e < G && (e = G), e > K && (e = K), {
+	updatedScale: e,
+	updatedWidth: Math.round(e / 100 * t),
+	updatedHeight: Math.round(e / 100 * n)
+}), _e = ({ frameRef: e }) => {
+	let { getLastHistoryItem: t, setCurrentAction: r, addToHistory: a, setSidebar: o } = N(), { width: l, height: u, base64: d } = t(), [f, p] = c(!1), [h, g] = c(l), [_, v] = c(u), y = s(0), { resize: b } = x(), S = C(), w = n((t) => {
+		e.current && (e.current.style.transition = "transform 0.2s ease", e.current.style.transform = `scale(${t / 100})`);
+	}, [e]), T = (e) => {
+		let { updatedScale: t, updatedWidth: n, updatedHeight: r } = ge(parseInt(e.target.value) / l * 100, l, u);
+		g(n), v(r), w(t);
+	}, E = (e) => {
+		let { updatedScale: t, updatedWidth: n, updatedHeight: r } = ge(parseInt(e.target.value) / u * 100, l, u);
+		v(r), g(n), w(t);
+	}, D = () => {
+		w(100), r(null), o(!0);
+	}, O = async () => {
+		try {
+			p(!0);
+			let e = await b(d, h, _);
+			a({
+				name: "Resize",
+				base64: e,
+				width: h,
+				height: _
+			}), w(100), o(!0);
+		} catch (e) {
+			console.error("Failed to process image:", e);
+		} finally {
+			p(!1);
+		}
+	};
+	return i(() => {
+		let e = Math.round(h / l * 100), t = (e) => {
+			let { updatedHeight: t, updatedWidth: n } = ge(e, l, u);
+			v(t), g(n), w(e);
+		}, n = (n) => {
+			if (f) return;
+			let r = Math.sign(n.deltaY);
+			e -= r * 2, e <= G && (e = G), e >= K && (e = K), t(e);
+		}, r = (e) => {
+			y.current = e.touches[0].clientY;
+		}, i = (n) => {
+			if (f) return;
+			let r = n.touches[0].clientY, i = y.current - r;
+			Math.abs(i) < 10 || (e += Math.sign(i) * 2, e <= G && (e = G), e >= K && (e = K), t(e), y.current = r);
+		}, a = new AbortController(), { signal: o } = a;
+		return window.addEventListener("wheel", n, { signal: o }), window.addEventListener("touchstart", r, { signal: o }), window.addEventListener("touchmove", i, { signal: o }), () => a.abort();
+	}, [
+		u,
+		l,
+		w,
+		f,
+		S,
+		h
+	]), /* @__PURE__ */ (0, m.jsxs)("div", {
+		className: W.resize,
+		children: [
+			/* @__PURE__ */ (0, m.jsx)("div", {
+				className: W.resizeText,
+				children: S ? "Slide UP/Down to Resize" : "Scroll UP/Down to Resize"
+			}),
+			/* @__PURE__ */ (0, m.jsx)("div", { className: W.resizeBorder }),
+			/* @__PURE__ */ (0, m.jsxs)("div", {
+				className: W.resizeTools,
+				children: [
+					/* @__PURE__ */ (0, m.jsx)(me, {
+						value: h,
+						name: "width",
+						label: "Width",
+						disabled: f,
+						style: { width: "88px" },
+						onChange: T
+					}),
+					/* @__PURE__ */ (0, m.jsx)(ee, { className: W.resizeToolsLock }),
+					/* @__PURE__ */ (0, m.jsx)(me, {
+						value: _,
+						name: "height",
+						label: "Height",
+						disabled: f,
+						style: { width: "88px" },
+						onChange: E
+					}),
+					/* @__PURE__ */ (0, m.jsx)(H, {
+						onSave: () => O(),
+						onClose: D,
+						saving: f,
+						disabled: h === l || f
+					})
+				]
+			})
+		]
+	});
+}, q = 32, J = (e) => ({
 	x: e.offsetLeft,
 	y: e.offsetTop,
 	w: e.offsetWidth,
 	h: e.offsetHeight
-}), ie = (e, t, n, r, i, a, o, s) => {
+}), ve = (e, t, n, r, i, a, o, s) => {
 	let { x: c } = o, { y: l, w: u, h: d } = o;
-	if (e) u += r - n, u + c > i && (u = i - c), u < U && (u = U);
+	if (e) u += r - n, u + c > i && (u = i - c), u < q && (u = q);
 	else {
 		let e = r - n, o = Math.round(e / t);
-		if (u += e, d += o, l -= o / 2, l < 0 || d + l > a || u + c > i || u < U || d < U) return W(s);
+		if (u += e, d += o, l -= o / 2, l < 0 || d + l > a || u + c > i || u < q || d < q) return J(s);
 	}
 	return {
 		x: c,
@@ -762,14 +943,14 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: u,
 		h: d
 	};
-}, ae = (e, t, n, r, i, a, o, s) => {
+}, ye = (e, t, n, r, i, a, o, s) => {
 	let { x: c, y: l, w: u, h: d } = o;
 	if (e) {
 		let e = i - o.w - o.x;
-		c += r - n, c < 0 && (c = 0), u = i - c - e, u < U && (u = U, c = i - e - U);
+		c += r - n, c < 0 && (c = 0), u = i - c - e, u < q && (u = q, c = i - e - q);
 	} else {
 		let e = r - n, i = Math.round(e / t);
-		if (u -= e, d -= i, c += e, l += i / 2, l < 0 || c < 0 || d + l > a || u < U || d < U) return W(s);
+		if (u -= e, d -= i, c += e, l += i / 2, l < 0 || c < 0 || d + l > a || u < q || d < q) return J(s);
 	}
 	return {
 		x: c,
@@ -777,12 +958,12 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: u,
 		h: d
 	};
-}, oe = (e, t, n, r, i, a, o, s) => {
+}, be = (e, t, n, r, i, a, o, s) => {
 	let { x: c, y: l, w: u, h: d } = o, f = a - d - l;
-	if (e) l += r - n, l < 0 && (l = 0), d = a - l - f, d < U && (d = U, l = a - f - U);
+	if (e) l += r - n, l < 0 && (l = 0), d = a - l - f, d < q && (d = q, l = a - f - q);
 	else {
 		let e = r - n, a = Math.round(e * t);
-		if (d -= e, u -= a, c += a / 2, l += e, l < 0 || c < 0 || u + c > i || u < U || d < U) return W(s);
+		if (d -= e, u -= a, c += a / 2, l += e, l < 0 || c < 0 || u + c > i || u < q || d < q) return J(s);
 	}
 	return {
 		x: c,
@@ -790,12 +971,12 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: u,
 		h: d
 	};
-}, se = (e, t, n, r, i, a, o, s) => {
+}, xe = (e, t, n, r, i, a, o, s) => {
 	let { y: c } = o, { x: l, w: u, h: d } = o;
-	if (e) d += r - n, d + c > a && (d = a - c), d < U && (d = U);
+	if (e) d += r - n, d + c > a && (d = a - c), d < q && (d = q);
 	else {
 		let e = r - n, o = Math.round(e * t);
-		if (d += e, u += o, l -= o / 2, d + c > a || l < 0 || u + l > i || u < U || d < U) return W(s);
+		if (d += e, u += o, l -= o / 2, d + c > a || l < 0 || u + l > i || u < q || d < q) return J(s);
 	}
 	return {
 		x: l,
@@ -803,13 +984,13 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: u,
 		h: d
 	};
-}, ce = (e, t, n, r, i, a, o, s, c, l) => {
+}, Se = (e, t, n, r, i, a, o, s, c, l) => {
 	let { x: u, y: d, w: f, h: p } = c;
 	if (e) {
 		let e = o - c.w - c.x;
-		u += i - n, u < 0 && (u = 0), f = o - u - e, f < U && (f = U, u = o - e - U);
+		u += i - n, u < 0 && (u = 0), f = o - u - e, f < q && (f = q, u = o - e - q);
 		let t = s - p - d;
-		d += a - r, d < 0 && (d = 0), p = s - d - t, p < U && (p = U, d = s - t - U);
+		d += a - r, d < 0 && (d = 0), p = s - d - t, p < q && (p = q, d = s - t - q);
 	} else {
 		if (t >= 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -818,7 +999,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f -= n, p -= e, u += n, d += e;
 		}
-		if (u < 0 || d < 0 || f < U || p < U) return W(l);
+		if (u < 0 || d < 0 || f < q || p < q) return J(l);
 	}
 	return {
 		x: u,
@@ -826,12 +1007,12 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, le = (e, t, n, r, i, a, o, s, c, l) => {
+}, Ce = (e, t, n, r, i, a, o, s, c, l) => {
 	let { x: u } = c, { y: d, w: f, h: p } = c;
 	if (e) {
-		f += i - n, f + u > o && (f = o - u), f < U && (f = U);
+		f += i - n, f + u > o && (f = o - u), f < q && (f = q);
 		let e = s - p - d;
-		d += a - r, d < 0 && (d = 0), p = s - d - e, p < U && (p = U, d = s - e - U);
+		d += a - r, d < 0 && (d = 0), p = s - d - e, p < q && (p = q, d = s - e - q);
 	} else {
 		if (t > 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -840,7 +1021,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f -= n, p -= e, d += e;
 		}
-		if (f + u > o || d < 0 || f < U || p < U) return W(l);
+		if (f + u > o || d < 0 || f < q || p < q) return J(l);
 	}
 	return {
 		x: u,
@@ -848,12 +1029,12 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, ue = (e, t, n, r, i, a, o, s, c, l) => {
+}, we = (e, t, n, r, i, a, o, s, c, l) => {
 	let { y: u } = c, { x: d, w: f, h: p } = c;
 	if (e) {
-		p += a - r, p + u > s && (p = s - u), p < U && (p = U);
+		p += a - r, p + u > s && (p = s - u), p < q && (p = q);
 		let e = o - c.w - c.x;
-		d += i - n, d < 0 && (d = 0), f = o - d - e, f < U && (f = U, d = o - e - U);
+		d += i - n, d < 0 && (d = 0), f = o - d - e, f < q && (f = q, d = o - e - q);
 	} else {
 		if (t >= 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -862,7 +1043,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f += n, p += e, d -= n;
 		}
-		if (p + u > s || d < 0 || f < U || p < U) return W(l);
+		if (p + u > s || d < 0 || f < q || p < q) return J(l);
 	}
 	return {
 		x: d,
@@ -870,9 +1051,9 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, de = (e, t, n, r, i, a, o, s, c, l) => {
+}, Te = (e, t, n, r, i, a, o, s, c, l) => {
 	let { x: u, y: d } = c, { w: f, h: p } = c;
-	if (e) f += i - n, f + u > o && (f = o - u), f < U && (f = U), p += a - r, p + d > s && (p = s - d), p < U && (p = U);
+	if (e) f += i - n, f + u > o && (f = o - u), f < q && (f = q), p += a - r, p + d > s && (p = s - d), p < q && (p = q);
 	else {
 		if (t >= 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -881,7 +1062,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f += n, p += e;
 		}
-		if (p + d > s || f + u > o || f < U || p < U) return W(l);
+		if (p + d > s || f + u > o || f < q || p < q) return J(l);
 	}
 	return {
 		x: u,
@@ -889,12 +1070,12 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, fe = (e, t, n, r, i, a, o, s, c, l, u) => e === "r" ? ie(t, n, r, a, s, c, l, u) : e === "l" ? ae(t, n, r, a, s, c, l, u) : e === "t" ? oe(t, n, i, o, s, c, l, u) : e === "b" ? se(t, n, i, o, s, c, l, u) : e === "tl" ? ce(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? le(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? ue(t, n, r, i, a, o, s, c, l, u) : e === "br" ? de(t, n, r, i, a, o, s, c, l, u) : {
+}, Ee = (e, t, n, r, i, a, o, s, c, l, u) => e === "r" ? ve(t, n, r, a, s, c, l, u) : e === "l" ? ye(t, n, r, a, s, c, l, u) : e === "t" ? be(t, n, i, o, s, c, l, u) : e === "b" ? xe(t, n, i, o, s, c, l, u) : e === "tl" ? Se(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? Ce(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? we(t, n, r, i, a, o, s, c, l, u) : e === "br" ? Te(t, n, r, i, a, o, s, c, l, u) : {
 	x: 0,
 	y: 0,
 	w: 0,
 	h: 0
-}, G = (e, t, n) => {
+}, De = (e, t, n) => {
 	let r = .1, i = t / n, a = 0, o = 0;
 	e === 1 && (a = (i > 1 ? n : t) * (1 - r * 2), o = a), e > 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e)), e < 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e));
 	let s = a / t * 100, c = o / n * 100;
@@ -908,39 +1089,66 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		wPx: a,
 		hPx: o
 	};
-}, pe = () => {
-	let { getCurrentAction: e, getLastHistoryItem: t } = R(), n = e(), r = S(), i = s(null), a = s(null), { handleCropStart: o } = be({
+}, Y = {
+	cropImage: "_cropImage_1m63v_1",
+	cropBox: "_cropBox_1m63v_7",
+	cropTools: "_cropTools_1m63v_11",
+	cropToolsInfo: "_cropToolsInfo_1m63v_27",
+	cropToolsInfoLabel: "_cropToolsInfoLabel_1m63v_32",
+	cropToolsInfoValue: "_cropToolsInfoValue_1m63v_37",
+	cropBorder: "_cropBorder_1m63v_41",
+	cropBorderTop: "_cropBorderTop_1m63v_45",
+	cropBorderRight: "_cropBorderRight_1m63v_52",
+	cropBorderBottom: "_cropBorderBottom_1m63v_59",
+	cropBorderLeft: "_cropBorderLeft_1m63v_67",
+	cropLinesBox: "_cropLinesBox_1m63v_75",
+	cropLine: "_cropLine_1m63v_75",
+	cropLineVertical: "_cropLineVertical_1m63v_85",
+	cropLineHorizontal: "_cropLineHorizontal_1m63v_93",
+	cropPointer: "_cropPointer_1m63v_101",
+	cropPointerTopLeft: "_cropPointerTopLeft_1m63v_110",
+	cropPointerTop: "_cropPointerTop_1m63v_110",
+	cropPointerTopRight: "_cropPointerTopRight_1m63v_121",
+	cropPointerRight: "_cropPointerRight_1m63v_126",
+	cropPointerBottomRight: "_cropPointerBottomRight_1m63v_132",
+	cropPointerBottom: "_cropPointerBottom_1m63v_132",
+	cropPointerBottomLeft: "_cropPointerBottomLeft_1m63v_143",
+	cropPointerLeft: "_cropPointerLeft_1m63v_148",
+	cropMobileBorder: "_cropMobileBorder_1m63v_154",
+	cropMobilePointer: "_cropMobilePointer_1m63v_160"
+}, Oe = () => {
+	let { getCurrentAction: e, getLastHistoryItem: t } = N(), n = e(), r = C(), i = s(null), a = s(null), { handleCropStart: o } = Re({
 		imgRef: i,
 		cropRef: a
 	});
 	if (!n || n.name !== "crop") return null;
-	let { width: c, height: l, base64: u } = t(), { x: d, y: f, w: m, h } = G(n.args.ratio, c, l);
-	return /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)("img", {
+	let { width: c, height: l, base64: u } = t(), { x: d, y: f, w: p, h } = De(n.args.ratio, c, l);
+	return /* @__PURE__ */ (0, m.jsxs)(m.Fragment, { children: [/* @__PURE__ */ (0, m.jsx)("img", {
 		ref: i,
 		src: u,
 		alt: "Image",
-		className: "crop-image",
-		style: { clipPath: `xywh(${d}% ${f}% ${m}% ${h}%)` }
-	}), /* @__PURE__ */ (0, p.jsxs)("div", {
+		className: Y.cropImage,
+		style: { clipPath: `xywh(${d}% ${f}% ${p}% ${h}%)` }
+	}), /* @__PURE__ */ (0, m.jsxs)("div", {
 		ref: a,
-		className: "crop-box",
+		className: Y.cropBox,
 		style: {
-			width: `${m}%`,
+			width: `${p}%`,
 			height: `${h}%`,
 			top: `${f}%`,
 			left: `${d}%`
 		},
-		children: [/* @__PURE__ */ (0, p.jsx)(ge, {}), r ? /* @__PURE__ */ (0, p.jsx)(xe, { onMouseDown: o }) : /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)(he, { onMouseDown: o }), /* @__PURE__ */ (0, p.jsx)(_e, { onMouseDown: o })] })]
+		children: [/* @__PURE__ */ (0, m.jsx)(Ne, {}), r ? /* @__PURE__ */ (0, m.jsx)(ze, { onMouseDown: o }) : /* @__PURE__ */ (0, m.jsxs)(m.Fragment, { children: [/* @__PURE__ */ (0, m.jsx)(Me, { onMouseDown: o }), /* @__PURE__ */ (0, m.jsx)(Pe, { onMouseDown: o })] })]
 	})] });
-}, K = new EventTarget(), q = (e) => {
+}, ke = new EventTarget(), Ae = (e) => {
 	let t = new CustomEvent("crop-update", { detail: e });
-	K.dispatchEvent(t);
-}, me = () => {
-	let { setCurrentAction: e, getCurrentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: a } = R(), { crop: o, resize: l } = b(), [u, d] = c(!1), f = t(), { base64: m, width: h, height: g } = n(), _ = s(null), v = s(null), y = s(null), x = s(null), S = s(null);
+	ke.dispatchEvent(t);
+}, je = () => {
+	let { setCurrentAction: e, getCurrentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: a } = N(), { crop: o, resize: l } = x(), [u, d] = c(!1), f = t(), { base64: p, width: h, height: g } = n(), _ = s(null), v = s(null), y = s(null), b = s(null), S = s(null);
 	return i(() => {
 		if (f?.name !== "crop") return;
-		let { x: e, y: t, w: n, h: r } = G(f.args.ratio, h, g), i = Math.round(e / 100 * h), a = Math.round(t / 100 * g), o = Math.round(n / 100 * h), s = Math.round(r / 100 * g);
-		_.current && (_.current.textContent = i.toString()), v.current && (v.current.textContent = a.toString()), y.current && (y.current.textContent = o.toString()), x.current && (x.current.textContent = s.toString()), S.current = {
+		let { x: e, y: t, w: n, h: r } = De(f.args.ratio, h, g), i = Math.round(e / 100 * h), a = Math.round(t / 100 * g), o = Math.round(n / 100 * h), s = Math.round(r / 100 * g);
+		_.current && (_.current.textContent = i.toString()), v.current && (v.current.textContent = a.toString()), y.current && (y.current.textContent = o.toString()), b.current && (b.current.textContent = s.toString()), S.current = {
 			x: i,
 			y: a,
 			w: o,
@@ -948,71 +1156,64 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		};
 		let c = (e) => {
 			let t = e, { x: n, y: r, w: i, h: a } = t.detail;
-			S.current = t.detail, _.current && (_.current.textContent = n.toString()), v.current && (v.current.textContent = r.toString()), y.current && (y.current.textContent = i.toString()), x.current && (x.current.textContent = a.toString());
+			S.current = t.detail, _.current && (_.current.textContent = n.toString()), v.current && (v.current.textContent = r.toString()), y.current && (y.current.textContent = i.toString()), b.current && (b.current.textContent = a.toString());
 		};
-		return K.addEventListener("crop-update", c), () => {
-			K.removeEventListener("crop-update", c);
+		return ke.addEventListener("crop-update", c), () => {
+			ke.removeEventListener("crop-update", c);
 		};
 	}, [
 		f,
 		h,
 		g
-	]), /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "crop-tools",
+	]), /* @__PURE__ */ (0, m.jsxs)("div", {
+		className: Y.cropTools,
 		children: [
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
+			/* @__PURE__ */ (0, m.jsxs)("div", {
+				className: Y.cropToolsInfo,
+				children: [/* @__PURE__ */ (0, m.jsx)("div", {
+					className: Y.cropToolsInfoLabel,
 					children: "left"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
+				}), /* @__PURE__ */ (0, m.jsx)("div", {
+					className: `${Y.cropToolsInfoValue} ${I.semibold}`,
 					ref: _
 				})]
 			}),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
+			/* @__PURE__ */ (0, m.jsxs)("div", {
+				className: Y.cropToolsInfo,
+				children: [/* @__PURE__ */ (0, m.jsx)("div", {
+					className: Y.cropToolsInfoLabel,
 					children: "top"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
+				}), /* @__PURE__ */ (0, m.jsx)("div", {
+					className: `${Y.cropToolsInfoValue} ${I.semibold}`,
 					ref: v
 				})]
 			}),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
+			/* @__PURE__ */ (0, m.jsxs)("div", {
+				className: Y.cropToolsInfo,
+				children: [/* @__PURE__ */ (0, m.jsx)("div", {
+					className: Y.cropToolsInfoLabel,
 					children: "width"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
+				}), /* @__PURE__ */ (0, m.jsx)("div", {
+					className: `${Y.cropToolsInfoValue} ${I.semibold}`,
 					ref: y
 				})]
 			}),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
+			/* @__PURE__ */ (0, m.jsxs)("div", {
+				className: Y.cropToolsInfo,
+				children: [/* @__PURE__ */ (0, m.jsx)("div", {
+					className: Y.cropToolsInfoLabel,
 					children: "height"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
-					ref: x
+				}), /* @__PURE__ */ (0, m.jsx)("div", {
+					className: `${Y.cropToolsInfoValue} ${I.semibold}`,
+					ref: b
 				})]
 			}),
-			/* @__PURE__ */ (0, p.jsx)(V, { orientation: "vertical" }),
-			/* @__PURE__ */ (0, p.jsx)(z, {
-				variant: "ghost",
-				className: "text-green",
-				style: {
-					height: "36px",
-					width: "36px"
-				},
-				disabled: u,
-				onClick: async () => {
+			/* @__PURE__ */ (0, m.jsx)(H, {
+				saving: u,
+				onSave: async () => {
 					if (!(!f || f.name !== "crop")) try {
 						if (d(!0), !S.current) return;
-						let { x: e, y: t, w: n, h: i } = S.current, { preset: s } = f.args, c = await o(m, e, t, n, i);
+						let { x: e, y: t, w: n, h: i } = S.current, { preset: s } = f.args, c = await o(p, e, t, n, i);
 						if (s) {
 							let { w: e, h: t } = s;
 							c = await l(c, e, t);
@@ -1029,93 +1230,82 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 						d(!1);
 					}
 				},
-				children: u ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {})
-			}),
-			/* @__PURE__ */ (0, p.jsx)(V, { orientation: "vertical" }),
-			/* @__PURE__ */ (0, p.jsx)(z, {
-				variant: "ghost",
-				style: {
-					height: "36px",
-					width: "36px"
-				},
-				disabled: u,
-				onClick: () => {
+				onClose: () => {
 					e(null), a(!0);
-				},
-				children: /* @__PURE__ */ (0, p.jsx)(D, { className: "text-red" })
+				}
 			})
 		]
 	});
-}, he = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-t",
+}, Me = ({ onMouseDown: e }) => /* @__PURE__ */ (0, m.jsxs)(m.Fragment, { children: [
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropBorder} ${Y.cropBorderTop}`,
 		onMouseDown: (t) => e(t, "t", "ns")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-r",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropBorder} ${Y.cropBorderRight}`,
 		onMouseDown: (t) => e(t, "r", "ew")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-b",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropBorder} ${Y.cropBorderBottom}`,
 		onMouseDown: (t) => e(t, "b", "ns")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-l",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropBorder} ${Y.cropBorderLeft}`,
 		onMouseDown: (t) => e(t, "l", "ew")
 	})
-] }), ge = () => /* @__PURE__ */ (0, p.jsxs)("div", {
-	className: "crop-l-box",
-	children: [/* @__PURE__ */ (0, p.jsx)("span", { className: "crop-l crop-l-v" }), /* @__PURE__ */ (0, p.jsx)("span", { className: "crop-l crop-l-h" })]
-}), _e = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-tl",
+] }), Ne = () => /* @__PURE__ */ (0, m.jsxs)("div", {
+	className: Y.cropLinesBox,
+	children: [/* @__PURE__ */ (0, m.jsx)("span", { className: `${Y.cropLine} ${Y.cropLineVertical}` }), /* @__PURE__ */ (0, m.jsx)("span", { className: `${Y.cropLine} ${Y.cropLineHorizontal}` })]
+}), Pe = ({ onMouseDown: e }) => /* @__PURE__ */ (0, m.jsxs)(m.Fragment, { children: [
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerTopLeft}`,
 		onMouseDown: (t) => e(t, "tl", "nwse")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-t",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerTop}`,
 		onMouseDown: (t) => e(t, "t", "ns")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-tr",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerTopRight}`,
 		onMouseDown: (t) => e(t, "tr", "nesw")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-r",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerRight}`,
 		onMouseDown: (t) => e(t, "r", "ew")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-br",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerBottomRight}`,
 		onMouseDown: (t) => e(t, "br", "nwse")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-b",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerBottom}`,
 		onMouseDown: (t) => e(t, "b", "ns")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-bl",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerBottomLeft}`,
 		onMouseDown: (t) => e(t, "bl", "nesw")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-l",
+	/* @__PURE__ */ (0, m.jsx)("span", {
+		className: `${Y.cropPointer} ${Y.cropPointerLeft}`,
 		onMouseDown: (t) => e(t, "l", "ew")
 	})
 ] });
 //#endregion
 //#region src/shared/components/ImageEditor/crop/useCropInteraction.ts
-function J(e, t, n) {
+function Fe(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
-function Y(e, t) {
+function X(e, t) {
 	return e / t * 100;
 }
-function ve(e, t, n, r, i) {
+function Ie(e, t, n, r, i) {
 	e.style.left = `${t}%`, e.style.top = `${n}%`, e.style.width = `${r}%`, e.style.height = `${i}%`;
 }
-function ye(e, t, n, r, i) {
+function Le(e, t, n, r, i) {
 	e.style.clipPath = `xywh(${t}% ${n}% ${r}% ${i}%)`;
 }
-var be = ({ imgRef: e, cropRef: t }) => {
-	let { getCurrentAction: n, getLastHistoryItem: r } = R(), a = S(), o = s(null), c = s(""), l = s({
+var Re = ({ imgRef: e, cropRef: t }) => {
+	let { getCurrentAction: n, getLastHistoryItem: r } = N(), a = C(), o = s(null), c = s(""), l = s({
 		xPct: 0,
 		yPct: 0
 	}), u = s({
@@ -1129,8 +1319,8 @@ var be = ({ imgRef: e, cropRef: t }) => {
 			if (t.current) {
 				let e = t.current.parentElement;
 				e && (l.current = {
-					xPct: Y(t.current.offsetLeft, e.offsetWidth),
-					yPct: Y(t.current.offsetTop, e.offsetHeight)
+					xPct: X(t.current.offsetLeft, e.offsetWidth),
+					yPct: X(t.current.offsetTop, e.offsetHeight)
 				});
 			}
 			let n = "clientX" in e ? e.clientX : e.touches[0].clientX, r = "clientY" in e ? e.clientY : e.touches[0].clientY;
@@ -1151,12 +1341,12 @@ var be = ({ imgRef: e, cropRef: t }) => {
 		}, s = (e, t, i, a, s) => {
 			let l = n();
 			if (!l || l.name !== "crop" || !o.current) return;
-			let { isFree: d, ratio: f } = l.args, p = "clientX" in e ? e.clientX : e.touches[0].clientX, m = "clientY" in e ? e.clientY : e.touches[0].clientY, { x: h, y: g, w: _, h: v } = fe(c.current, d, f, o.current.x, o.current.y, p, m, a, s, u.current, t), y = Y(h, a), b = Y(g, s), x = Y(_, a), S = Y(v, s);
-			ve(t, y, b, x, S), ye(i, y, b, x, S);
+			let { isFree: d, ratio: f } = l.args, p = "clientX" in e ? e.clientX : e.touches[0].clientX, m = "clientY" in e ? e.clientY : e.touches[0].clientY, { x: h, y: g, w: _, h: v } = Ee(c.current, d, f, o.current.x, o.current.y, p, m, a, s, u.current, t), y = X(h, a), b = X(g, s), x = X(_, a), S = X(v, s);
+			Ie(t, y, b, x, S), Le(i, y, b, x, S);
 			let C = r();
 			if (!C) return;
 			let { width: w, height: T } = C;
-			q({
+			Ae({
 				x: Math.round(y / 100 * w),
 				y: Math.round(b / 100 * T),
 				w: Math.round(x / 100 * w),
@@ -1164,19 +1354,18 @@ var be = ({ imgRef: e, cropRef: t }) => {
 			});
 		}, d = (e, t, n, i, a) => {
 			if (!o.current) return;
-			console.log("HandleDrag");
-			let s = t.offsetWidth, c = t.offsetHeight, u = "clientX" in e ? e.clientX : e.touches[0].clientX, d = "clientY" in e ? e.clientY : e.touches[0].clientY, f = Y(u - o.current.x, i), p = Y(d - o.current.y, a);
+			let s = t.offsetWidth, c = t.offsetHeight, u = "clientX" in e ? e.clientX : e.touches[0].clientX, d = "clientY" in e ? e.clientY : e.touches[0].clientY, f = X(u - o.current.x, i), p = X(d - o.current.y, a);
 			o.current = {
 				x: u,
 				y: d
 			};
-			let m = Y(i - s, i), h = Y(a - c, a), g = J(l.current.xPct + f, 0, m), _ = J(l.current.yPct + p, 0, h), v = Y(s, i), y = Y(c, a);
+			let m = X(i - s, i), h = X(a - c, a), g = Fe(l.current.xPct + f, 0, m), _ = Fe(l.current.yPct + p, 0, h), v = X(s, i), y = X(c, a);
 			l.current = {
 				xPct: g,
 				yPct: _
-			}, ve(t, g, _, v, y), ye(n, g, _, v, y);
+			}, Ie(t, g, _, v, y), Le(n, g, _, v, y);
 			let { width: b, height: x } = r();
-			q({
+			Ae({
 				x: Math.round(g / 100 * b),
 				y: Math.round(_ / 100 * x),
 				w: Math.round(v / 100 * b),
@@ -1207,142 +1396,118 @@ var be = ({ imgRef: e, cropRef: t }) => {
 			y: s
 		}, c.current = n, a || (t.current.style.cursor = `${r}-resize`, document.body.style.cursor = `${r}-resize`);
 	} };
-}, xe = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsx)("div", {
-	className: "crop-p-b",
-	children: /* @__PURE__ */ (0, p.jsx)("div", {
-		className: "crop-p-p",
+}, ze = ({ onMouseDown: e }) => /* @__PURE__ */ (0, m.jsx)("div", {
+	className: Y.cropMobileBorder,
+	children: /* @__PURE__ */ (0, m.jsx)("div", {
+		className: Y.cropMobilePointer,
 		onTouchStart: (t) => e(t, "br", "nwse")
 	})
-}), X = 10, Z = 200, Q = (e, t, n) => (e < X && (e = X), e > Z && (e = Z), {
-	updatedScale: e,
-	updatedWidth: Math.round(e / 100 * t),
-	updatedHeight: Math.round(e / 100 * n)
-}), Se = ({ onResizing: e }) => {
-	let { getLastHistoryItem: t, setCurrentAction: n, addToHistory: r, setSidebar: a } = R(), { width: o, height: l, base64: u } = t(), [d, f] = c(!1), [m, h] = c(o), [g, _] = c(l), v = s(0), { resize: y } = b(), x = S(), C = (t) => {
-		let { updatedScale: n, updatedWidth: r, updatedHeight: i } = Q(parseInt(t.target.value) / o * 100, o, l);
-		h(r), _(i), e(n);
-	}, w = (t) => {
-		let { updatedScale: n, updatedWidth: r, updatedHeight: i } = Q(parseInt(t.target.value) / l * 100, o, l);
-		_(i), h(r), e(n);
-	}, T = () => {
-		e(100), n(null), a(!0);
-	}, O = async () => {
-		try {
-			f(!0);
-			let t = await y(u, m, g);
-			r({
-				name: "Resize",
-				base64: t,
-				width: m,
-				height: g
-			}), e(100), a(!0);
-		} catch (e) {
-			console.error("Failed to process image:", e);
-		} finally {
-			f(!1);
-		}
+}), Z = {
+	flip: "_flip_70quv_1",
+	flipBtnH: "_flipBtnH_70quv_14",
+	flipBtnV: "_flipBtnV_70quv_20"
+}, Be = ({ frameRef: e }) => {
+	let { getLastHistoryItem: t, setCurrentAction: n, addToHistory: r, setSidebar: i } = N(), { flip: a } = x(), [o, s] = c(!1), [u, d] = c(!1), [f, p] = c(!1), { base64: h, width: g, height: _ } = t(), v = () => {
+		e.current && (e.current.style.transition = "transform 0.2s ease");
+	}, y = () => {
+		e.current && (e.current.style.transition = "none");
+	}, b = (t = !1, n = !1) => {
+		e.current && (e.current.style.transform = `scale(${t ? -1 : 1}, ${n ? -1 : 1})`);
 	};
-	return i(() => {
-		let t = Math.round(m / o * 100), n = (t) => {
-			let { updatedHeight: n, updatedWidth: r } = Q(t, o, l);
-			_(n), h(r), e(t);
-		}, r = (e) => {
-			if (d) return;
-			let r = Math.sign(e.deltaY);
-			t -= r * 2, t <= X && (t = X), t >= Z && (t = Z), n(t);
-		}, i = (e) => {
-			v.current = e.touches[0].clientY;
-		}, a = (e) => {
-			if (d) return;
-			let r = e.touches[0].clientY, i = v.current - r;
-			Math.abs(i) < 10 || (t += Math.sign(i) * 2, t <= X && (t = X), t >= Z && (t = Z), n(t), v.current = r);
-		}, s = new AbortController(), { signal: c } = s;
-		return window.addEventListener("wheel", r, { signal: c }), window.addEventListener("touchstart", i, { signal: c }), window.addEventListener("touchmove", a, { signal: c }), () => s.abort();
-	}, [
-		l,
-		o,
-		d,
-		x,
-		e,
-		m
-	]), /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "resize",
-		children: [
-			/* @__PURE__ */ (0, p.jsx)("div", {
-				className: "resize-text",
-				children: x ? "Slide UP/Down to Resize" : "Scroll UP/Down to Resize"
-			}),
-			/* @__PURE__ */ (0, p.jsx)("div", { className: "resize-border" }),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "resize-tools",
-				children: [
-					/* @__PURE__ */ (0, p.jsx)(H, {
-						value: m,
-						name: "width",
-						label: "Width",
-						disabled: d,
-						style: { width: "88px" },
-						onChange: C
-					}),
-					/* @__PURE__ */ (0, p.jsx)(ee, { className: "resize-tools-lock" }),
-					/* @__PURE__ */ (0, p.jsx)(H, {
-						value: g,
-						name: "height",
-						label: "Height",
-						disabled: d,
-						style: { width: "88px" },
-						onChange: w
-					}),
-					/* @__PURE__ */ (0, p.jsxs)("div", {
-						className: "resize-tools-buttons",
-						children: [/* @__PURE__ */ (0, p.jsx)(z, {
-							variant: "outline",
-							className: "resize-tools-save text-green",
-							disabled: m === o || d,
-							onClick: () => O(),
-							children: d ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {})
-						}), /* @__PURE__ */ (0, p.jsx)(z, {
-							variant: "outline",
-							className: "resize-tools-close text-red",
-							disabled: d,
-							onClick: T,
-							children: /* @__PURE__ */ (0, p.jsx)(D, {})
-						})]
-					})
-				]
-			})
-		]
+	return /* @__PURE__ */ (0, m.jsxs)("div", {
+		className: Z.flip,
+		children: [/* @__PURE__ */ (0, m.jsxs)("div", {
+			className: Z.scGroup,
+			children: [/* @__PURE__ */ (0, m.jsx)(F, {
+				variant: "outline",
+				className: `${Z.flipBtnH}`,
+				disabled: o,
+				onClick: () => {
+					d((e) => !e), v(), b(!u, f);
+				},
+				children: /* @__PURE__ */ (0, m.jsx)(oe, { style: { color: u ? "var(--accent-blue)" : "var(--foreground)" } })
+			}), /* @__PURE__ */ (0, m.jsx)(F, {
+				variant: "outline",
+				className: `${Z.flipBtnV} `,
+				disabled: o,
+				onClick: () => {
+					p((e) => !e), v(), b(u, !f);
+				},
+				children: /* @__PURE__ */ (0, m.jsx)(se, { style: { color: f ? "var(--accent-blue)" : "var(--foreground)" } })
+			})]
+		}), /* @__PURE__ */ (0, m.jsx)(H, {
+			saving: o,
+			disabled: o || !u && !f,
+			onSave: async () => {
+				try {
+					s(!0);
+					let e = await a(h, u, f);
+					y(), l(() => {
+						r({
+							name: "Flip",
+							base64: e,
+							width: g,
+							height: _
+						});
+					}), b(!1, !1), d(!1), p(!1), i(!0);
+				} catch (e) {
+					console.error("Failed to process image:", e);
+				} finally {
+					s(!1);
+				}
+			},
+			onClose: () => {
+				n(null), v(), b(!1, !1), i(!0);
+			}
+		})]
 	});
-}, Ce = () => {
-	let { getLastHistoryItem: e, currentAction: t } = R(), n = s(null), r = s(null), { width: i, height: a, base64: o } = e(), c = t?.name === "crop", l = t?.name === "resize", u = c || l, d = (e) => {
-		n.current && (n.current.style.transform = `scale(${e / 100})`);
-	}, f = `frame ${u ? "mask" : ""}`, m = `frame-image ${u ? "frame-image--faded" : ""}`;
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
+}, Q = {
+	frame: "_frame_ihor9_1",
+	framePreview: "_framePreview_ihor9_13",
+	frameImage: "_frameImage_ihor9_25",
+	frameImageFaded: "_frameImageFaded_ihor9_30"
+}, Ve = () => {
+	let { getLastHistoryItem: e, currentAction: t } = N(), n = s(null), r = s(null), { width: i, height: a, base64: o } = e(), c = t?.name === "crop", l = t?.name === "resize", u = t?.name === "flip", d = c, f = `${Q.frame} ${d ? I.mask : ""}`, p = `${Q.frameImage} ${d ? Q.frameImageFaded : ""}`;
+	return /* @__PURE__ */ (0, m.jsxs)("div", {
 		className: f,
 		children: [
-			/* @__PURE__ */ (0, p.jsxs)("div", {
+			/* @__PURE__ */ (0, m.jsxs)("div", {
 				ref: n,
 				style: { aspectRatio: `${i} / ${a}` },
-				className: "frame-preview",
-				children: [/* @__PURE__ */ (0, p.jsx)("img", {
+				className: Q.framePreview,
+				children: [/* @__PURE__ */ (0, m.jsx)("img", {
 					ref: r,
 					src: o,
 					alt: "Image",
-					className: m
-				}), c && /* @__PURE__ */ (0, p.jsx)(pe, {}, t?.args?.id)]
+					className: p
+				}), c && /* @__PURE__ */ (0, m.jsx)(Oe, {}, t?.args?.id)]
 			}),
-			l && /* @__PURE__ */ (0, p.jsx)(Se, { onResizing: d }),
-			c && /* @__PURE__ */ (0, p.jsx)(me, {})
+			l && /* @__PURE__ */ (0, m.jsx)(_e, { frameRef: n }),
+			c && /* @__PURE__ */ (0, m.jsx)(je, {}),
+			u && /* @__PURE__ */ (0, m.jsx)(Be, { frameRef: n })
 		]
 	});
-}, we = () => {
-	let { getLastHistoryItem: e, setCurrentAction: t, setSidebar: n } = R(), { width: r, height: i } = e() ?? {
+}, $ = {
+	sidebar: "_sidebar_1obd8_1",
+	sidebarSettings: "_sidebarSettings_1obd8_11",
+	sidebarContainer: "_sidebarContainer_1obd8_25",
+	sidebarContent: "_sidebarContent_1obd8_31",
+	sidebarCloseBtn: "_sidebarCloseBtn_1obd8_47",
+	sidebarSeparator: "_sidebarSeparator_1obd8_52",
+	sidebarResize: "_sidebarResize_1obd8_56",
+	sidebarResizeIcon: "_sidebarResizeIcon_1obd8_61",
+	sidebarResizeSize: "_sidebarResizeSize_1obd8_66",
+	sidebarCrop: "_sidebarCrop_1obd8_70",
+	sidebarCropRatios: "_sidebarCropRatios_1obd8_75",
+	sidebarPreset: "_sidebarPreset_1obd8_80"
+}, He = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, setSidebar: n } = N(), { width: r, height: i } = e() ?? {
 		width: 0,
 		height: 0
 	};
-	return /* @__PURE__ */ (0, p.jsxs)(z, {
+	return /* @__PURE__ */ (0, m.jsxs)(F, {
 		variant: "outline",
-		className: "sidebar-resize",
+		className: $.sidebarResize,
 		onClick: () => {
 			t({
 				name: "resize",
@@ -1352,11 +1517,11 @@ var be = ({ imgRef: e, cropRef: t }) => {
 				}
 			}), n(!1);
 		},
-		children: [/* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "sidebar-resize-icon",
-			children: [/* @__PURE__ */ (0, p.jsx)(I, {}), "Resize"]
-		}), /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "sidebar-resize-size",
+		children: [/* @__PURE__ */ (0, m.jsxs)("div", {
+			className: $.sidebarResizeIcon,
+			children: [/* @__PURE__ */ (0, m.jsx)(ae, {}), "Resize"]
+		}), /* @__PURE__ */ (0, m.jsxs)("div", {
+			className: $.sidebarResizeSize,
 			children: [
 				r,
 				" x ",
@@ -1364,8 +1529,8 @@ var be = ({ imgRef: e, cropRef: t }) => {
 			]
 		})]
 	});
-}, Te = () => {
-	let { currentAction: e, setCurrentAction: t, getLastHistoryItem: n, setSidebar: r } = R(), { name: i, args: a } = e || {}, o = i === "crop" ? a?.id : "", { width: s, height: c } = n(), l = s / c, u = (e) => {
+}, Ue = () => {
+	let { currentAction: e, setCurrentAction: t, getLastHistoryItem: n, setSidebar: r } = N(), { name: i, args: a } = e || {}, o = i === "crop" ? a?.id : "", { width: s, height: c } = n(), l = s / c, u = (e) => {
 		e !== o && (t({
 			name: "crop",
 			args: {
@@ -1376,33 +1541,33 @@ var be = ({ imgRef: e, cropRef: t }) => {
 			}
 		}), r(!1));
 	};
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "sidebar-crop",
-		children: [/* @__PURE__ */ (0, p.jsx)("h4", { children: "Crop" }), /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "sidebar-crop-ratios",
+	return /* @__PURE__ */ (0, m.jsxs)("div", {
+		className: $.sidebarCrop,
+		children: [/* @__PURE__ */ (0, m.jsx)("h4", { children: "Crop" }), /* @__PURE__ */ (0, m.jsxs)("div", {
+			className: $.sidebarCropRatios,
 			children: [
-				/* @__PURE__ */ (0, p.jsx)(B, {
+				/* @__PURE__ */ (0, m.jsx)(L, {
 					label: "Freeform",
-					icon: /* @__PURE__ */ (0, p.jsx)(N, {}),
+					icon: /* @__PURE__ */ (0, m.jsx)(ne, {}),
 					active: o === "freeform",
 					onClick: () => u("freeform")
 				}),
-				/* @__PURE__ */ (0, p.jsx)(B, {
+				/* @__PURE__ */ (0, m.jsx)(L, {
 					label: "Original",
-					icon: /* @__PURE__ */ (0, p.jsx)(P, {}),
+					icon: /* @__PURE__ */ (0, m.jsx)(re, {}),
 					active: o === "original",
 					onClick: () => u("original")
 				}),
-				/* @__PURE__ */ (0, p.jsx)(B, {
+				/* @__PURE__ */ (0, m.jsx)(L, {
 					label: "1:1",
-					icon: /* @__PURE__ */ (0, p.jsx)(F, {}),
+					icon: /* @__PURE__ */ (0, m.jsx)(ie, {}),
 					active: o === "1:1",
 					onClick: () => u("1:1")
 				})
 			]
 		})]
 	});
-}, $ = [
+}, We = [
 	{
 		label: "Facebook",
 		value: "facebook",
@@ -1505,98 +1670,121 @@ var be = ({ imgRef: e, cropRef: t }) => {
 			}
 		]
 	}
-], Ee = $.map((e) => e.options).flat(), De = () => {
-	let { setCurrentAction: e, currentAction: t, setSidebar: n } = R(), r = t?.name === "crop" && Ee.some((e) => e.value === t.args.id) ? t.args.id : "";
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "sidebar-preset",
-		children: [/* @__PURE__ */ (0, p.jsx)("h4", { children: "Presets" }), /* @__PURE__ */ (0, p.jsx)("div", {
-			className: "relative",
-			children: /* @__PURE__ */ (0, p.jsx)(te, {
-				value: r,
-				placeholder: "Select a preset",
-				onChange: (t) => {
-					if (!t) return;
-					let r = $.map((e) => e.options).flat().find((e) => e.value === t);
-					if (!r) return;
-					let i = {
-						id: t,
-						ratio: r.w / r.h,
-						isFree: !1,
-						preset: {
-							w: r.w,
-							h: r.h
-						}
-					};
-					e({
-						name: "crop",
-						args: i
-					}), n(!1);
-				},
-				items: $
-			})
-		})]
+], Ge = We.map((e) => e.options).flat(), Ke = () => {
+	let { setCurrentAction: e, currentAction: t, setSidebar: n } = N(), r = t?.name === "crop" && Ge.some((e) => e.value === t.args.id) ? t.args.id : "";
+	return /* @__PURE__ */ (0, m.jsxs)("div", {
+		className: $.sidebarPreset,
+		children: [/* @__PURE__ */ (0, m.jsx)("h4", { children: "Presets" }), /* @__PURE__ */ (0, m.jsx)("div", { children: /* @__PURE__ */ (0, m.jsx)(de, {
+			value: r,
+			placeholder: "Select a preset",
+			onChange: (t) => {
+				if (!t) return;
+				let r = We.map((e) => e.options).flat().find((e) => e.value === t);
+				if (!r) return;
+				let i = {
+					id: t,
+					ratio: r.w / r.h,
+					isFree: !1,
+					preset: {
+						w: r.w,
+						h: r.h
+					}
+				};
+				e({
+					name: "crop",
+					args: i
+				}), n(!1);
+			},
+			items: We
+		}) })]
 	});
-}, Oe = () => {
-	let { getSidebar: e, setSidebar: t } = R(), n = e(), r = w("md");
-	return /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)(z, {
+}, qe = () => {
+	let { setCurrentAction: e, setSidebar: t } = N();
+	return /* @__PURE__ */ (0, m.jsx)(F, {
+		variant: "outline",
+		className: $.sidebarResize,
+		onClick: () => {
+			e({
+				name: "flip",
+				args: null
+			}), t(!1);
+		},
+		children: /* @__PURE__ */ (0, m.jsxs)("div", {
+			className: $.sidebarResizeIcon,
+			children: [/* @__PURE__ */ (0, m.jsx)(oe, {}), "Flip"]
+		})
+	});
+}, Je = () => {
+	let { getSidebar: e, setSidebar: t } = N(), n = e(), r = T("md");
+	return /* @__PURE__ */ (0, m.jsxs)(m.Fragment, { children: [/* @__PURE__ */ (0, m.jsx)(F, {
 		variant: "outline",
-		className: "sidebar-settings",
+		className: $.sidebarSettings,
 		onClick: () => t(!0),
-		children: /* @__PURE__ */ (0, p.jsx)(M, {})
-	}), /* @__PURE__ */ (0, p.jsx)("div", {
-		className: "sidebar",
+		children: /* @__PURE__ */ (0, m.jsx)(M, {})
+	}), /* @__PURE__ */ (0, m.jsx)("div", {
+		className: $.sidebar,
 		style: { transform: r && n ? "translateX(-320px)" : "translateX(0%)" },
-		children: /* @__PURE__ */ (0, p.jsx)("div", {
-			className: "sidebar-container",
-			children: /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "sidebar-content",
+		children: /* @__PURE__ */ (0, m.jsx)("div", {
+			className: $.sidebarContainer,
+			children: /* @__PURE__ */ (0, m.jsxs)("div", {
+				className: $.sidebarContent,
 				children: [
-					r && /* @__PURE__ */ (0, p.jsx)(z, {
+					r && /* @__PURE__ */ (0, m.jsx)(F, {
 						variant: "ghost",
-						className: "sidebar-close-btn btn-rect",
+						className: `${$.sidebarCloseBtn} ${P.rect}`,
 						onClick: () => t(!1),
-						children: /* @__PURE__ */ (0, p.jsx)(D, {})
+						children: /* @__PURE__ */ (0, m.jsx)(O, {})
 					}),
-					/* @__PURE__ */ (0, p.jsx)(we, {}),
-					/* @__PURE__ */ (0, p.jsx)(V, { className: "sidebar-separator" }),
-					/* @__PURE__ */ (0, p.jsx)(Te, {}),
-					/* @__PURE__ */ (0, p.jsx)(V, { className: "sidebar-separator" }),
-					/* @__PURE__ */ (0, p.jsx)(De, {})
+					/* @__PURE__ */ (0, m.jsx)(He, {}),
+					/* @__PURE__ */ (0, m.jsx)(R, { className: $.sidebarSeparator }),
+					/* @__PURE__ */ (0, m.jsx)(Ue, {}),
+					/* @__PURE__ */ (0, m.jsx)(R, { className: $.sidebarSeparator }),
+					/* @__PURE__ */ (0, m.jsx)(Ke, {}),
+					/* @__PURE__ */ (0, m.jsx)(R, { className: $.sidebarSeparator }),
+					/* @__PURE__ */ (0, m.jsx)(qe, {})
 				]
 			})
 		})
 	})] });
-}, ke = ({ image: e, onSave: t, onBack: n }) => {
-	let { loading: r, error: i, width: a, height: o, base64: s, extension: c } = y(e);
-	return r || i || !s || !c ? /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "picedi sys",
-		children: [
-			r && /* @__PURE__ */ (0, p.jsx)(m, { size: 48 }),
-			i && /* @__PURE__ */ (0, p.jsx)("div", {
-				className: "text-red",
-				children: i
-			}),
-			!r && !i && (!s || !c) && /* @__PURE__ */ (0, p.jsx)("div", {
-				className: "text-red",
-				children: "Failed to load image."
+}, Ye = ({ image: e, onSave: t, onBack: n, theme: r = "light" }) => {
+	let { loading: i, error: a, width: o, height: s, base64: c, extension: l } = b(e);
+	return i || a || !c || !l ? /* @__PURE__ */ (0, m.jsx)("div", {
+		className: `${I.root} ${I.wrapper}`,
+		"data-theme": r,
+		children: /* @__PURE__ */ (0, m.jsxs)("div", {
+			className: I.system,
+			children: [
+				i && /* @__PURE__ */ (0, m.jsx)(h, { size: 48 }),
+				a && /* @__PURE__ */ (0, m.jsx)("div", {
+					className: I.textRed,
+					children: a
+				}),
+				!i && !a && (!c || !l) && /* @__PURE__ */ (0, m.jsx)("div", {
+					className: I.textRed,
+					children: "Failed to load image."
+				})
+			]
+		})
+	}) : /* @__PURE__ */ (0, m.jsx)(v, {
+		base64: c,
+		width: o,
+		height: s,
+		ext: l,
+		children: /* @__PURE__ */ (0, m.jsx)("div", {
+			className: `${I.root} ${I.wrapper}`,
+			"data-theme": r,
+			children: /* @__PURE__ */ (0, m.jsxs)("div", {
+				className: I.main,
+				children: [/* @__PURE__ */ (0, m.jsx)(he, {
+					onSave: t,
+					onBack: n
+				}), /* @__PURE__ */ (0, m.jsxs)("div", {
+					className: I.grid,
+					children: [/* @__PURE__ */ (0, m.jsx)(Ve, {}), /* @__PURE__ */ (0, m.jsx)(Je, {})]
+				})]
 			})
-		]
-	}) : /* @__PURE__ */ (0, p.jsx)(_, {
-		base64: s,
-		width: a,
-		height: o,
-		ext: c,
-		children: /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "picedi main",
-			children: [/* @__PURE__ */ (0, p.jsx)(re, {
-				onSave: t,
-				onBack: n
-			}), /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "grid",
-				children: [/* @__PURE__ */ (0, p.jsx)(Ce, {}), /* @__PURE__ */ (0, p.jsx)(Oe, {})]
-			})]
 		})
 	});
 };
 //#endregion
-export { ke as ImageEditor };
+export { Ye as Pixedi };