react-exercise-playground/dist/PlaygroundSandbox.mjs

react-exercise-playground是一个react在线代码编辑器可实时预览运行效果

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('._loader_z4rlz_1,._loader_z4rlz_1:after{width:10px;height:10px;border-radius:50%}._loader_z4rlz_1{position:relative;border-top:2px solid rgba(255,255,255,.2);border-right:2px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.2);border-left:2px solid var(--primary);transform:translateZ(0);animation:_load8_z4rlz_1 .3s infinite linear}@keyframes _load8_z4rlz_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.react-playground-editor{height:100%;overflow:hidden;background-color:var(--border)}.react-playground-editor.hidden{display:none}.react-playground-editor-types-loading{position:absolute;top:41px;right:2px}.dark .react-playground-editor{height:100%;overflow:hidden;background-color:var(--border)}.dark .react-playground-editor .jsx-tag-angle-bracket{color:gray}.dark .react-playground-editor .jsx-text{color:#d4d4d4}.dark .react-playground-editor .jsx-tag-name{color:#569cd6}.dark .react-playground-editor .jsx-tag-attribute-key{color:#9cdcfe}.light .react-playground-editor{height:100%;overflow:hidden;background-color:var(--border)}.light .react-playground-editor .jsx-tag-angle-bracket{color:maroon}.light .react-playground-editor .jsx-text{color:#000}.light .react-playground-editor .jsx-tag-name{color:maroon}.light .react-playground-editor .jsx-tag-attribute-key{color:red}._dialog_eaiwm_1{top:15%;left:50%;min-width:200px;padding:20px 30px;font-size:14px;color:var(--base);background-color:var(--dialog);border:none;border-radius:4px;transform:translate(-50%)}._dialog-footer_eaiwm_13{display:flex;justify-content:flex-end;align-items:center;padding-top:15px}._dialog-footer_eaiwm_13 button{padding:4px 15px;font-size:14px;color:var(--base);cursor:pointer;background:transparent;border:none;border-radius:4px;outline:none}._dialog-footer_eaiwm_13 ._dialog-btn_eaiwm_29{margin-left:4px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.12);background:var(--primary);border-color:var(--primary);box-shadow:0 2px #0000000b}._content_eaiwm_37{display:flex;align-items:center}._content_eaiwm_37 svg{margin-right:16px;font-size:20px;color:#d89614}._tabs_16nwc_1{display:flex;width:100%;height:38px;overflow:auto hidden;color:var(--base);background-color:var(--bg);flex-shrink:0;align-items:center;border-bottom:1px solid var(--border);box-sizing:border-box}._tabs_16nwc_1::-webkit-scrollbar{height:1px}._tabs_16nwc_1::-webkit-scrollbar-track{background-color:var(--border)}._tabs_16nwc_1::-webkit-scrollbar-thumb{background-color:var(--primary)}._tabs_16nwc_1 ._tab-item_16nwc_22{display:inline-flex;padding:8px 10px 6px;font-size:13px;line-height:20px;cursor:pointer;align-items:center;border-bottom:3px solid transparent;flex-shrink:0}._tabs_16nwc_1 ._tab-item_16nwc_22._actived_16nwc_32{color:var(--primary);border-bottom:3px solid var(--primary)}._tabs_16nwc_1 ._tab-item_16nwc_22:first-child{cursor:text}._tabs_16nwc_1 ._import-map-wrapper_16nwc_39{position:sticky;top:0;right:0;padding-left:10px;margin-left:auto;background-color:var(--bg);flex-shrink:0}._tabs_16nwc_1 ._import-map-wrapper_16nwc_39 ._tab-item_16nwc_22{cursor:pointer!important}._tabs_16nwc_1 ._add_16nwc_51{display:flex;width:38px;height:100%;font-size:18px;color:var(--base);cursor:pointer;justify-content:center;align-items:center;border-bottom:3px solid transparent}._tabs_16nwc_1 ._add_16nwc_51:hover{color:var(--primary)}._tabs-item-input_16nwc_65{z-index:11;width:90px;padding:4px 0 4px 10px;font-size:13px;color:var(--base);background-color:var(--border);border:1px solid var(--border);border-radius:4px;outline:none}._input-mask_16nwc_76{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;cursor:pointer;background-color:#0006}._msg_1t9wq_1{position:absolute;right:8px;bottom:0;left:8px;z-index:10;display:flex;max-height:calc(100% - 300px);min-height:40px;margin-bottom:8px;color:var(--color);white-space:pre-wrap;background-color:var(--bg-color);border:2px solid transparent;border-radius:6px;align-items:stretch;border-color:var(--color)}._msg_1t9wq_1._error_1t9wq_19{--color: #f56c6c;--bg-color: #fef0f0}._msg_1t9wq_1._warn_1t9wq_23{--color: #e6a23c;--bg-color: #fdf6ec}pre{padding:12px 20px;margin:0;overflow:auto;white-space:break-spaces}._dismiss_1t9wq_33{position:absolute;top:2px;right:2px;display:block;width:18px;height:18px;padding:0;font-size:9px;line-height:18px;color:var(--bg-color);text-align:center;cursor:pointer;background-color:var(--color);border:none;border-radius:9px}._header_1whkb_1{position:relative;z-index:999;display:flex;height:50px;padding:0 1em;color:var(--base);background-color:var(--bg);box-sizing:border-box;align-items:center;box-shadow:0 0 4px var(--box-shadow);border-bottom:1px solid var(--border);justify-content:space-between}._header_1whkb_1 ._logo_1whkb_15{display:flex;font-size:20px;align-items:center}._header_1whkb_1 ._logo_1whkb_15 img{height:24px;margin-right:10px}._header_1whkb_1 ._links_1whkb_24{display:flex;height:100%}._header_1whkb_1 ._links_1whkb_24 button{display:flex;width:34px;height:100%;padding:0 6px;margin-left:4px;cursor:pointer;background-color:transparent;border:none;outline:none;align-items:center}._header_1whkb_1 ._links_1whkb_24 button>svg{color:#666}._header_1whkb_1 ._links_1whkb_24 button._theme_1whkb_43>svg{width:18px;height:18px}._tabs_1vzew_1{display:flex;width:100%;height:38px;color:var(--base);background-color:var(--bg);align-items:center;border-bottom:1px solid var(--border);box-sizing:border-box}._tabs_1vzew_1 ._tab-item_1vzew_11{display:inline-block;padding:8px 10px 6px;font-size:13px;line-height:20px;cursor:pointer;border-bottom:3px solid transparent;flex-shrink:0}._tabs_1vzew_1 ._tab-item_1vzew_11._actived_1vzew_20{border-bottom:3px solid var(--primary)}._collapse-left_1la7y_1{position:absolute;top:0;z-index:1;display:flex;width:20px;height:100%;align-items:center;right:0;justify-content:end}._collapse-left_1la7y_1:hover ._collapse-btn_1la7y_12{display:flex}._collapse-left_1la7y_1 ._collapse-btn_1la7y_12{position:relative;display:none;width:10px;height:48px;cursor:pointer;background-color:#e7e9e8;border-radius:4px 0 0 4px}._collapse-left_1la7y_1 ._collapse-btn_1la7y_12:after{position:absolute;top:50%;left:50%;width:0;height:0;content:"";border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%) translateY(-50%);border-right:6px solid #000}._collapse-right_1la7y_36{position:absolute;top:0;z-index:1;display:flex;width:20px;height:100%;align-items:center;left:0;justify-content:start}._collapse-right_1la7y_36:hover ._collapse-btn_1la7y_12{display:flex}._collapse-right_1la7y_36 ._collapse-btn_1la7y_12{position:relative;display:none;width:10px;height:48px;cursor:pointer;background-color:#e7e9e8;border-radius:0 4px 4px 0}._collapse-right_1la7y_36 ._collapse-btn_1la7y_12:after{position:absolute;top:50%;left:50%;width:0;height:0;content:"";border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%) translateY(-50%);border-left:6px solid #000}._collapse-left_1la7y_1._active_1la7y_71 ._collapse-btn_1la7y_12,._collapse-right_1la7y_36._active_1la7y_71 ._collapse-btn_1la7y_12{display:flex;opacity:0;transition:opacity .2s ease-in-out}._collapse-left_1la7y_1:hover._active_1la7y_71 ._collapse-btn_1la7y_12,._collapse-right_1la7y_36:hover._active_1la7y_71 ._collapse-btn_1la7y_12{opacity:1}:root{--separator-border: rgba(128, 128, 128, .35)}.allotment-module_splitView__L-yRc{height:100%;overflow:hidden;position:relative;width:100%}.allotment-module_splitView__L-yRc>.allotment-module_sashContainer__fzwJF{height:100%;pointer-events:none;position:absolute;width:100%}.allotment-module_splitView__L-yRc>.allotment-module_sashContainer__fzwJF>.allotment-module_sash__QA-2t{pointer-events:auto}.allotment-module_splitView__L-yRc>.allotment-module_splitViewContainer__rQnVa{height:100%;position:relative;white-space:nowrap;width:100%}.allotment-module_splitView__L-yRc>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O{overflow:hidden;position:absolute;white-space:initial}.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O{width:100%}.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O{height:100%}.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O:not(:first-child):before{background-color:var(--separator-border);content:" ";left:0;pointer-events:none;position:absolute;top:0;z-index:5}.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_vertical__WSwwa>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O:not(:first-child):before{height:1px;width:100%}.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_horizontal__7doS8>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O:not(:first-child):before{height:100%;width:1px}:root{--focus-border: #007fd4;--sash-size: 8px;--sash-hover-size: 4px}.sash-module_sash__K-9lB{position:absolute;z-index:35;touch-action:none;pointer-events:auto;text-align:initial}.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx{pointer-events:none}.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_vertical__pB-rs{cursor:col-resize}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_minimum__-UKxp{cursor:e-resize}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_maximum__TCWxD{cursor:w-resize}.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_horizontal__kFbiw{cursor:row-resize}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_minimum__-UKxp{cursor:s-resize}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_maximum__TCWxD{cursor:n-resize}.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx{cursor:default!important;pointer-events:none!important}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs{cursor:ew-resize;top:0;width:var(--sash-size);height:100%}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw{cursor:ns-resize;left:0;width:100%;height:var(--sash-size)}.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-{content:" ";height:calc(var(--sash-size) * 2);width:calc(var(--sash-size) * 2);z-index:100;display:block;cursor:all-scroll;position:absolute}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R{cursor:nwse-resize}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk{cursor:nesw-resize}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk{left:calc(var(--sash-size) * -.5);top:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R{left:calc(var(--sash-size) * -.5);bottom:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk{top:calc(var(--sash-size) * -.5);left:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R{top:calc(var(--sash-size) * -.5);right:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB:before{content:"";pointer-events:none;position:absolute;width:100%;height:100%;transition:background-color .1s ease-out;background:transparent}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs:before{width:var(--sash-hover-size);left:calc(50% - (var(--sash-hover-size) / 2))}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw:before{height:var(--sash-hover-size);top:calc(50% - (var(--sash-hover-size) / 2))}.sash-module_sash__K-9lB.sash-module_hover__80W6I:before,.sash-module_sash__K-9lB.sash-module_active__bJspD:before{background:var(--focus-border)}div[data-id=react-playground].light{--base: #444;--bg: #fff;--border: #ddd;--box-shadow: #00000054;--primary: #00d8fe;--dialog: #fff}div[data-id=react-playground].dark{--base: #ddd;--bg: #1a1a1a;--border: #383838;--box-shadow: #0000;--primary: #00d8fe;--dialog: #2a2a2a}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
import { S as o } from "./index-9d03cee5.mjs";
import "react";
const n = o;
export {
  n as PlaygroundSandbox
};