docusaurus-theme-openapi-docs 0.0.0-beta.659 → 0.0.0-beta.660

package/src/theme/{ApiDemoPanel → ApiExplorer}/Body/index.tsx

@@ -7,12 +7,12 @@
 
 import React from "react";
 
-import json2xml from "@theme/ApiDemoPanel/Body/json2xml";
-import FormFileUpload from "@theme/ApiDemoPanel/FormFileUpload";
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
-import LiveApp from "@theme/ApiDemoPanel/LiveEditor";
+import json2xml from "@theme/ApiExplorer/Body/json2xml";
+import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
+import FormItem from "@theme/ApiExplorer/FormItem";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import LiveApp from "@theme/ApiExplorer/LiveEditor";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
@@ -121,7 +121,7 @@ function Body({
     schema?.type === "object"
   ) {
     return (
-      <FormItem className="openapi-demo__form-item-body-container">
+      <FormItem className="openapi-explorer__form-item-body-container">
         <div>
           {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
             if (val.format === "binary") {
@@ -314,7 +314,7 @@ function Body({
 
   if (examplesBodies && examplesBodies.length > 0) {
     return (
-      <FormItem className="openapi-demo__form-item-body-container">
+      <FormItem className="openapi-explorer__form-item-body-container">
         <SchemaTabs className="openapi-tabs__schema" lazy>
           {/* @ts-ignore */}
           <TabItem label="Default" value="default" default>

package/src/theme/{ApiDemoPanel/Curl → ApiExplorer/CodeSnippets}/index.tsx

@@ -10,9 +10,9 @@ import React, { useState, useEffect } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import codegen from "@paloaltonetworks/postman-code-generators";
 import sdk from "@paloaltonetworks/postman-collection";
-import ApiCodeBlock from "@theme/ApiDemoPanel/ApiCodeBlock";
-import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
-import CodeTabs from "@theme/ApiDemoPanel/CodeTabs";
+import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
+import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
+import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
 import merge from "lodash/merge";
 
@@ -143,7 +143,7 @@ function CodeTab({ children, hidden, className, onClick }: any): JSX.Element {
   );
 }
 
-function Curl({ postman, codeSamples }: Props) {
+function CodeSnippets({ postman, codeSamples }: Props) {
   // TODO: match theme for vscode.
 
   const { siteConfig } = useDocusaurusContext();
@@ -348,7 +348,7 @@ function Curl({ postman, codeSamples }: Props) {
                       {/* @ts-ignore */}
                       <ApiCodeBlock
                         language={lang.highlight}
-                        className="openapi-demo__code-block"
+                        className="openapi-explorer__code-block"
                         showLineNumbers={true}
                       >
                         {codeText}
@@ -365,4 +365,4 @@ function Curl({ postman, codeSamples }: Props) {
   );
 }
 
-export default Curl;
+export default CodeSnippets;

package/src/theme/{ApiDemoPanel → ApiExplorer}/CodeTabs/_CodeTabs.scss

@@ -17,7 +17,7 @@
     padding: 1rem;
     background-color: var(--ifm-pre-background);
     border-radius: var(--ifm-global-radius);
-    border: 1px solid var(--openapi-demo-border-color);
+    border: 1px solid var(--openapi-explorer-border-color);
     box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
       0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
     transition: 300ms;
@@ -68,14 +68,14 @@
   margin-top: unset !important;
 }
 
-.openapi-demo__code-block code {
+.openapi-explorer__code-block code {
   max-height: 200px;
-  font-size: var(--openapi-demo-font-size-code);
+  font-size: var(--openapi-explorer-font-size-code);
   padding-top: var(--ifm-pre-padding);
 }
 
 body[class="ReactModal__Body--open"] {
-  .openapi-demo__code-block code {
+  .openapi-explorer__code-block code {
     max-height: 600px;
   }
 }

package/src/theme/{ApiDemoPanel → ApiExplorer}/CodeTabs/index.js

@@ -12,7 +12,7 @@ import {
   useTabs,
 } from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import { languageSet } from "@theme/ApiDemoPanel/Curl";
+import { languageSet } from "@theme/ApiExplorer/CodeSnippets";
 import clsx from "clsx";
 
 function TabList({

package/src/theme/{ApiDemoPanel → ApiExplorer}/ContentType/index.tsx

@@ -7,8 +7,8 @@
 
 import React from "react";
 
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
+import FormItem from "@theme/ApiExplorer/FormItem";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 
 import { setContentType } from "./slice";

package/src/theme/{ApiDemoPanel → ApiExplorer}/FloatingButton/_FloatingButton.scss

@@ -1,4 +1,4 @@
-.openapi-demo__floating-btn {
+.openapi-explorer__floating-btn {
   position: relative;
 
   button {
@@ -17,9 +17,9 @@
     right: calc(var(--ifm-pre-padding) / 2);
   }
 }
-.openapi-demo__floating-btn:hover button,
-.openapi-demo__floating-btn:focus-visible button,
-.openapi-demo__floating-btn button:focus-visible {
+.openapi-explorer__floating-btn:hover button,
+.openapi-explorer__floating-btn:focus-visible button,
+.openapi-explorer__floating-btn button:focus-visible {
   visibility: visible;
   opacity: 1;
 }

package/src/theme/{ApiDemoPanel → ApiExplorer}/FloatingButton/index.tsx

@@ -15,7 +15,7 @@ export interface Props {
 
 function FloatingButton({ label, onClick, children }: Props) {
   return (
-    <div tabIndex={0} className="openapi-demo__floating-btn">
+    <div tabIndex={0} className="openapi-explorer__floating-btn">
       {label && (
         <button tabIndex={0} onClick={onClick}>
           {label}

package/src/theme/{ApiDemoPanel → ApiExplorer}/FormFileUpload/_FormFileUpload.scss

@@ -1,4 +1,4 @@
-.openapi-demo__dropzone {
+.openapi-explorer__dropzone {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -19,13 +19,13 @@
       ),
       linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
 
-    .openapi-demo__dropzone-content {
+    .openapi-explorer__dropzone-content {
       color: var(--ifm-pre-color);
     }
   }
 }
 
-.openapi-demo__dropzone-hover {
+.openapi-explorer__dropzone-hover {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -44,7 +44,7 @@
     ),
     linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
 
-  .openapi-demo__dropzone-content {
+  .openapi-explorer__dropzone-content {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -53,7 +53,7 @@
     color: var(--ifm-pre-color);
   }
 
-  .openapi-demo__file-name {
+  .openapi-explorer__file-name {
     margin: 0 calc(var(--ifm-pre-padding) * 1.5);
     white-space: nowrap;
     overflow: hidden;
@@ -62,7 +62,7 @@
   }
 }
 
-.openapi-demo__dropzone-content {
+.openapi-explorer__dropzone-content {
   display: flex;
   align-items: center;
   justify-content: center;

package/src/theme/{ApiDemoPanel → ApiExplorer}/FormFileUpload/index.tsx

@@ -7,7 +7,7 @@
 
 import React, { useState } from "react";
 
-import FloatingButton from "@theme/ApiDemoPanel/FloatingButton";
+import FloatingButton from "@theme/ApiExplorer/FloatingButton";
 import MagicDropzone from "react-magic-dropzone";
 
 type PreviewFile = { preview: string } & File;
@@ -53,7 +53,7 @@ function RenderPreview({ file }: RenderPreviewProps) {
               d="M0.210,-0.000 L40.000,39.790 L40.000,40.000 L15.000,40.000 C6.716,40.000 0.000,33.284 0.000,25.000 L0.000,-0.000 L0.210,-0.000 Z"
             />
           </svg>
-          <div className="openapi-demo__file-name">{file.name}</div>
+          <div className="openapi-explorer__file-name">{file.name}</div>
         </div>
       );
   }
@@ -83,7 +83,9 @@ function FormFileUpload({ placeholder, onChange }: Props) {
     <FloatingButton>
       <MagicDropzone
         className={
-          hover ? "openapi-demo__dropzone-hover" : "openapi-demo__dropzone"
+          hover
+            ? "openapi-explorer__dropzone-hover"
+            : "openapi-explorer__dropzone"
         }
         onDrop={handleDrop}
         onDragEnter={() => setHover(true)}
@@ -105,7 +107,9 @@ function FormFileUpload({ placeholder, onChange }: Props) {
             <RenderPreview file={file} />
           </>
         ) : (
-          <div className="openapi-demo__dropzone-content">{placeholder}</div>
+          <div className="openapi-explorer__dropzone-content">
+            {placeholder}
+          </div>
         )}
       </MagicDropzone>
     </FloatingButton>

package/src/theme/ApiExplorer/FormItem/_FormItem.scss

@@ -0,0 +1,21 @@
+.openapi-explorer__form-item {
+  padding: var(--openapi-explorer-padding-input);
+  font-size: var(--openapi-explorer-font-size-input);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  .required {
+    color: var(--openapi-required);
+  }
+}
+
+.openapi-explorer__form-item-body-container {
+  padding: 0;
+}
+
+.openapi-explorer__form-item-label {
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: bold;
+}

package/src/theme/{ApiDemoPanel → ApiExplorer}/FormItem/index.tsx

@@ -19,9 +19,9 @@ export interface Props {
 
 function FormItem({ label, type, required, children, className }: Props) {
   return (
-    <div className={clsx("openapi-demo__form-item", className)}>
+    <div className={clsx("openapi-explorer__form-item", className)}>
       {label && (
-        <label className="openapi-demo__form-item-label">{label}</label>
+        <label className="openapi-explorer__form-item-label">{label}</label>
       )}
       {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
       {required && <span className="openapi-schema__required">required</span>}

package/{lib/theme/ApiDemoPanel → src/theme/ApiExplorer}/FormMultiSelect/_FormMultiSelect.scss

@@ -1,4 +1,4 @@
-.openapi-demo__multi-select-input {
+.openapi-explorer__multi-select-input {
   width: 100%;
   margin-top: calc(var(--ifm-pre-padding) / 2);
   padding: 1rem;
@@ -6,7 +6,7 @@
   border: 1px solid transparent;
   background-color: var(--openapi-input-background);
   outline: none;
-  font-size: var(--openapi-demo-font-size-input);
+  font-size: var(--openapi-explorer-font-size-input);
   color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;

package/src/theme/{ApiDemoPanel → ApiExplorer}/FormMultiSelect/index.tsx

@@ -35,7 +35,7 @@ function FormMultiSelect({ value, options, onChange, showErrors }: Props) {
   return (
     <select
       style={{ height: height }}
-      className={clsx("openapi-demo__multi-select-input", {
+      className={clsx("openapi-explorer__multi-select-input", {
         error: showErrors,
       })}
       value={value}

package/{lib/theme/ApiDemoPanel → src/theme/ApiExplorer}/FormSelect/_FormSelect.scss

@@ -1,4 +1,4 @@
-html[data-theme="dark"] .openapi-demo__select-input {
+html[data-theme="dark"] .openapi-explorer__select-input {
   margin-top: calc(var(--ifm-pre-padding) / 2);
   background-color: var(--openapi-input-background);
   border: none;
@@ -17,15 +17,15 @@ html[data-theme="dark"] .openapi-demo__select-input {
   background-size: auto auto;
 }
 
-.openapi-demo__select-input {
+.openapi-explorer__select-input {
   width: 100%;
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: var(--openapi-demo-padding-input);
+  padding: var(--openapi-explorer-padding-input);
   border: none;
   outline: none;
   border-radius: 4px;
   background-color: var(--openapi-input-background);
-  font-size: var(--openapi-demo-font-size-input);
+  font-size: var(--openapi-explorer-font-size-input);
   font-family: var(--ifm-font-family-monospace);
   color: var(--ifm-pre-color);
   -moz-appearance: none;

package/src/theme/{ApiDemoPanel → ApiExplorer}/FormSelect/index.tsx

@@ -20,7 +20,7 @@ function FormSelect({ value, options, onChange }: Props) {
 
   return (
     <select
-      className="openapi-demo__select-input"
+      className="openapi-explorer__select-input"
       value={value}
       onChange={onChange}
     >

package/{lib/theme/ApiDemoPanel → src/theme/ApiExplorer}/FormTextInput/_FormTextInput.scss

@@ -1,11 +1,11 @@
-.openapi-demo__form-item-input {
+.openapi-explorer__form-item-input {
   margin-top: calc(var(--ifm-pre-padding) / 2);
   background-color: var(--openapi-input-background);
   border: 1px solid transparent;
   outline: none;
   width: 100%;
   color: var(--ifm-pre-color);
-  padding: var(--openapi-demo-padding-input);
+  padding: var(--openapi-explorer-padding-input);
   border-radius: 4px;
 
   &:hover {
@@ -22,10 +22,10 @@
   }
 }
 
-.openapi-demo__input-error {
-  font-size: var(--openapi-demo-font-size-input);
+.openapi-explorer__input-error {
+  font-size: var(--openapi-explorer-font-size-input);
   color: var(--openapi-required);
-  padding-top: var(--openapi-demo-padding-input);
+  padding-top: var(--openapi-explorer-padding-input);
 
   &::before {
     display: inline;

package/src/theme/{ApiDemoPanel → ApiExplorer}/FormTextInput/index.tsx

@@ -43,7 +43,7 @@ function FormTextInput({
           {...register(paramName, {
             required: isRequired ? "This field is required" : false,
           })}
-          className={clsx("openapi-demo__form-item-input", {
+          className={clsx("openapi-explorer__form-item-input", {
             error: showErrorMessage,
           })}
           type={password ? "password" : "text"}
@@ -55,7 +55,7 @@ function FormTextInput({
         />
       ) : (
         <input
-          className="openapi-demo__form-item-input"
+          className="openapi-explorer__form-item-input"
           type={password ? "password" : "text"}
           placeholder={placeholder}
           title={placeholder}
@@ -69,7 +69,7 @@ function FormTextInput({
           errors={errors}
           name={paramName}
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/LiveEditor/_LiveEditor.scss

@@ -1,4 +1,4 @@
-.openapi-demo__playground-container {
+.openapi-explorer__playground-container {
   margin-top: 1rem;
   margin-bottom: var(--ifm-leading);
   border-radius: var(--ifm-global-radius);
@@ -7,7 +7,7 @@
   max-height: 500px;
 }
 
-.openapi-demo__playground-editor {
+.openapi-explorer__playground-editor {
   font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
     var(--ifm-font-family-monospace) !important;
   /* rtl:ignore */

package/src/theme/{ApiDemoPanel → ApiExplorer}/LiveEditor/index.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useState } from "react";
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { ErrorMessage } from "@hookform/error-message";
-import { setStringRawBody } from "@theme/ApiDemoPanel/Body/slice";
+import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
 import clsx from "clsx";
 import { Controller, useFormContext } from "react-hook-form";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
@@ -27,8 +27,8 @@ function Live({ onEdit, showErrors }: any) {
       <LiveEditor
         key={String(isBrowser)}
         className={clsx({
-          "openapi-demo__playground-editor": true,
-          "openapi-demo__form-item-input": showErrors,
+          "openapi-explorer__playground-editor": true,
+          "openapi-explorer__form-item-input": showErrors,
           error: showErrors,
         })}
         onChange={onEdit}
@@ -72,7 +72,7 @@ function App({
   return (
     <div
       className={clsx({
-        "openapi-demo__playground-container": true,
+        "openapi-explorer__playground-container": true,
       })}
     >
       <LiveProvider
@@ -99,7 +99,7 @@ function App({
             errors={errors}
             name="requestBody"
             render={({ message }) => (
-              <div className="openapi-demo__input-error">{message}</div>
+              <div className="openapi-explorer__input-error">{message}</div>
             )}
           />
         )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx

@@ -9,9 +9,9 @@ import React, { useEffect, useState } from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
 import { nanoid } from "@reduxjs/toolkit";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -114,7 +114,7 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
                   onChange={handleChangeItem(item, onChange)}
                 />
                 <button
-                  className="openapi-demo__delete-btn"
+                  className="openapi-explorer__delete-btn"
                   onClick={handleDeleteItem(item)}
                 >
                   <svg
@@ -133,7 +133,10 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
                 </button>
               </div>
             ))}
-            <button className="openapi-demo__thin-btn" onClick={handleAddItem}>
+            <button
+              className="openapi-explorer__thin-btn"
+              onClick={handleAddItem}
+            >
               Add item
             </button>
           </>
@@ -144,7 +147,7 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramArray"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -55,7 +55,7 @@ export default function ParamBooleanFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramBoolean"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
-import FormMultiSelect from "@theme/ApiDemoPanel/FormMultiSelect";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormMultiSelect from "@theme/ApiExplorer/FormMultiSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -77,7 +77,7 @@ export default function ParamMultiSelectFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramMultiSelect"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -56,7 +56,7 @@ export default function ParamSelectFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramSelect"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamTextFormItem.tsx

@@ -7,8 +7,8 @@
 
 import React from "react";
 
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 
 export interface ParamProps {

package/{lib/theme/ApiDemoPanel → src/theme/ApiExplorer}/ParamOptions/_ParamOptions.scss

@@ -1,4 +1,4 @@
-.openapi-demo__plus-btn--expanded {
+.openapi-explorer__plus-btn--expanded {
   transition: transform 0.2s ease;
   display: inline-block;
   transform: rotate(0deg);
@@ -7,7 +7,7 @@
   transform: rotate(45deg);
 }
 
-.openapi-demo__show-more-btn {
+.openapi-explorer__show-more-btn {
   width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -16,7 +16,7 @@
   margin-bottom: 0.5rem;
   padding: 0;
   cursor: pointer;
-  font-size: var(--openapi-demo-font-size-input);
+  font-size: var(--openapi-explorer-font-size-input);
   user-select: none;
   white-space: nowrap;
   border: 0px solid transparent;
@@ -34,7 +34,7 @@
   }
 }
 
-.openapi-demo__delete-btn {
+.openapi-explorer__delete-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -77,7 +77,7 @@
   }
 }
 
-.openapi-demo__thin-btn {
+.openapi-explorer__thin-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
@@ -112,11 +112,11 @@
   }
 }
 
-.openapi-demo__show-options {
+.openapi-explorer__show-options {
   visibility: visible;
 }
 
-.openapi-demo__hide-options {
+.openapi-explorer__hide-options {
   display: none;
   visibility: hidden;
 }