@immediately-run/sandpack-react 2.20.0

package/dist/styles.css

@@ -0,0 +1,890 @@
+@keyframes shared_fadeIn__1k8iis4 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.shared_iconStandaloneClassName__1k8iis0 svg {
+  margin: auto;
+}
+.shared_buttonClassName__1k8iis1 {
+  appearance: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  transition: color var(--sp-transitions-default), background var(--sp-transitions-default);
+  cursor: pointer;
+  color: var(--sp-colors-clickable);
+  border: 0;
+  text-decoration: none;
+}
+.shared_buttonClassName__1k8iis1:disabled {
+  color: var(--sp-colors-disabled);
+}
+.shared_buttonClassName__1k8iis1:hover:not(:disabled,[data-active='true']) {
+  color: var(--sp-colors-hover);
+}
+.shared_buttonClassName__1k8iis1[data-active="true"] {
+  color: var(--sp-colors-accent);
+}
+.shared_buttonClassName__1k8iis1.shared_iconStandaloneClassName__1k8iis0 {
+  padding: var(--sp-space-1);
+  height: var(--sp-space-7);
+  display: flex;
+}
+.shared_buttonClassName__1k8iis1.shared_iconStandaloneClassName__1k8iis0.shared_buttonClassName__1k8iis1:not(:has(span)) {
+  width: var(--sp-space-7);
+}
+.shared_buttonClassName__1k8iis1.shared_iconStandaloneClassName__1k8iis0.shared_buttonClassName__1k8iis1:has(svg + span) {
+  padding-right: var(--sp-space-3);
+  padding-left: var(--sp-space-2);
+  gap: var(--sp-space-1);
+}
+.shared_buttonClassName__1k8iis1 svg {
+  min-width: var(--sp-space-4);
+  width: var(--sp-space-4);
+  height: var(--sp-space-4);
+}
+.shared_roundedButtonClassName__1k8iis2 {
+  background-color: var(--sp-colors-surface2);
+  border-radius: 99999px;
+  border: 1px solid var(--sp-colors-surface3);
+}
+.shared_roundedButtonClassName__1k8iis2[data-active="true"] {
+  color: var(--sp-colors-surface1);
+  background: var(--sp-colors-accent);
+}
+.shared_roundedButtonClassName__1k8iis2:hover:not(:disabled,[data-active='true']) {
+  background-color: var(--sp-colors-surface3);
+}
+.shared_iconClassName__1k8iis3 {
+  padding: 0;
+}
+.shared_absoluteClassName__1k8iis5 {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  margin: 0;
+  overflow: auto;
+  height: 100%;
+  z-index: var(--sp-zIndices-top);
+}
+.shared_errorBaseClassName__1k8iis6 {
+  white-space: pre-wrap;
+  padding: var(--sp-space-10);
+  background-color: var(--sp-colors-surface1);
+  display: flex;
+  gap: var(--sp-space-2);
+  flex-direction: column;
+}
+.shared_errorBaseClassName__1k8iis6 .shared_buttonClassName__1k8iis1 {
+  width: auto;
+  gap: var(--sp-space-2);
+  padding: 0 var(--sp-space-3) 0 var(--sp-space-2);
+  margin-top: var(--sp-space-1);
+}
+.shared_errorClassName_solidBg_true__1k8iis8 {
+  background-color: var(--sp-colors-errorSurface);
+}
+.shared_errorBundlerClassName__1k8iis9 {
+  padding: var(--sp-space-10);
+  background-color: var(--sp-colors-surface1);
+}
+.shared_errorBundlerClassName__1k8iis9 .shared_buttonClassName__1k8iis1 {
+  margin-top: var(--sp-space-6);
+  width: auto;
+  gap: var(--sp-space-2);
+  padding: 0 var(--sp-space-3) 0 var(--sp-space-2);
+}
+.shared_errorMessageBaseClassName__1k8iisa {
+  animation: shared_fadeIn__1k8iis4 150ms ease;
+  color: var(--sp-colors-error);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-space-3);
+}
+.shared_errorMessageBaseClassName__1k8iisa a {
+  color: inherit;
+}
+.shared_errorMessageBaseClassName__1k8iisa p {
+  margin: 0;
+}
+.shared_errorMessageClassName_errorCode_true__1k8iisc {
+  font-family: var(--sp-font-mono);
+}
+.styles_placeholderClassName__1158igi0 {
+  margin: 0;
+  display: block;
+  font-family: var(--sp-font-mono);
+  font-size: var(--sp-font-size);
+  color: var(--sp-syntax-color-plain);
+  line-height: var(--sp-font-lineHeight);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-string {
+  color: var(--sp-syntax-color-string);
+  font-style: var(--sp-syntax-fontStyle-string);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-plain {
+  color: var(--sp-syntax-color-plain);
+  font-style: var(--sp-syntax-fontStyle-plain);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-comment {
+  color: var(--sp-syntax-color-comment);
+  font-style: var(--sp-syntax-fontStyle-comment);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-keyword {
+  color: var(--sp-syntax-color-keyword);
+  font-style: var(--sp-syntax-fontStyle-keyword);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-definition {
+  color: var(--sp-syntax-color-definition);
+  font-style: var(--sp-syntax-fontStyle-definition);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-punctuation {
+  color: var(--sp-syntax-color-punctuation);
+  font-style: var(--sp-syntax-fontStyle-punctuation);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-property {
+  color: var(--sp-syntax-color-property);
+  font-style: var(--sp-syntax-fontStyle-property);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-tag {
+  color: var(--sp-syntax-color-tag);
+  font-style: var(--sp-syntax-fontStyle-tag);
+}
+.styles_tokensClassName__1158igi1 .sp-syntax-static {
+  color: var(--sp-syntax-color-static);
+  font-style: var(--sp-syntax-fontStyle-static);
+}
+.styles_editorClassName__1158igi2 {
+  flex: 1;
+  position: relative;
+  overflow: auto;
+  background: var(--sp-colors-surface1);
+}
+.styles_editorClassName__1158igi2 .cm-scroller {
+  padding: var(--sp-space-4) 0;
+}
+.styles_editorClassName__1158igi2 .styles_placeholderClassName__1158igi0 {
+  padding: var(--sp-space-4) 0;
+}
+.styles_cmClassName__1158igi3 {
+  margin: 0;
+  outline: none;
+  height: 100%;
+}
+.styles_readOnlyClassName__1158igi4 {
+  font-family: var(--sp-font-mono);
+  font-size: 0.8em;
+  position: absolute;
+  right: var(--sp-space-2);
+  bottom: var(--sp-space-2);
+  z-index: var(--sp-zIndices-top);
+  color: var(--sp-colors-clickable);
+  background-color: var(--sp-colors-surface2);
+  border-radius: 99999px;
+  padding: calc(var(--sp-space-1) / 2) var(--sp-space-2);
+}
+.styles_readOnlyClassName__1158igi4 + .shared_buttonClassName__1k8iis1 {
+  right: calc(var(--sp-space-11) * 2);
+}
+@media screen and (max-width: 768px) {
+  @supports (-webkit-overflow-scrolling: touch) {
+    .styles_editorClassName__1158igi2 .cm-content {
+      font-size: 16px;
+    }
+  }
+}
+.FileExplorer_fileExplorerClassName__1pwpsvh0 {
+  padding: var(--sp-space-3);
+  overflow: auto;
+  height: 100%;
+}
+.File_explorerClassName__8d8oz50 {
+  border-radius: 0;
+  width: 100%;
+  padding: 0;
+  margin-bottom: var(--sp-space-2);
+}
+.File_explorerClassName__8d8oz50 span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.File_explorerClassName__8d8oz50 svg {
+  margin-right: var(--sp-space-1);
+}
+.FileTabs_tabsClassName__1m6ibz50 {
+  border-bottom: 1px solid var(--sp-colors-surface2);
+  background: var(--sp-colors-surface1);
+}
+.FileTabs_tabsScrollableClassName__1m6ibz51 {
+  padding: 0 var(--sp-space-2);
+  overflow: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  min-height: 40px;
+  margin-bottom: -1px;
+}
+.FileTabs_closeButtonClassName__1m6ibz52 {
+  padding: 0 var(--sp-space-1) 0 var(--sp-space-1);
+  border-radius: var(--sp-border-radius);
+  margin-left: var(--sp-space-1);
+  width: var(--sp-space-5);
+  visibility: hidden;
+  cursor: pointer;
+  position: absolute;
+  right: 0px;
+}
+.FileTabs_closeButtonClassName__1m6ibz52 svg {
+  width: var(--sp-space-3);
+  height: var(--sp-space-3);
+  display: block;
+  position: relative;
+  top: 1px;
+}
+.FileTabs_tabContainer__1m6ibz53 {
+  display: flex;
+  align-items: center;
+  outline: none;
+  position: relative;
+  padding-right: 20px;
+  margin: 1px 0;
+}
+.FileTabs_tabContainer__1m6ibz53:has(button:focus) {
+  outline: var(--sp-colors-accent) auto 1px;
+}
+.FileTabs_tabButton__1m6ibz54 {
+  padding: 0 var(--sp-space-2);
+  height: var(--sp-layout-headerHeight);
+  white-space: nowrap;
+}
+.FileTabs_tabButton__1m6ibz54:focus {
+  outline: none;
+}
+.FileTabs_tabButton__1m6ibz54:hover ~ .FileTabs_closeButtonClassName__1m6ibz52 {
+  visibility: visible;
+}
+.Navigator_navigatorClassName__ea2c3l0 {
+  display: flex;
+  align-items: center;
+  height: var(--sp-layout-headerHeight);
+  border-bottom: 1px solid var(--sp-colors-surface2);
+  padding: var(--sp-space-3) var(--sp-space-2);
+  background: var(--sp-colors-surface1);
+}
+.Navigator_inputClassName__ea2c3l1 {
+  background-color: var(--sp-colors-surface2);
+  color: var(--sp-colors-clickable);
+  padding: var(--sp-space-1) var(--sp-space-3);
+  border-radius: 99999px;
+  border: 1px solid var(--sp-colors-surface2);
+  height: 24px;
+  line-height: 24px;
+  font-size: inherit;
+  outline: none;
+  flex: 1;
+  margin-left: var(--sp-space-4);
+  width: 0;
+  transition: background var(--sp-transitions-default);
+}
+.Navigator_inputClassName__ea2c3l1:hover {
+  background-color: var(--sp-colors-surface3);
+}
+.Navigator_inputClassName__ea2c3l1:focus {
+  background-color: var(--sp-colors-surface1);
+  border: 1px solid var(--sp-colors-accent);
+  color: var(--sp-colors-base);
+}
+.Navigator_navigatorButtonClassName__ea2c3l2 {
+  min-width: var(--sp-space-6);
+  justify-content: center;
+}
+.TranspiledCode_transpiledCodeClassName__171z4by0 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  overflow: auto;
+  min-height: 160px;
+  flex: 1;
+}
+.TranspiledCode_transpiledCodeClassName__171z4by0 .sp-stack {
+  height: 100%;
+}
+.themeContext_wrapperClassName__o6teyx0 {
+  all: initial;
+  font-size: var(--sp-font-size);
+  font-family: var(--sp-font-body);
+  display: block;
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+.themeContext_wrapperClassName__o6teyx0.sp-wrapper:focus {
+  outline: 0;
+}
+.themeContext_wrapperClassName_variant_dark__o6teyx1 {
+  color-scheme: dark;
+}
+.themeContext_wrapperClassName_variant_light__o6teyx2 {
+  color-scheme: light;
+}
+.sp-wrapper * {
+  box-sizing: border-box;
+}
+@media screen and (min-resolution: 2dppx) {
+  .themeContext_wrapperClassName__o6teyx0 {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+.ConsoleList_consoleItemBaseClassName__a55oje0 {
+  width: 100%;
+  padding: var(--sp-space-3) var(--sp-space-2);
+  font-size: .8em;
+  position: relative;
+}
+.ConsoleList_consoleItemBaseClassName__a55oje0:not(:first-child):after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--sp-colors-surface3);
+}
+.ConsoleList_consoleItemBaseClassName__a55oje0 .sp-cm {
+  padding: 0;
+}
+.ConsoleList_consoleItemBaseClassName__a55oje0 .cm-editor {
+  background: none;
+}
+.ConsoleList_consoleItemBaseClassName__a55oje0 .cm-content {
+  padding: 0;
+}
+.ConsoleList_consoleItemBaseClassName__a55oje0 .sp-pre-placeholder {
+  margin: 0 !important;
+  font-size: 1em;
+}
+.ConsoleList_consoleItemClassName_variant_error__a55oje2 {
+  color: var(--sp-colors-error);
+  background: var(--sp-colors-errorSurface);
+}
+.ConsoleList_consoleItemClassName_variant_error__a55oje2:not(:first-child):after {
+  background: var(--sp-colors-error);
+  opacity: 0.07;
+}
+.ConsoleList_consoleItemClassName_variant_warning__a55oje3 {
+  color: var(--sp-colors-warning);
+  background: var(--sp-colors-warningSurface);
+}
+.ConsoleList_consoleItemClassName_variant_warning__a55oje3:not(:first-child):after {
+  background: var(--sp-colors-warning);
+  opacity: 0.07;
+}
+.ConsoleList_consoleItemClassName_variant_clear__a55oje4 {
+  font-style: italic;
+}
+.SandpackConsole_consoleWrapperClassName__1rwyb0b0 {
+  height: 100%;
+  background: var(--sp-colors-surface1);
+}
+.SandpackConsole_consoleWrapperClassName__1rwyb0b0 iframe {
+  display: none;
+}
+.SandpackConsole_consoleWrapperClassName__1rwyb0b0 .sp-bridge-frame {
+  display: block;
+  border: 0;
+  position: absolute;
+  left: var(--sp-space-2);
+  bottom: var(--sp-space-2);
+  z-index: var(--sp-zIndices-top);
+  height: 12px;
+  width: 30%;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+}
+.SandpackConsole_consoleListClassName__1rwyb0b1 {
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+.SandpackConsole_consoleActionsClassName__1rwyb0b2 {
+  position: absolute;
+  bottom: var(--sp-space-2);
+  right: var(--sp-space-2);
+  display: flex;
+  gap: var(--sp-space-2);
+}
+.Header_wrapperClassName__168y0ls0 {
+  justify-content: space-between;
+  border-bottom: 1px solid var(--sp-colors-surface2);
+  padding: 0 var(--sp-space-2);
+  font-family: var(--sp-font-mono);
+  height: var(--sp-layout-headerHeight);
+  min-height: var(--sp-layout-headerHeight);
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.Header_flexClassName__168y0ls1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--sp-space-2);
+}
+.Header_headerButtonClassName__168y0ls2 {
+  padding: var(--sp-space-1) var(--sp-space-3);
+}
+.Header_headerTitleClassName__168y0ls3 {
+  line-height: 1;
+  margin: 0;
+  color: var(--sp-colors-base);
+  font-size: var(--sp-font-size);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-space-2);
+}
+.Preview_previewClassName__okq46l0 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  overflow: auto;
+  position: relative;
+}
+.Preview_previewClassName__okq46l0 .sp-bridge-frame {
+  border: 0;
+  position: absolute;
+  left: var(--sp-space-2);
+  bottom: var(--sp-space-2);
+  z-index: var(--sp-zIndices-top);
+  height: 12px;
+  width: 30%;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+}
+.Preview_previewIframe__okq46l1 {
+  border: 0;
+  outline: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 160px;
+  max-height: 2000px;
+  flex: 1;
+}
+.Preview_previewActionsClassName__okq46l2 {
+  display: flex;
+  position: absolute;
+  bottom: var(--sp-space-2);
+  right: var(--sp-space-2);
+  z-index: var(--sp-zIndices-overlay);
+  gap: var(--sp-space-2);
+}
+.Header_wrapperClassName__980zcy0 {
+  justify-content: space-between;
+  border-bottom: 1px solid var(--sp-colors-surface2);
+  padding: 0 var(--sp-space-2);
+  font-family: var(--sp-font-mono);
+  height: var(--sp-layout-headerHeight);
+  min-height: var(--sp-layout-headerHeight);
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.Header_flexClassName__980zcy1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--sp-space-2);
+}
+.Header_headerButtonClassName__980zcy2 {
+  padding: var(--sp-space-1) var(--sp-space-3);
+}
+.Header_headerTitleClassName__980zcy3 {
+  line-height: 1;
+  margin: 0;
+  color: var(--sp-colors-base);
+  font-size: var(--sp-font-size);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-space-2);
+}
+.SandpackTests_previewActionsClassName__15f2eyn0 {
+  display: flex;
+  position: absolute;
+  bottom: var(--sp-space-2);
+  right: var(--sp-space-2);
+  z-index: var(--sp-zIndices-overlay);
+}
+.SandpackTests_previewActionsClassName__15f2eyn0 > * {
+  margin-left: var(--sp-space-2);
+}
+.SandpackTests_containerClassName__15f2eyn1 {
+  padding: var(--sp-space-4);
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-family: var(--sp-font-mono);
+}
+.SandpackTests_fileErrorContainerClassName__15f2eyn2 {
+  font-weight: bold;
+  color: var(--sp-colors-base);
+}
+.Describes_nameClassName__x4qg2e0 {
+  color: var(--sp-colors-hover);
+  margin-bottom: var(--sp-space-2);
+}
+.Describes_containerClassName__x4qg2e1 {
+  margin-left: var(--sp-space-4);
+}
+.FormattedError_containerClassName__wotmtq0 {
+  color: var(--sp-colors-hover);
+  font-size: var(--sp-font-size);
+  padding: var(--sp-space-2);
+  white-space: pre-wrap;
+}
+.style_color_status_pass__yw4byb1 {
+  color: var(--test-pass);
+}
+.style_color_status_fail__yw4byb2 {
+  color: var(--test-fail);
+}
+.style_color_status_skip__yw4byb3 {
+  color: var(--test-skip);
+}
+.style_color_status_title__yw4byb4 {
+  color: var(--test-title);
+}
+.style_background_status_pass__yw4byb6 {
+  background: var(--test-pass);
+  color: var(--sp-colors-surface1);
+}
+.style_background_status_fail__yw4byb7 {
+  background: var(--test-fail);
+  color: var(--sp-colors-surface1);
+}
+.style_background_status_run__yw4byb8 {
+  background: var(--test-run);
+  color: var(--sp-colors-surface1);
+}
+.Tests_testContainerClassName__h69kcf0 {
+  margin-left: var(--sp-space-4);
+}
+.Tests_containerClassName__h69kcf1 {
+  margin-bottom: var(--sp-space-2);
+  color: var(--sp-colors-clickable);
+}
+.Tests_testClassName__h69kcf2 {
+  margin-bottom: var(--sp-space-2);
+  color: var(--sp-colors-hover);
+}
+.Tests_durationClassName__h69kcf3 {
+  margin-left: var(--sp-space-2);
+}
+.Tests_gapRightClassName__h69kcf4 {
+  margin-right: var(--sp-space-2);
+}
+.Specs_fileContainer__bnnkgt0 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: var(--sp-space-2);
+}
+.Specs_gapBottomClassName__bnnkgt1 {
+  margin-bottom: var(--sp-space-2);
+}
+.Specs_failTestClassName__bnnkgt2 {
+  font-weight: bold;
+}
+.Specs_labelClassName__bnnkgt3 {
+  border-radius: calc(var(--sp-border-radius) / 2);
+}
+.Specs_specLabelClassName__bnnkgt4 {
+  padding: var(--sp-space-1) var(--sp-space-2);
+  font-family: var(--sp-font-mono);
+  text-transform: uppercase;
+  margin-right: var(--sp-space-2);
+}
+.Specs_filePathButtonClassName__bnnkgt5 {
+  font-family: var(--sp-font-mono);
+  cursor: pointer;
+  display: inline-block;
+}
+.Specs_filePathClassName__bnnkgt6 {
+  color: var(--sp-colors-clickable);
+  text-decoration-style: dotted;
+  text-decoration-line: underline;
+}
+.Specs_fileNameClassName__bnnkgt7 {
+  color: var(--sp-colors-hover);
+  font-weight: bold;
+  text-decoration-style: dotted;
+  text-decoration-line: underline;
+}
+.Summary_gapBottomClassName__fw7v4p0 {
+  margin-bottom: var(--sp-space-2);
+}
+.Summary_labelClassName__fw7v4p1 {
+  font-weight: bold;
+  color: var(--sp-colors-hover);
+  white-space: pre-wrap;
+}
+.Summary_containerClassName__fw7v4p2 {
+  font-weight: bold;
+  color: var(--sp-colors-clickable);
+}
+.Stack_stackClassName__1meovy70 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  background-color: var(--sp-colors-surface1);
+  gap: 1px;
+}
+.Stack_stackClassName__1meovy70:has(.sp-stack) {
+  background-color: var(--sp-colors-surface2);
+}
+.StdoutList_consoleItemClassName__uwwcmc0 {
+  width: 100%;
+  padding: var(--sp-space-3) var(--sp-space-2);
+  font-size: .85em;
+  position: relative;
+  white-space: pre;
+}
+.StdoutList_consoleItemClassName__uwwcmc0:not(:first-child):after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--sp-colors-surface3);
+}
+@keyframes Loading_cubeRotate__1rpktzp2 {
+  0% {
+    transform: rotateX(-25.5deg) rotateY(45deg);
+  }
+  100% {
+    transform: rotateX(-25.5deg) rotateY(405deg);
+  }
+}
+.Loading_cubeClassName__1rpktzp0 {
+  transform: translate(-4px, 9px) scale(0.13, 0.13);
+}
+.Loading_cubeClassName__1rpktzp0 * {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+}
+.Loading_wrapperClassName__1rpktzp1 {
+  position: absolute;
+  right: var(--sp-space-2);
+  bottom: var(--sp-space-2);
+  z-index: var(--sp-zIndices-top);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sp-border-radius);
+}
+.Loading_wrapperClassName__1rpktzp1 .Loading_cubeClassName__1rpktzp0 {
+  display: flex;
+}
+.Loading_wrapperClassName__1rpktzp1 .sp-button.shared_buttonClassName__1k8iis1 {
+  display: none;
+}
+.Loading_wrapperClassName__1rpktzp1:hover .sp-button.shared_buttonClassName__1k8iis1 {
+  display: flex;
+}
+.Loading_wrapperClassName__1rpktzp1:hover .sp-button.shared_buttonClassName__1k8iis1 > span {
+  display: none;
+}
+.Loading_wrapperClassName__1rpktzp1:hover .Loading_cubeClassName__1rpktzp0 {
+  display: none;
+}
+.Loading_sidesClassNames__1rpktzp3 {
+  animation: Loading_cubeRotate__1rpktzp2 1s linear infinite;
+  animation-fill-mode: forwards;
+  transform-style: preserve-3d;
+  transform: rotateX(-25.5deg) rotateY(45deg);
+}
+.Loading_sidesClassNames__1rpktzp3 * {
+  border: 10px solid var(--sp-colors-clickable);
+  border-radius: 8px;
+  background: var(--sp-colors-surface1);
+}
+.Loading_sidesClassNames__1rpktzp3 .top {
+  transform: rotateX(90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.Loading_sidesClassNames__1rpktzp3 .bottom {
+  transform: rotateX(-90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.Loading_sidesClassNames__1rpktzp3 .front {
+  transform: rotateY(0deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.Loading_sidesClassNames__1rpktzp3 .back {
+  transform: rotateY(-180deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.Loading_sidesClassNames__1rpktzp3 .left {
+  transform: rotateY(-90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.Loading_sidesClassNames__1rpktzp3 .right {
+  transform: rotateY(90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.LoadingOverlay_loadingClassName__1hjqjqt0 {
+  background-color: var(--sp-colors-surface1);
+}
+.LoadingOverlay_errorTitleClassName__1hjqjqt1 {
+  font-weight: bold;
+}
+.LoadingOverlay_stdoutPreview__1hjqjqt2 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: var(--sp-space-8);
+  overflow: auto;
+  opacity: 0.5;
+  overflow-x: hidden;
+}
+.LoadingOverlay_progressClassName__1hjqjqt3 {
+  position: absolute;
+  left: var(--sp-space-5);
+  bottom: var(--sp-space-4);
+  z-index: var(--sp-zIndices-top);
+  color: var(--sp-colors-clickable);
+  animation: shared_fadeIn__1k8iis4 150ms ease;
+  font-family: var(--sp-font-mono);
+  font-size: .8em;
+  width: 75%;
+}
+.LoadingOverlay_progressClassName__1hjqjqt3 p {
+  white-space: nowrap;
+  margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.RunButton_runButtonClassName__1n5rx6v0 {
+  position: absolute;
+  bottom: var(--sp-space-2);
+  right: var(--sp-space-2);
+  padding-right: var(--sp-space-3);
+}
+.DependenciesProgress_progressClassName__1la8xb60 {
+  position: absolute;
+  left: var(--sp-space-5);
+  bottom: var(--sp-space-4);
+  z-index: var(--sp-zIndices-top);
+  color: var(--sp-colors-clickable);
+  animation: shared_fadeIn__1k8iis4 150ms ease;
+  font-family: var(--sp-font-mono);
+  font-size: .8em;
+  width: 75%;
+}
+.DependenciesProgress_progressClassName__1la8xb60 p {
+  white-space: nowrap;
+  margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.Layout_layoutClassName__2z9wg30 {
+  border: 1px solid var(--sp-colors-surface2);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  border-radius: var(--sp-border-radius);
+  overflow: hidden;
+  position: relative;
+  background-color: var(--sp-colors-surface2);
+  gap: 1px;
+}
+.Layout_layoutClassName__2z9wg30 > .Stack_stackClassName__1meovy70 {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+  height: var(--sp-layout-height);
+  overflow: hidden;
+}
+.Layout_layoutClassName__2z9wg30 > .sp-file-explorer {
+  flex: 0.2;
+  min-width: 200px;
+}
+@media print {
+  .Layout_layoutClassName__2z9wg30 > .Stack_stackClassName__1meovy70 {
+    height: auto;
+    display: block;
+  }
+}
+@media screen and (max-width: 768px) {
+  .Layout_layoutClassName__2z9wg30 > .Stack_stackClassName__1meovy70 {
+    min-width: 100%;
+  }
+  .Layout_layoutClassName__2z9wg30 > .Stack_stackClassName__1meovy70:not(.sp-preview, .sp-editor, .sp-preset-column) {
+    height: calc(var(--sp-layout-height) / 2);
+  }
+  .Layout_layoutClassName__2z9wg30 > .sp-file-explorer {
+    flex: 1;
+  }
+}
+.Sandpack_dragHandler__e54iki0 {
+  position: absolute;
+  z-index: var(--sp-zIndices-top);
+}
+.Sandpack_dragHandler_direction_vertical__e54iki1 {
+  right: 0;
+  left: 0;
+  height: 10px;
+  cursor: ns-resize;
+}
+.Sandpack_dragHandler_direction_horizontal__e54iki2 {
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: ew-resize;
+}
+.Sandpack_buttonCounter__e54iki3 {
+  position: relative;
+}
+.Sandpack_buttonCounter__e54iki3 strong {
+  background: var(--sp-colors-clickable);
+  color: var(--sp-colors-surface1);
+  min-width: 12px;
+  height: 12px;
+  padding: 0 2px;
+  border-radius: 12px;
+  font-size: 8px;
+  line-height: 12px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-weight: normal;
+}
+.Sandpack_consoleWrapper__e54iki4 {
+  width: 100%;
+  overflow: hidden;
+}
+.Sandpack_rtlLayoutClassName__e54iki5 {
+  flex-direction: row-reverse;
+}
+@media screen and (max-width: 768px) {
+  .Sandpack_dragHandler__e54iki0 {
+    display: none;
+  }
+  .Sandpack_rtlLayoutClassName__e54iki5 {
+    flex-flow: wrap-reverse !important;
+    flex-direction: initial;
+  }
+}