@scalar/api-reference 0.1.4 → 0.1.6

package/dist/style.css

@@ -460,10 +460,10 @@ to {
 }
 }
 
-.scalar-api-client__container .scalar-api-client[data-v-1ad962df] {
+.scalar-api-client__container .scalar-api-client[data-v-88d4f957] {
   width: calc(100% - var(--scalar-api-reference-theme-sidebar-width));
 }
-.scalar-api-client__container[data-v-1ad962df] {
+.scalar-api-client__container[data-v-88d4f957] {
   position: absolute;
   right: 0;
   left: 0;
@@ -484,11 +484,11 @@ to {
   flex-direction: column;
 }
 @media screen and (max-width: 1265px) {
-.scalar-api-client__container[data-v-1ad962df] {
+.scalar-api-client__container[data-v-88d4f957] {
     width: 100vw !important;
 }
 }
-.scalar-api-client__navigation[data-v-1ad962df] {
+.scalar-api-client__navigation[data-v-88d4f957] {
   width: 100%;
   display: flex;
   align-items: center;
@@ -500,7 +500,7 @@ to {
   border-bottom: var(--scalar-api-reference-border);
   top: 0;
 }
-.scalar-api-client__close[data-v-1ad962df] {
+.scalar-api-client__close[data-v-88d4f957] {
   appearance: none;
   border: none;
   outline: none;
@@ -511,7 +511,7 @@ to {
   color: var(--scalar-api-reference-theme-color-1);
   font-weight: var(--scalar-api-reference-theme-semibold);
 }
-.scalar-api-client__close[data-v-1ad962df]:hover {
+.scalar-api-client__close[data-v-88d4f957]:hover {
   cursor: pointer;
 }
 /*
@@ -534,7 +534,7 @@ TODO: Markup is missing
   height: 12px;
   transform: rotate(180deg);
 } */
-.api-client-drawer[data-v-1ad962df] {
+.api-client-drawer[data-v-88d4f957] {
   background: var(--scalar-api-reference-theme-background-1);
   height: calc(100vh - 58px);
   width: calc(100vw - 8px);
@@ -546,9 +546,9 @@ TODO: Markup is missing
   left: 4px;
   z-index: 9999;
   opacity: 0;
-  animation: apiclientfadein-1ad962df 0.35s forwards;
+  animation: apiclientfadein-88d4f957 0.35s forwards;
 }
-@keyframes apiclientfadein-1ad962df {
+@keyframes apiclientfadein-88d4f957 {
 from {
     transform: translate3d(0, 20px, 0) scale(0.985);
     opacity: 0;
@@ -558,7 +558,7 @@ to {
     opacity: 1;
 }
 }
-.api-client-drawer-exit[data-v-1ad962df] {
+.api-client-drawer-exit[data-v-88d4f957] {
   position: fixed;
   top: 0;
   left: 0;
@@ -568,9 +568,9 @@ to {
   transition: all 0.3s ease-in-out;
   z-index: 9998;
   cursor: pointer;
-  animation: drawerexitfadein-1ad962df 0.35s forwards;
+  animation: drawerexitfadein-88d4f957 0.35s forwards;
 }
-@keyframes drawerexitfadein-1ad962df {
+@keyframes drawerexitfadein-88d4f957 {
 from {
     opacity: 0;
 }
@@ -578,10 +578,10 @@ to {
     opacity: 1;
 }
 }
-.scalar-api-client-height[data-v-1ad962df] {
+.scalar-api-client-height[data-v-88d4f957] {
   height: 100%;
 }
-.scalar-api-client-height .sidebar[data-v-1ad962df] {
+.scalar-api-client-height .sidebar[data-v-88d4f957] {
   flex: 1 1 0%;
   flex-grow: 1;
   flex-shrink: 1;
@@ -1047,7 +1047,7 @@ to {
 .parameter-type,
 .parameter-required {
   color: var(--scalar-api-reference-theme-color-3);
-  font-weight: var(--themesemi);
+  font-weight: var(--scalar-api-reference-theme-semibold);
   margin-right: 6px;
   position: relative;
 }
@@ -1071,22 +1071,22 @@ to {
   margin-top: 12px;
 }
 
-.request-method--post[data-v-ad407d18] {
+.request-method--post[data-v-34bdfe15] {
   color: var(--scalar-api-reference-theme-post-color);
 }
-.request-method--patch[data-v-ad407d18] {
+.request-method--patch[data-v-34bdfe15] {
   color: var(--scalar-api-reference-theme-patch-color);
 }
-.request-method--get[data-v-ad407d18] {
+.request-method--get[data-v-34bdfe15] {
   color: var(--scalar-api-reference-theme-get-color);
 }
-.request-method--delete[data-v-ad407d18] {
+.request-method--delete[data-v-34bdfe15] {
   color: var(--scalar-api-reference-theme-delete-color);
 }
-.request-method--put[data-v-ad407d18] {
+.request-method--put[data-v-34bdfe15] {
   color: var(--scalar-api-reference-theme-put-color);
 }
-.request-path[data-v-ad407d18] {
+.request-path[data-v-34bdfe15] {
   margin-left: 6px;
   color: var(--scalar-api-reference-theme-color-2);
   white-space: nowrap;
@@ -1095,12 +1095,12 @@ to {
   text-overflow: ellipsis;
   text-transform: none !important;
 }
-.language-select[data-v-ad407d18] {
+.language-select[data-v-34bdfe15] {
   position: relative;
   padding-right: 9px;
   border-right: 1px solid var(--scalar-api-reference-border-color);
 }
-.language-select select[data-v-ad407d18] {
+.language-select select[data-v-34bdfe15] {
   border: none;
   outline: none;
   cursor: pointer;
@@ -1115,7 +1115,7 @@ to {
   opacity: 0;
   appearance: none;
 }
-.language-select span[data-v-ad407d18] {
+.language-select span[data-v-34bdfe15] {
   font-size: 12px;
   color: var(--scalar-api-reference-theme-color-3);
   font-weight: var(--scalar-api-reference-theme-semibold);
@@ -1123,7 +1123,7 @@ to {
   align-items: center;
   justify-content: center;
 }
-.language-select span[data-v-ad407d18]:after {
+.language-select span[data-v-34bdfe15]:after {
   content: '';
   width: 7px;
   height: 7px;
@@ -1132,10 +1132,10 @@ to {
   margin-left: 6px;
   box-shadow: 1px 1px 0 currentColor;
 }
-.language-select span[data-v-ad407d18]:hover {
+.language-select span[data-v-34bdfe15]:hover {
   background: var(--scalar-api-reference-theme-background-2);
 }
-.copy-button[data-v-ad407d18] {
+.copy-button[data-v-34bdfe15] {
   appearance: none;
   -webkit-appearance: none;
   outline: none;
@@ -1147,14 +1147,14 @@ to {
   border: none;
   border-radius: 3px;
 }
-.copy-button[data-v-ad407d18]:hover {
+.copy-button[data-v-34bdfe15]:hover {
   color: var(--scalar-api-reference-theme-color-1);
 }
-.copy-button svg[data-v-ad407d18] {
+.copy-button svg[data-v-34bdfe15] {
   width: 13px;
   height: 13px;
 }
-.show-api-client-button[data-v-ad407d18] {
+.show-api-client-button[data-v-34bdfe15] {
   width: 100%;
   display: block;
   appearance: none;
@@ -1173,22 +1173,22 @@ to {
   background: var(--scalar-api-reference-theme-button-1);
   color: var(--scalar-api-reference-theme-button-1-color);
 }
-.show-api-client-button[data-v-ad407d18]:hover {
+.show-api-client-button[data-v-34bdfe15]:hover {
   background: var(--scalar-api-reference-theme-button-1-hover);
 }
-.show-api-client-button svg[data-v-ad407d18] {
+.show-api-client-button svg[data-v-34bdfe15] {
   height: 12px;
   width: auto;
   margin-right: 6px;
 }
-.request-method[data-v-ad407d18] {
+.request-method[data-v-34bdfe15] {
   font-family: var(--scalar-api-reference-font-mono);
 }
-.request-path[data-v-ad407d18] {
+.request-path[data-v-34bdfe15] {
   font-family: var(--scalar-api-reference-font-mono);
 }
 
-.code-copy[data-v-0bcfbaaa] {
+.code-copy[data-v-e41bd4be] {
   display: flex;
   appearance: none;
   -webkit-appearance: none;
@@ -1198,18 +1198,18 @@ to {
   color: var(--scalar-api-reference-theme-color-3);
   border: none;
 }
-.code-copy[data-v-0bcfbaaa]:hover {
+.code-copy[data-v-e41bd4be]:hover {
   color: var(--scalar-api-reference-theme-color-1);
 }
-.code-copy svg[data-v-0bcfbaaa] {
+.code-copy svg[data-v-e41bd4be] {
   width: 13px;
   height: 13px;
 }
-.description[data-v-0bcfbaaa] {
+.description[data-v-e41bd4be] {
   font-weight: var(--scalar-api-reference-theme-semibold);
   font-size: var(--scalar-api-reference-theme-mini);
 }
-.scalar-api-reference__empty-state[data-v-0bcfbaaa] {
+.scalar-api-reference__empty-state[data-v-e41bd4be] {
   border: 1px dashed var(--scalar-api-reference-border-color);
   width: 100%;
   text-align: center;
@@ -1315,9 +1315,690 @@ to {
     margin-bottom: 24px;
 }
 }
-.scalar-api-reference,
-#headlessui-portal-root,
-.dark-mode {
+
+.loader-wrapper[data-v-a0429592] {
+  position: relative;
+  height: var(--a8cfd54e);
+  width: var(--a8cfd54e);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  --loader-size: 50%;
+}
+
+/*SVG Positioning for Loader Objects*/
+.svg-loader[data-v-a0429592] {
+  width: var(--loader-size);
+  height: var(--loader-size);
+  top: 1rem;
+  right: 0.9rem;
+  overflow: visible;
+
+  fill: none;
+  background-color: transparent;
+  stroke: currentColor;
+}
+.svg-path[data-v-a0429592] {
+  stroke-width: 14;
+  fill: none;
+  transition: 0.3s;
+}
+.svg-x-mark[data-v-a0429592] {
+  stroke-dasharray: 57;
+  stroke-dashoffset: 57;
+  transition-delay: 0s;
+}
+.svg-check-mark[data-v-a0429592] {
+  stroke-dasharray: 149;
+  stroke-dashoffset: 149;
+  transition-delay: 0s;
+}
+.icon-is-invalid .svg-x-mark[data-v-a0429592] {
+  stroke-dashoffset: 0;
+  transition-delay: 0.3s;
+}
+.icon-is-valid .svg-check-mark[data-v-a0429592] {
+  stroke-dashoffset: 0;
+  transition-delay: 0.3s;
+}
+.circular-loader[data-v-a0429592] {
+  animation: rotate-a0429592 0.7s linear infinite,fade-in-a0429592 0.4s;
+
+  transform-origin: center center;
+  transform: scale(5);
+
+  background: transparent;
+}
+.loader-path[data-v-a0429592] {
+  stroke-dasharray: 50, 200;
+  stroke-dashoffset: -100;
+  stroke-linecap: round;
+}
+.loader-path-off[data-v-a0429592] {
+  stroke-dasharray: 50, 200;
+  stroke-dashoffset: -100;
+  transition: opacity 0.3s;
+  opacity: 0;
+}
+@keyframes fade-in-a0429592 {
+0% {
+    opacity: 0;
+}
+70% {
+    opacity: 0;
+}
+100% {
+    opacity: 1;
+}
+}
+@keyframes rotate-a0429592 {
+from {
+    transform: scale(5) rotate(0deg);
+}
+to {
+    transform: scale(5) rotate(360deg);
+}
+}
+
+.flow-button[data-v-48a9b678] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  position: relative;
+  appearance: none;
+  -webkit-appearance: none;
+  height: 40px;
+  padding: 0px 24px;
+  border-radius: var(--scalar-api-reference-theme-radius);
+  color: var(--scalar-api-reference-theme-button-1-color);
+  font-size: var(--scalar-api-reference-theme-font-size-4);
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--scalar-api-reference-theme-button-1);
+  border: none;
+  width: 100%;
+  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
+}
+.flow-button[data-v-48a9b678]:hover,
+.flow-button[data-v-48a9b678]:focus-visible {
+  background: var(--scalar-api-reference-theme-button-1-hover);
+}
+.flow-button[data-v-48a9b678]:active {
+  box-shadow: none;
+  background: var(--scalar-api-reference-theme-button-1);
+}
+.flow-button[disabled][data-v-48a9b678] {
+  background: var(--scalar-api-reference-theme-background-2);
+  color: var(--scalar-api-reference-theme-color-3);
+  cursor: unset;
+  box-shadow: none;
+}
+.flow-button.flow-button-icon-only[data-v-48a9b678] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+/* ----------------------------------------------------- */
+.flow-button-outlined[data-v-48a9b678] {
+  background: var(--scalar-api-reference-theme-background-1);
+  color: var(--scalar-api-reference-theme-color-1);
+  padding: 11px 23px;
+  border: var(--scalar-api-reference-border);
+  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
+}
+.flow-button-outlined[data-v-48a9b678]:hover,
+.flow-button-outlined[data-v-48a9b678]:focus-visible {
+  background: var(--scalar-api-reference-theme-background-2);
+}
+.flow-button-outlined[data-v-48a9b678]:active {
+  background: var(--scalar-api-reference-theme-background-2);
+}
+.flow-button-outlined[disabled][data-v-48a9b678] {
+  background: var(--scalar-api-reference-theme-background-2);
+  color: var(--scalar-api-reference-theme-color-3);
+  cursor: unset;
+  box-shadow: none;
+}
+
+/* ----------------------------------------------------- */
+.flow-button-clear[data-v-48a9b678] {
+  background: transparent;
+  box-shadow: none;
+  color: var(--scalar-api-reference-theme-color-3);
+}
+.flow-button-clear[data-v-48a9b678]:active {
+  background: transparent;
+}
+.flow-button-clear[data-v-48a9b678]:hover,
+.flow-button-clear[data-v-48a9b678]:focus-visible {
+  background: var(--scalar-api-reference-theme-background-2);
+  box-shadow: none;
+}
+.flow-button-clear[disabled][data-v-48a9b678] {
+  background: var(--scalar-api-reference-theme-background-2);
+  color: var(--scalar-api-reference-theme-color-3);
+  cursor: unset;
+  box-shadow: none;
+}
+
+/* ----------------------------------------------------- */
+.flow-button-text[data-v-48a9b678] {
+  background: transparent;
+  box-shadow: none;
+  color: var(--scalar-api-reference-theme-color-3);
+}
+.flow-button-text[data-v-48a9b678]:active {
+  background: transparent;
+}
+.flow-button-text[data-v-48a9b678]:hover,
+.flow-button-text[data-v-48a9b678]:focus-visible {
+  color: var(--scalar-api-reference-theme-color-2);
+  background: transparent;
+  box-shadow: none;
+}
+.flow-button-text[disabled][data-v-48a9b678] {
+  background: transparent;
+  color: var(--scalar-api-reference-theme-color-ghost);
+  cursor: unset;
+  box-shadow: none;
+}
+
+/* ----------------------------------------------------- */
+.flow-button--delete[data-v-48a9b678] {
+  background: var(--scalar-api-reference-theme-error-color);
+  color: white;
+}
+.flow-button--delete[data-v-48a9b678]:active {
+  background: var(--scalar-api-reference-theme-error-color);
+}
+.flow-button--delete[data-v-48a9b678]:hover {
+  background: var(--scalar-api-reference-theme-error-color);
+  opacity: 0.86;
+}
+
+/* ----------------------------------------------------- */
+.flow-button-loader[data-v-48a9b678] {
+  position: absolute;
+  right: 8px;
+}
+.flow-button-decorator[data-v-48a9b678] {
+  margin-right: 9px;
+  color: currentColor;
+  display: flex;
+  align-items: center;
+  height: 14px;
+  width: 14px;
+}
+.flow-button-icon-only .flow-button-decorator[data-v-48a9b678] {
+  margin-right: 0;
+}
+
+.modal-layout[data-v-d081f944] {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  background: rgba(0, 0, 0, 0.44);
+  padding: 20px;
+  opacity: 0;
+  animation: modal-fade-d081f944 0.2s forwards;
+}
+.modal-body[data-v-d081f944] {
+  padding: 12px 12px 18px 24px;
+  max-height: calc(100vh - 240px);
+  background: var(--scalar-api-reference-theme-background-1);
+  border-radius: var(--scalar-api-reference-theme-radius-xl);
+}
+.modal[data-v-d081f944] {
+  margin: 80px auto 0;
+  position: relative;
+  background: var(--scalar-api-reference-theme-background-2);
+  border-radius: var(--scalar-api-reference-theme-radius);
+  color: var(--scalar-api-reference-theme-color-1);
+  width: 100%;
+  text-align: left;
+  line-height: 1.4;
+  opacity: 0;
+  transform: scale(0.98);
+  animation: modal-pop-d081f944 0.15s 0.15s forwards;
+  display: flex;
+  flex-direction: column;
+}
+.modal-content-normal[data-v-d081f944] {
+  max-width: 640px;
+}
+.modal-content-small[data-v-d081f944] {
+  max-width: 480px;
+}
+@keyframes modal-fade-d081f944 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes modal-pop-d081f944 {
+0% {
+    opacity: 0;
+}
+100% {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+.modal-header[data-v-d081f944] {
+  padding: 12px 24px;
+  color: var(--scalar-api-reference-theme-color-1);
+  font-size: var(--scalar-api-reference-theme-font-size-4);
+  text-align: left;
+  font-weight: 600;
+  border-radius: var(--scalar-api-reference-theme-radius) var(--scalar-api-reference-theme-radius) 0 0;
+}
+
+.flow-input-cont[data-v-422dab12] {
+  position: relative;
+}
+.flow-input-wrapper[data-v-422dab12] {
+  border-radius: var(--scalar-api-reference-theme-radius);
+  border: var(--scalar-api-reference-border);
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.flow-input-wrapper--focus[data-v-422dab12] {
+  border-color: var(--scalar-api-reference-theme-color-3);
+}
+.flow-input-wrapper--focus[data-v-422dab12]:has(button:active) {
+  border: var(--scalar-api-reference-border) !important;
+}
+.flow-input__multiline[data-v-422dab12] {
+  min-height: 77px;
+}
+.flow-label[data-v-422dab12] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  padding: 0px 3px;
+  margin: 12px 9px;
+  width: fit-content;
+  background: transparent;
+  font-size: var(--scalar-api-reference-theme-font-size-3);
+  background-color: var(--scalar-api-reference-theme-background-1);
+  border-radius: var(--scalar-api-reference-theme-radius);
+  color: var(--scalar-api-reference-theme-color-3);
+  box-shadow: 0 0 2px 2px var(--scalar-api-reference-theme-background-1);
+  transition: transform 0.2s ease-in-out;
+  transform-origin: top left;
+  z-index: 10;
+  line-height: initial;
+}
+.flow-input[data-v-422dab12] {
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  font-size: var(--scalar-api-reference-theme-font-size-3);
+  border: none;
+  color: var(--scalar-api-reference-theme-color-1);
+  padding: 12px;
+  width: 100%;
+  background: transparent;
+  z-index: 10;
+  transition: opacity 0.15s ease-in-out;
+  resize: none;
+}
+.flow-input[data-v-422dab12]:has(+ .flow-label) {
+  opacity: 0;
+}
+.flow-input[data-v-422dab12]::placeholder {
+  color: var(--scalar-api-reference-theme-color-3);
+}
+.flow-input[data-v-422dab12]:not(:placeholder-shown),
+.flow-input-wrapper--focus .flow-input[data-v-422dab12] {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out 0.15s;
+}
+.flow-input-wrapper--focus .flow-label[data-v-422dab12] {
+  color: var(--scalar-api-reference-theme-color-1);
+}
+.flow-input[data-v-422dab12]::selection {
+  color: var(--scalar-api-reference-theme-color-1);
+  background: rgba(255, 165, 88, 0.35);
+}
+.flow-input[data-v-422dab12]:-webkit-autofill,
+.flow-input[data-v-422dab12]:-webkit-autofill:hover,
+.flow-input[data-v-422dab12]:-webkit-autofill:focus,
+.flow-input[data-v-422dab12]:-webkit-autofill:active,
+.flow-input[data-v-422dab12]:focus-within:-webkit-autofill,
+.flow-input[data-v-422dab12]:focus-within:-webkit-autofill:hover,
+.flow-input[data-v-422dab12]:focus-within:-webkit-autofill:focus,
+.flow-input[data-v-422dab12]:focus-within:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0px 1000px var(--scalar-api-reference-theme-background-1) inset !important;
+  -webkit-text-fill-color: var(--scalar-api-reference-theme-color-1);
+  color: var(--scalar-api-reference-theme-color-1);
+  border-radius: var(--scalar-api-reference-theme-radius);
+}
+.helper-text[data-v-422dab12] {
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--scalar-api-reference-theme-error-color);
+  display: flex;
+  align-items: center;
+}
+.helper-text[data-v-422dab12]:before {
+  content: '!';
+  border-radius: 50%;
+  background: var(--scalar-api-reference-theme-error-color);
+  color: white;
+  font-weight: 900;
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+  display: block;
+  margin-right: 6px;
+  text-align: center;
+  font-size: 11px;
+}
+.helper-text[data-v-422dab12]:empty {
+  display: none;
+}
+.flow-input-wrapper--error[data-v-422dab12] {
+  border-color: var(--scalar-api-reference-theme-error-color);
+}
+.flow-input-wrapper--error .flow-label[data-v-422dab12] {
+  color: var(--scalar-api-reference-theme-error-color);
+}
+.flow-input-wrapper--warn[data-v-422dab12] {
+  border-color: var(--scalar-api-reference-theme-error-color);
+}
+.flow-input-wrapper--warn .flow-label[data-v-422dab12] {
+  color: var(--scalar-api-reference-theme-error-color);
+}
+.flow-input-wrapper--focus .flow-label[data-v-422dab12],
+.flow-input:not(:placeholder-shown) + .flow-label[data-v-422dab12] {
+  transform: translate3d(0, -20px, 0) scale(0.8);
+  transform-origin: top left;
+}
+.flow-input-wrapper--focus:has(button:active) .flow-label[data-v-422dab12] {
+  color: var(--scalar-api-reference-theme-color-3) !important;
+}
+.icon-slot[data-v-422dab12]:not(:empty) {
+  display: flex;
+  align-items: center;
+  padding-right: 12px;
+  width: 28px;
+  cursor: pointer;
+  color: var(--scalar-api-reference-theme-color-ghost);
+}
+.icon-slot[data-v-422dab12]:hover {
+  color: var(--scalar-api-reference-theme-color-1);
+}
+
+.code-editor-header {
+  padding: 12px !important;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.code-editor-header span {
+  font-size: 13px;
+  color: var(--scalar-api-reference-theme-color-3);
+  font-weight: 600;
+  margin-right: 12px;
+  position: relative;
+  cursor: pointer;
+}
+.code-editor-header span.active-mode {
+  color: var(--scalar-api-reference-theme-color-1);
+}
+.code-editor-header span.active-mode:after {
+  content: '';
+  position: absolute;
+  bottom: -18px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--scalar-api-reference-theme-color-1);
+}
+.code-editor-header button {
+  border-radius: 30px;
+  padding: 6px 9px;
+  background: transparent;
+  appearance: none;
+  border: var(--scalar-api-reference-border);
+  font-size: 12px;
+  color: var(--scalar-api-reference-theme-color-3);
+  margin-left: 9px;
+  font-weight: 500;
+}
+.code-editor-header button:hover {
+  cursor: pointer;
+  color: var(--scalar-api-reference-theme-color-1);
+  border-color: currentColor;
+}
+@media (max-width: 580px) {
+.active-mode i,
+  .code-editor-header button i {
+    display: none;
+}
+.code-editor-header button {
+    padding: 4px 8px;
+    margin-left: 6px;
+}
+.code-editor-header span.active-mode:after {
+    bottom: -16px;
+}
+}
+
+.code-editor-input {
+  height: 100%;
+  overflow: hidden;
+  border-top: var(--scalar-api-reference-border);
+  background: var(--scalar-api-reference-theme-background-2);
+}
+.code-editor-input .cm-editor {
+  height: 100%;
+}
+.code-editor-input .cm-scroller {
+  padding-top: 6px;
+}
+.code-editor-input .cm-editor .cm-line {
+  padding-left: 0px !important;
+}
+.code-editor-input .cm-editor .cm-activeLine {
+  background-color: var(--scalar-api-reference-theme-background-3) !important;
+}
+.code-editor-input .cm-yLineSelection {
+  margin: 0;
+}
+.light-mode .cm-editor {
+  --cm-blue: #0082d0;
+  --cm-green: #00a67d;
+  --cm-yellow: #b29762;
+}
+.dark-mode .cm-editor {
+  --cm-blue: #79c0ff;
+  --cm-green: #7ee787;
+  --cm-yellow: #e9950c;
+}
+.cm-editor .cm-content *,
+.cm-editor .cm-content {
+  font-size: var(--scalar-api-reference-theme-mini);
+  line-height: 1.44;
+}
+.cm-editor .cm-scroller {
+  background: var(--scalar-api-reference-theme-background-2);
+}
+.cm-editor .cm-activeLine, .cm-editor {
+  background-color: transparent !important;
+}
+.ͼr .cm-line ::selection,
+.ͼr .cm-line::selection,
+.ͼ8 .cm-line ::selection,
+.ͼ8 .cm-line::selection,
+.ͼ1b.cm-focused .cm-selectionBackground,
+.ͼ1b .cm-selectionLayer .cm-selectionBackground,
+.ͼ1b .cm-content ::selection {
+  background-color: inherit !important;
+}
+.cm-editor.cm-focused {
+  outline: none !important;
+}
+.cm-editor {
+  background-color: transparent !important;
+}
+.cm-editor .ͼ1e,
+.cm-editor .ͼe,
+.cm-editor .ͼz,
+.cm-editor .ͼr,
+.cm-editor .ͼ8,
+.cm-editor .ͼt,
+.cm-editor .ͼa {
+  color: var(--scalar-api-reference-theme-color-1);
+}
+.cm-editor .ͼ12,
+.cm-editor .ͼj {
+  color: var(--scalar-api-reference-theme-color-2);
+}
+.cm-foldGutter span[title='Unfold line'],
+.cm-foldGutter span[title='Fold line'] {
+  font-size: 0px;
+}
+.cm-foldGutter span:after {
+  width: 9px;
+  height: 9px;
+  display: block;
+  box-shadow: 1px 1px 0 currentColor;
+  transition: all 0.15s ease-in-out;
+}
+.cm-foldGutter span[title='Fold line']:after {
+  content: '';
+  transform: rotate(45deg) translate3d(-2px, -3px, 0);
+  opacity: 0;
+}
+.cm-foldGutter span[title='Fold line']:hover:after {
+  opacity: 1;
+}
+.cm-foldGutter span[title='Unfold line']:after {
+  content: '';
+  transform: rotate(-45deg) translate3d(-2px, -3px, 0);
+  opacity: 1;
+}
+.cm-foldGutter:hover span[title='Fold line']:after {
+  opacity: 1 !important;
+}
+.cm-editor .cm-lineNumbers .cm-gutterElement {
+  padding: 0 6px 0 12px !important;
+}
+.cm-editor .ͼ1g {
+  color: var(--scalar-api-reference-theme-color-2);
+}
+.cm-editor .ͼ1d,
+.cm-editor .ͼc,
+.cm-editor .ͼq,
+.cm-editor .ͼ7 {
+  color: var(--cm-blue);
+}
+.cm-editor .ͼu,
+.cm-editor .ͼb {
+  color: var(--cm-green);
+}
+.cm-editor .ͼ9,
+.cm-editor .ͼ1h {
+  color: var(--cm-yellow);
+}
+.cm-editor .ͼi,
+.cm-editor .ͼv,
+.cm-editor .ͼx,
+.cm-editor .ͼ11,
+.cm-editor .ͼ14,
+.cm-editor .ͼp,
+.cm-editor .ͼ6 {
+  color: var(--scalar-api-reference-theme-color-3);
+}
+.cm-editor .cm-content {
+  padding: 6px 0;
+}
+.cm-editor .cm-line {
+  color: var(--scalar-api-reference-theme-color-1) !important;
+  caret-color: var(--scalar-api-reference-theme-color-1) !important;
+}
+.cm-cursor {
+  border-color: transparent !important;
+}
+.cm-matchingBracket {
+  background: var(--scalar-api-reference-theme-background-3) !important;
+}
+.cm-editor .cm-gutters {
+  font-size: var(--scalar-api-reference-theme-mini);
+  color: var(--scalar-api-reference-theme-color-3);
+  line-height: 1.44;
+  background: var(--scalar-api-reference-theme-background-2);
+  border-right: none;
+}
+.simplecode .cm-editor {
+  outline: none !important;
+}
+.simplecode .cm-editor .cm-scroller {
+  background: var(--scalar-api-reference-theme-background-2);
+  border-radius: var(--scalar-api-reference-theme-radius);
+}
+.simplecode .cm-editor .cm-gutters {
+  display: none;
+}
+.cm-editor .cm-gutterElement {
+  padding: 0 6px 0 12px !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: var(--scalar-api-reference-theme-background-2);
+}
+.cm-gutter + .cm-gutter .cm-gutterElement {
+  padding-left: 0 !important;
+}
+.ͼ1 .cm-foldPlaceholder {
+  background-color: var(--scalar-api-reference-theme-background-3);
+  border: var(--scalar-api-reference-border);
+  color: var(--scalar-api-reference-theme-color-3);
+}
+
+.code-editor-notification {
+  color: var(--scalar-api-reference-theme-color-3);
+  padding: 6px 8px;
+  font-size: var(--scalar-api-reference-theme-font-size-5);
+  border-top: var(--scalar-api-reference-border);
+}
+.code-editor-notification--error {
+  background: var(--scalar-api-reference-theme-error-color);
+  color: white;
+}
+
+.code-editor-status-bar {
+  color: var(--scalar-api-reference-theme-color-3);
+  padding: 6px 8px;
+  font-size: var(--scalar-api-reference-theme-font-size-5);
+  border-top: var(--scalar-api-reference-border);
+}
+
+.code-editor[data-v-1d835dbc] {
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-right: var(--scalar-api-reference-border);
+}
+:root {
   /** Fonts */
   --scalar-api-reference-font-sans: system-ui, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -1382,72 +2063,18 @@ to {
   --scalar-api-reference-theme-put-color: purple;
 }
 
-/*
-.scalar-api-reference,
-#headlessui-portal-root,
-.dark-mode {
-  --scalar-api-reference-font-sans: var(--theme-font);
-  --scalar-api-reference-font-mono: var(--theme-font-code);
-
-  --scalar-api-reference-sidebar-border-color: var(--theme-border-color);
-  --scalar-api-reference-theme-background-1: var(--theme-background-1);
-  --scalar-api-reference-theme-background-2: var(--theme-background-2);
-  --scalar-api-reference-border-color: var(--theme-border-color);
-  --scalar-api-reference-border: var(--theme-border);
-  --scalar-api-reference-theme-button-1-color: var(--theme-button-1-color);
-  --scalar-api-reference-theme-button-1-hover: var(--theme-button-1-hover);
-  --scalar-api-reference-theme-button-1: var(--theme-button-1);
-  --scalar-api-reference-theme-color-1: var(--theme-color-1);
-  --scalar-api-reference-theme-color-2: var(--theme-color-2);
-  --scalar-api-reference-theme-color-3: var(--theme-color-3);
-  --scalar-api-reference-theme-color-ghost: var(--theme-color-ghost);
-  --scalar-api-reference-theme-error-color: var(--theme-error-color);
-  --scalar-api-reference-theme-font-size-4: var(--theme-font-size-4);
-  --scalar-api-reference-theme-header-height: var(--theme-header-height);
-  --scalar-api-reference-rounded: var(--theme-radius);
-  --scalar-api-reference-theme-semibold: var(--theme-semibold);
-  --scalar-api-reference-theme-shadow-1: var(--theme-shadow-1);
-  --scalar-api-reference-theme-sidebar-width: var(--theme-sidebar-width);
-  --scalar-api-reference-theme-small: var(--theme-small);
-  --scalar-api-reference-app-header-height: var(--app-header-height);
-  --scalar-api-reference-col-width-1: var(--col-width-1);
-  --scalar-api-reference-col-width-2: var(--col-width-2);
-  --scalar-api-reference-col-width-3: var(--col-width-3);
-  --scalar-api-reference-document-height: var(--document-height);
-  --scalar-api-reference-font-color: var(--theme-color-1);
-  --scalar-api-reference-full-height: var(--full-height);
-  --scalar-api-reference-sidebar-background-1: var(--theme-background-1);
-  --scalar-api-reference-sidebar-color-1: var(--theme-color-1);
-  --scalar-api-reference-sidebar-color-2: var(--theme-color-2);
-  --scalar-api-reference-sidebar-color-active: var(--theme-color-accent);
-  --scalar-api-reference-sidebar-item-hover-background: var(
-    --theme-background-2
-  );
-  --scalar-api-reference-theme-background-3: var(--theme-background-3);
-  --scalar-api-reference-theme-bold: var(--theme-bold);
-  --scalar-api-reference-border-width: var(--theme-border-width);
-  --scalar-api-reference-theme-color-accent: var(--theme-color-accent);
-  --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
-  --scalar-api-reference-font-mono: var(--theme-font-code);
-  --scalar-api-reference-theme-get-color: var(--theme-get-color);
-  --scalar-api-reference-theme-heading-2: var(--theme-heading-2);
-  --scalar-api-reference-theme-heading-4: var(--theme-heading-4);
-  --scalar-api-reference-theme-micro: var(--theme-micro);
-  --scalar-api-reference-theme-mini: var(--theme-mini);
-  --scalar-api-reference-theme-paragraph: var(--theme-paragraph);
-  --scalar-api-reference-theme-patch-color: var(--theme-patch-color);
-  --scalar-api-reference-theme-post-color: var(--theme-post-color);
-  --scalar-api-reference-theme-put-color: var(--theme-put-color);
-  --scalar-api-reference-rounded-lg: var(--theme-radius-lg);
-  --scalar-api-reference-theme-regular: var(--theme-regular);
-  --scalar-api-reference-theme-toc-width: var(--theme-toc-width);
-  --scalar-api-reference-theme-post-color: var(--theme-post-color);
-  --scalar-api-reference-theme-patch-color: var(--theme-patch-color);
-  --scalar-api-reference-theme-get-color: var(--theme-get-color);
-  --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
-  --scalar-api-reference-theme-put-color: var(--theme-put-color);
-} */
-
+/** Utilities, how do we deal with them? */
+.flex {
+  display: flex;
+}
+.flex-col {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+.gap-1 {
+  gap: 12px;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1461,11 +2088,10 @@ to {
 
 /** TODO: Move to components */
 .codemenu-topbar {
-  background: var(--theme-background-2);
-  border-bottom: 1px solid var(--theme-border-color);
+  background: var(--scalar-api-reference-theme-background-2);
+  border-bottom: 1px solid var(--scalar-api-reference-border-color);
   padding: 0 7px 0 12px;
-  /* prettier-ignore */
-  border-radius: var(--theme-radius) var(--theme-radius) 0 0;
+  border-radius: var(--scalar-api-reference-theme-radius) var(--scalar-api-reference-theme-radius) 0 0;
 }
 .codemenu {
   display: flex;
@@ -1641,6 +2267,11 @@ to {
   color: var(--scalar-api-reference-theme-color-1);
   text-decoration: underline;
 }
+.references,
+.references-narrow {
+  height: 100vh;
+  overflow-y: auto;
+}
 
 /* ----------------------------------------------------- */
 /* Responsive styles for narrow reference container (900px) */
@@ -1898,3 +2529,67 @@ to {
     flex-direction: column;
 }
 }
+:root {
+  /** Fonts */
+  --scalar-api-reference-font-sans: system-ui, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --scalar-api-reference-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono",
+    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
+    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+  --scalar-api-reference-sidebar-border-color: #000;
+  --scalar-api-reference-theme-background-1: #fff;
+  --scalar-api-reference-theme-background-2: #fafafa;
+  --scalar-api-reference-border-color: #d4d4d4;
+  --scalar-api-reference-border: 1px solid
+    var(--scalar-api-reference-border-color);
+  --scalar-api-reference-theme-button-1-color: #fff;
+  --scalar-api-reference-theme-button-1-hover: #ccc;
+  --scalar-api-reference-theme-button-1: red;
+  --scalar-api-reference-theme-color-1: #000;
+  --scalar-api-reference-theme-color-2: #a3a3a3;
+  --scalar-api-reference-theme-color-3: #666;
+  --scalar-api-reference-theme-color-ghost: #eee;
+  --scalar-api-reference-theme-error-color: red;
+  --scalar-api-reference-theme-font-size-4: 16px;
+  --scalar-api-reference-theme-header-height: 0;
+  --scalar-api-reference-rounded: 4px;
+  --scalar-api-reference-theme-semibold: 600;
+  --scalar-api-reference-theme-shadow-1: 0 0 4px rgba(0, 0, 0, 0.1);
+  --scalar-api-reference-theme-sidebar-width: 300px;
+  --scalar-api-reference-theme-small: 12px;
+  --scalar-api-reference-app-header-height: 100px;
+  --scalar-api-reference-col-width-1: 300px;
+  --scalar-api-reference-col-width-2: calc(50% - 150px);
+  --scalar-api-reference-col-width-3: calc(50% - 150px);
+  --scalar-api-reference-document-height: 100vh;
+  --scalar-api-reference-font-color: #000;
+  --scalar-api-reference-full-height: 100%;
+  --scalar-api-reference-sidebar-background-1: white;
+  --scalar-api-reference-sidebar-color-1: #000;
+  --scalar-api-reference-sidebar-color-2: #ccc;
+  --scalar-api-reference-sidebar-color-active: blue;
+  --scalar-api-reference-sidebar-item-hover-background: var(#ccc);
+  --scalar-api-reference-theme-background-3: #ccc;
+  --scalar-api-reference-theme-bold: 700;
+  --scalar-api-reference-border-width: 1px;
+  --scalar-api-reference-theme-color-accent: blue;
+  --scalar-api-reference-theme-delete-color: red;
+  --scalar-api-reference-theme-get-color: green;
+  --scalar-api-reference-theme-heading-2: 24px;
+  --scalar-api-reference-theme-heading-4: 16px;
+  --scalar-api-reference-theme-micro: 10px;
+  --scalar-api-reference-theme-mini: 12px;
+  --scalar-api-reference-theme-paragraph: 16px;
+  --scalar-api-reference-theme-patch-color: orange;
+  --scalar-api-reference-theme-post-color: blue;
+  --scalar-api-reference-theme-put-color: purple;
+  --scalar-api-reference-rounded-lg: 8px;
+  --scalar-api-reference-theme-regular: 14px;
+  --scalar-api-reference-theme-toc-width: 300px;
+  --scalar-api-reference-theme-post-color: blue;
+  --scalar-api-reference-theme-patch-color: orange;
+  --scalar-api-reference-theme-delete-color: red;
+  --scalar-api-reference-theme-get-color: green;
+  --scalar-api-reference-theme-put-color: purple;
+}