docusaurus-theme-openapi-docs 1.5.1 → 1.6.0

package/lib/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = docusaurusThemeOpenAPI;
 var _path = _interopRequireDefault(require("path"));
-var _webpack = require("webpack");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -14,6 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 function docusaurusThemeOpenAPI() {
   return {
     name: "docusaurus-theme-openapi",
@@ -29,16 +29,7 @@ function docusaurusThemeOpenAPI() {
     },
     configureWebpack() {
       return {
-        plugins: [new _webpack.ProvidePlugin({
-          Buffer: [require.resolve("buffer/"), "Buffer"],
-          process: require.resolve("process/browser")
-        })],
-        resolve: {
-          fallback: {
-            buffer: require.resolve("buffer/"),
-            process: require.resolve("process/browser")
-          }
-        }
+        plugins: [new NodePolyfillPlugin()]
       };
     }
   };

package/lib/markdown/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.create = create;
 exports.guard = guard;
 exports.render = render;
+exports.toString = toString;
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
  *
@@ -25,7 +26,7 @@ function create(tag, props) {
   return `<${tag}${propString}>${render(children)}</${tag}>`;
 }
 function guard(value, cb) {
-  if (value) {
+  if (value !== undefined) {
     const children = cb(value);
     return render(children);
   }
@@ -36,4 +37,20 @@ function render(children) {
     return children.filter(c => c !== undefined).join("");
   }
   return children !== null && children !== void 0 ? children : "";
+}
+function toString(value) {
+  // Return as-is if already string
+  if (typeof value === "string") {
+    return value;
+  }
+  // Return undefined if null or undefined
+  if (value == null) {
+    return undefined;
+  }
+  // Return formatted array if Array
+  if (Array.isArray(value)) {
+    return `[${value.join(", ")}]`;
+  }
+  // Coerce to string in all other cases,
+  return value + "";
 }

package/lib/theme/ApiDemoPanel/Curl/index.js

@@ -12,6 +12,7 @@ var _CodeTabs = _interopRequireDefault(require("@theme/ApiDemoPanel/CodeTabs"));
 var _hooks = require("@theme/ApiItem/hooks");
 var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -88,6 +89,15 @@ const languageSet = [{
     trimRequestBody: true
   },
   variant: "cURL"
+}, {
+  highlight: "java",
+  language: "java",
+  logoClass: "java",
+  options: {
+    followRedirect: true,
+    trimRequestBody: true
+  },
+  variant: "OkHttp"
 }];
 exports.languageSet = languageSet;
 function CodeTab({
@@ -122,15 +132,30 @@ function Curl({
   const headerParams = (0, _hooks.useTypedSelector)(state => state.params.header);
   const auth = (0, _hooks.useTypedSelector)(state => state.auth);
 
-  // TODO
+  // User-defined languages array
+  // Can override languageSet, change order of langs, override options and variants
   const langs = [...((_ref = siteConfig === null || siteConfig === void 0 ? void 0 : (_siteConfig$themeConf = siteConfig.themeConfig) === null || _siteConfig$themeConf === void 0 ? void 0 : _siteConfig$themeConf.languageTabs) !== null && _ref !== void 0 ? _ref : languageSet), ...codeSamples];
-  const defaultLang = languageSet.filter(lang => lang.language === localStorage.getItem("docusaurus.tab.code-samples"));
+
+  // Filter languageSet by user-defined langs
+  const filteredLanguageSet = languageSet.filter(ls => {
+    return langs.some(lang => {
+      return lang.language === ls.language;
+    });
+  });
+
+  // Merge user-defined langs into languageSet
+  const mergedLangs = (0, _merge.default)(filteredLanguageSet, langs);
+
+  // Read defaultLang from localStorage
+  const defaultLang = mergedLangs.filter(lang => lang.language === localStorage.getItem("docusaurus.tab.code-samples"));
   const [language, setLanguage] = (0, _react.useState)(() => {
     var _defaultLang$;
-    if (langs.length === 1) {
-      return langs[0];
+    // Return first index if only 1 user-defined language exists
+    if (mergedLangs.length === 1) {
+      return mergedLangs[0];
     }
-    return (_defaultLang$ = defaultLang[0]) !== null && _defaultLang$ !== void 0 ? _defaultLang$ : langs[0];
+    // Fall back to language in localStorage or first user-defined language
+    return (_defaultLang$ = defaultLang[0]) !== null && _defaultLang$ !== void 0 ? _defaultLang$ : mergedLangs[0];
   });
   const [codeText, setCodeText] = (0, _react.useState)("");
   (0, _react.useEffect)(() => {
@@ -155,7 +180,7 @@ function Curl({
     } else if (language && !!language.source) {
       setCodeText(language.source);
     } else if (language && !language.options) {
-      const langSource = languageSet.filter(lang => lang.language === language.language);
+      const langSource = mergedLangs.filter(lang => lang.language === language.language);
 
       // Merges user-defined language with default languageSet
       // This allows users to define only the minimal properties necessary in languageTabs
@@ -184,17 +209,19 @@ function Curl({
     } else {
       setCodeText("");
     }
-  }, [accept, body, contentType, cookieParams, headerParams, language, pathParams, postman, queryParams, server, auth]);
+  }, [accept, body, contentType, cookieParams, headerParams, language, pathParams, postman, queryParams, server, auth, mergedLangs]);
   if (language === undefined) {
     return null;
   }
   return <>
       <_CodeTabs.default groupId="code-samples" action={setLanguage}>
-        {langs.map(lang => {
+        {mergedLangs.map(lang => {
         return <CodeTab value={lang.language} label={""} key={lang.variant ? `${lang.language}-${lang.variant}` : lang.language} attributes={{
           className: `code__tab--${lang.logoClass}`
         }}>
-              <_CodeBlock.default language={lang.highlight}>{codeText}</_CodeBlock.default>
+              <_CodeBlock.default language={lang.highlight} className={_stylesModule.default.codeBlock}>
+                {codeText}
+              </_CodeBlock.default>
             </CodeTab>;
       })}
       </_CodeTabs.default>

package/lib/theme/ApiDemoPanel/Curl/styles.module.css

@@ -82,3 +82,8 @@
   background: var(--ifm-menu-color-background-active);
   color: var(--ifm-menu-color-active);
 }
+
+.codeBlock code {
+  max-width: revert;
+  max-height: revert;
+}

package/lib/theme/ApiDemoPanel/Request/index.js

@@ -31,7 +31,8 @@ function Request({
   const postman = new _postmanCollection.default.Request(item.postman);
   const metadata = (0, _internal.useDoc)();
   const {
-    proxy
+    proxy,
+    hide_send_button
   } = metadata.frontMatter;
   const params = {
     path: [],
@@ -49,7 +50,7 @@ function Request({
         <summary>
           <div className={`details__request-summary`}>
             <h4>Request</h4>
-            {item.servers && <_Execute.default postman={postman} proxy={proxy} />}
+            {item.servers && !hide_send_button && <_Execute.default postman={postman} proxy={proxy} />}
           </div>
         </summary>
         <div className={_stylesModule.default.optionsPanel}>

package/lib/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -16,35 +16,167 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * ========================================================================== */
 
 function SecuritySchemes(props) {
+  var _options$selected, _options$selected$;
   const options = (0, _hooks.useTypedSelector)(state => state.auth.options);
   const selected = (0, _hooks.useTypedSelector)(state => state.auth.selected);
   const infoAuthPath = `/${props.infoPath}#authentication`;
   if (selected === undefined) return null;
+  if (((_options$selected = options[selected]) === null || _options$selected === void 0 ? void 0 : (_options$selected$ = _options$selected[0]) === null || _options$selected$ === void 0 ? void 0 : _options$selected$.type) === undefined) {
+    return null;
+  }
   const selectedAuth = options[selected];
   return <details className={`details__demo-panel`} open={false}>
       <summary className={`details__request-summary`}>
         <h4>Authorization</h4>
       </summary>
       {selectedAuth.map(auth => {
+      const isHttp = auth.type === "http";
       const isApiKey = auth.type === "apiKey";
-      const isBearer = auth.type === "http" && auth.key === "Bearer";
       const isOauth2 = auth.type === "oauth2";
-      if (isApiKey || isBearer) {
+      const isOpenId = auth.type === "openIdConnect";
+      if (isHttp) {
+        var _auth$name;
+        if (auth.scheme === "bearer") {
+          const {
+            name,
+            key,
+            type,
+            scopes,
+            ...rest
+          } = auth;
+          return <_react.default.Fragment key={auth.key}>
+                <pre style={{
+              display: "flex",
+              flexDirection: "column",
+              background: "var(--openapi-card-background-color)"
+            }}>
+                  <span>
+                    <strong>name:</strong>{" "}
+                    <_Link.default to={infoAuthPath}>{name !== null && name !== void 0 ? name : key}</_Link.default>
+                  </span>
+                  <span>
+                    <strong>type: </strong>
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && <span>
+                      <strong>scopes: </strong>
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>}
+                  {Object.keys(rest).map((k, i) => {
+                return <span key={k}>
+                        <strong>{k}: </strong>
+                        {typeof rest[k] === "object" ? JSON.stringify(rest[k], null, 2) : String(rest[k])}
+                      </span>;
+              })}
+                </pre>
+              </_react.default.Fragment>;
+        }
+        if (auth.scheme === "basic") {
+          const {
+            name,
+            key,
+            type,
+            scopes,
+            ...rest
+          } = auth;
+          return <_react.default.Fragment key={auth.key}>
+                <pre style={{
+              display: "flex",
+              flexDirection: "column",
+              background: "var(--openapi-card-background-color)"
+            }}>
+                  <span>
+                    <strong>name:</strong>{" "}
+                    <_Link.default to={infoAuthPath}>{name !== null && name !== void 0 ? name : key}</_Link.default>
+                  </span>
+                  <span>
+                    <strong>type: </strong>
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && <span>
+                      <strong>scopes: </strong>
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>}
+                  {Object.keys(rest).map((k, i) => {
+                return <span key={k}>
+                        <strong>{k}: </strong>
+                        {typeof rest[k] === "object" ? JSON.stringify(rest[k], null, 2) : String(rest[k])}
+                      </span>;
+              })}
+                </pre>
+              </_react.default.Fragment>;
+        }
         return <_react.default.Fragment key={auth.key}>
               <pre style={{
             display: "flex",
             flexDirection: "column",
             background: "var(--openapi-card-background-color)"
           }}>
-                <span>type: {auth.type}</span>
                 <span>
-                  name: <_Link.default to={infoAuthPath}>{auth.name}</_Link.default>
+                  <strong>name:</strong>{" "}
+                  <_Link.default to={infoAuthPath}>{(_auth$name = auth.name) !== null && _auth$name !== void 0 ? _auth$name : auth.key}</_Link.default>
                 </span>
-                <span>in: {auth.in}</span>
+                <span>
+                  <strong>type: </strong>
+                  {auth.type}
+                </span>
+                <span>
+                  <strong>in: </strong>
+                  {auth.in}
+                </span>
+              </pre>
+            </_react.default.Fragment>;
+      }
+      if (isApiKey) {
+        const {
+          name,
+          key,
+          type,
+          scopes,
+          ...rest
+        } = auth;
+        return <_react.default.Fragment key={auth.key}>
+              <pre style={{
+            display: "flex",
+            flexDirection: "column",
+            background: "var(--openapi-card-background-color)"
+          }}>
+                <span>
+                  <strong>name:</strong>{" "}
+                  <_Link.default to={infoAuthPath}>{name !== null && name !== void 0 ? name : key}</_Link.default>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>}
+                {Object.keys(rest).map((k, i) => {
+              return <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object" ? JSON.stringify(rest[k], null, 2) : String(rest[k])}
+                    </span>;
+            })}
               </pre>
             </_react.default.Fragment>;
       }
       if (isOauth2) {
+        const {
+          name,
+          key,
+          type,
+          scopes,
+          flows,
+          ...rest
+        } = auth;
         return <_react.default.Fragment key={selected}>
               <pre style={{
             display: "flex",
@@ -52,14 +184,68 @@ function SecuritySchemes(props) {
             background: "var(--openapi-card-background-color)"
           }}>
                 <span>
-                  type: <_Link.default to={infoAuthPath}>{auth.type}</_Link.default>
+                  <strong>name:</strong>{" "}
+                  <_Link.default to={infoAuthPath}>{name !== null && name !== void 0 ? name : key}</_Link.default>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
                 </span>
-                {Object.keys(auth.flows).map(flow => {
-              return <span key={flow}>flow: {flow}</span>;
+                {scopes && scopes.length > 0 && <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>}
+                {Object.keys(rest).map((k, i) => {
+              return <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object" ? JSON.stringify(rest[k], null, 2) : String(rest[k])}
+                    </span>;
             })}
+                {flows && <span>
+                    <code>
+                      <strong>flows: </strong>
+                      {JSON.stringify(flows, null, 2)}
+                    </code>
+                  </span>}
+              </pre>
+            </_react.default.Fragment>;
+      }
+      if (isOpenId) {
+        const {
+          name,
+          key,
+          scopes,
+          type,
+          ...rest
+        } = auth;
+        return <_react.default.Fragment key={auth.key}>
+              <pre style={{
+            display: "flex",
+            flexDirection: "column",
+            background: "var(--openapi-card-background-color)"
+          }}>
+                <span>
+                  <strong>name:</strong>{" "}
+                  <_Link.default to={infoAuthPath}>{name !== null && name !== void 0 ? name : key}</_Link.default>
+                </span>
                 <span>
-                  scopes: <code>{auth.scopes.toString()}</code>
+                  <strong>type: </strong>
+                  {type}
                 </span>
+                {scopes && scopes.length > 0 && <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>}
+                {Object.keys(rest).map((k, i) => {
+              return <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object" ? JSON.stringify(rest[k], null, 2) : String(rest[k])}
+                    </span>;
+            })}
               </pre>
             </_react.default.Fragment>;
       }

package/lib/theme/ApiLogo/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = ApiLogo;
 var _react = _interopRequireDefault(require("react"));
 var _themeCommon = require("@docusaurus/theme-common");
+var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
+var _ThemedImage = _interopRequireDefault(require("@theme/ThemedImage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -22,5 +24,26 @@ function ApiLogo(props) {
     logo,
     darkLogo
   } = props;
-  return logo ? <img alt={colorMode === "dark" && darkLogo ? darkLogo.altText : logo.altText} src={colorMode === "dark" && darkLogo ? darkLogo.url : logo.url} width="250px" /> : <div />;
+  const altText = () => {
+    if (colorMode === "dark") {
+      var _darkLogo$altText;
+      return (_darkLogo$altText = darkLogo === null || darkLogo === void 0 ? void 0 : darkLogo.altText) !== null && _darkLogo$altText !== void 0 ? _darkLogo$altText : logo === null || logo === void 0 ? void 0 : logo.altText;
+    }
+    return logo === null || logo === void 0 ? void 0 : logo.altText;
+  };
+  const lightLogoUrl = (0, _useBaseUrl.default)(logo === null || logo === void 0 ? void 0 : logo.url);
+  const darkLogoUrl = (0, _useBaseUrl.default)(darkLogo === null || darkLogo === void 0 ? void 0 : darkLogo.url);
+  if (logo && darkLogo) {
+    return <_ThemedImage.default alt={altText()} sources={{
+      light: lightLogoUrl,
+      dark: darkLogoUrl
+    }} className="openapi__logo" />;
+  }
+  if (logo || darkLogo) {
+    return <_ThemedImage.default alt={altText()} sources={{
+      light: lightLogoUrl !== null && lightLogoUrl !== void 0 ? lightLogoUrl : darkLogoUrl,
+      dark: lightLogoUrl !== null && lightLogoUrl !== void 0 ? lightLogoUrl : darkLogoUrl
+    }} className="openapi__logo" />;
+  }
+  return undefined;
 }

package/lib/theme/ParamsItem/index.js

@@ -8,6 +8,8 @@
 import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+import SchemaTabs from "@theme/SchemaTabs";
+import TabItem from "@theme/TabItem";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
@@ -16,7 +18,10 @@ import {
   getSchemaName,
 } from "docusaurus-theme-openapi-docs/lib/markdown/schema";
 /* eslint-disable import/no-extraneous-dependencies*/
-import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
+import {
+  guard,
+  toString,
+} from "docusaurus-theme-openapi-docs/lib/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -25,6 +30,10 @@ import styles from "./styles.module.css";
 function ParamsItem({
   param: { description, example, examples, name, required, schema },
 }) {
+  if (!schema || !schema?.type) {
+    schema = { type: "any" };
+  }
+
   const renderSchemaName = guard(schema, (schema) => (
     <span className={styles.schemaName}> {getSchemaName(schema)}</span>
   ));
@@ -76,17 +85,35 @@ function ParamsItem({
     )
   );
 
-  const renderExample = guard(example, (example) => (
-    <div>{`Example: ${example}`}</div>
+  const renderExample = guard(toString(example), (example) => (
+    <div>
+      <strong>Example: </strong>
+      {example}
+    </div>
   ));
 
   const renderExamples = guard(examples, (examples) => {
     const exampleEntries = Object.entries(examples);
     return (
       <>
-        {exampleEntries.map(([k, v]) => (
-          <div>{`Example (${k}): ${v.value}`}</div>
-        ))}
+        <strong>Examples:</strong>
+        <SchemaTabs>
+          {exampleEntries.map(([exampleName, exampleProperties]) => (
+            <TabItem value={exampleName} label={exampleName}>
+              {exampleProperties.summary && <p>{exampleProperties.summary}</p>}
+              {exampleProperties.description && (
+                <p>
+                  <strong>Description: </strong>
+                  <span>{exampleProperties.description}</span>
+                </p>
+              )}
+              <p>
+                <strong>Example: </strong>
+                <code>{exampleProperties.value}</code>
+              </p>
+            </TabItem>
+          ))}
+        </SchemaTabs>
       </>
     );
   });

package/lib/theme/SchemaItem/index.js

@@ -11,7 +11,10 @@ import CodeBlock from "@theme/CodeBlock";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
-import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
+import {
+  guard,
+  toString,
+} from "docusaurus-theme-openapi-docs/lib/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -23,11 +26,20 @@ function SchemaItem({
   name,
   qualifierMessage,
   required,
-  deprecated,
-  schemaDescription,
   schemaName,
-  defaultValue,
+  schema,
 }) {
+  let deprecated;
+  let schemaDescription;
+  let defaultValue;
+  let nullable;
+  if (schema) {
+    deprecated = schema.deprecated;
+    schemaDescription = schema.description;
+    defaultValue = schema.default;
+    nullable = schema.nullable;
+  }
+
   const renderRequired = guard(
     Array.isArray(required) ? required.includes(name) : required,
     () => <strong className={styles.required}> required</strong>
@@ -37,6 +49,10 @@ function SchemaItem({
     <strong className={styles.deprecated}> deprecated</strong>
   ));
 
+  const renderNullable = guard(nullable, () => (
+    <strong className={styles.nullable}> nullable</strong>
+  ));
+
   const renderSchemaDescription = guard(schemaDescription, (description) => (
     <div>
       <ReactMarkdown
@@ -67,19 +83,17 @@ function SchemaItem({
     </div>
   ));
 
-  const renderDefaultValue = guard(
-    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
-    (value) => (
-      <div className={styles.schemaQualifierMessage}>
-        <ReactMarkdown children={`**Default value:** \`${value}\``} />
-      </div>
-    )
-  );
+  const renderDefaultValue = guard(toString(defaultValue), (value) => (
+    <div className={styles.schemaQualifierMessage}>
+      <ReactMarkdown children={`**Default value:** \`${value}\``} />
+    </div>
+  ));
 
   const schemaContent = (
     <div>
       <strong className={deprecated && styles.strikethrough}>{name}</strong>
       <span className={styles.schemaName}> {schemaName}</span>
+      {renderNullable}
       {!deprecated && renderRequired}
       {renderDeprecated}
       {renderQualifierMessage}

package/lib/theme/SchemaItem/styles.module.css

@@ -28,6 +28,11 @@
   color: var(--openapi-deprecated);
 }
 
+.nullable {
+  font-size: var(--ifm-code-font-size);
+  color: var(--openapi-nullable);
+}
+
 .strikethrough {
   text-decoration: line-through;
 }

package/lib/theme/SchemaTabs/index.js

@@ -241,11 +241,11 @@ function SchemaTabsComponent(props) {
               (tabItem) => tabItem.props.value === defaultValue
             )[0],
           {
-            className: "margin-vert--md",
+            className: styles.marginVertical,
           }
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className={styles.marginVertical}>
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,

package/lib/theme/SchemaTabs/styles.module.css

@@ -103,3 +103,8 @@
     width: 100%;
   }
 }
+
+.marginVertical {
+  margin-top: 1rem !important;
+  margin-bottom: unset !important;
+}