fix: react18 cli integration (#2404)

* fix: react18 cli integration * fix: update unit tests snapshots
2025-11-01 00:07:32 +03:00 · 2023-09-08 10:51:39 +03:00 · 2023-09-08 10:51:39 +03:00 · 76edc15939
commit 76edc15939
parent 2eff85a261
20 changed files with 117 additions and 127 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -25,7 +25,7 @@
        "polished": "^4.1.3",
        "prismjs": "^1.27.0",
        "prop-types": "^15.7.2",
-        "react-tabs": "^3.2.2",
+        "react-tabs": "^4.3.0",
        "slugify": "~1.4.7",
        "stickyfill": "^1.1.1",
        "swagger2openapi": "^7.0.6",
@ -49,7 +49,6 @@
        "@types/prop-types": "^15.7.3",
        "@types/react": "^17.0.8",
        "@types/react-dom": "^17.0.5",
-        "@types/react-tabs": "^2.3.2",
        "@types/styled-components": "^5.1.1",
        "@types/tapable": "^2.2.2",
        "@types/webpack": "^5.28.0",
@ -3960,15 +3959,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/react-tabs": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.2.tgz",
-      "integrity": "sha512-QfMelaJSdMcp+CenKhATp12XFFqqUcLXILgwpX3dgWfVYNZPtsLXZDDCRsVn+kwmBOWB+DFPKpQorxbUhnXINw==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
    "node_modules/@types/retry": {
      "version": "0.12.1",
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@ -15804,15 +15794,15 @@
      }
    },
    "node_modules/react-tabs": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.2.tgz",
-      "integrity": "sha512-/o52eGKxFHRa+ssuTEgSM8qORnV4+k7ibW+aNQzKe+5gifeVz8nLxCrsI9xdRhfb0wCLdgIambIpb1qCxaMN+A==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
+      "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
      "dependencies": {
        "clsx": "^1.1.0",
        "prop-types": "^15.5.0"
      },
      "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0-0"
+        "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
      }
    },
    "node_modules/react-test-renderer": {
@ -22108,15 +22098,6 @@
        "@types/react": "*"
      }
    },
-    "@types/react-tabs": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.2.tgz",
-      "integrity": "sha512-QfMelaJSdMcp+CenKhATp12XFFqqUcLXILgwpX3dgWfVYNZPtsLXZDDCRsVn+kwmBOWB+DFPKpQorxbUhnXINw==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
    "@types/retry": {
      "version": "0.12.1",
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@ -30991,9 +30972,9 @@
      }
    },
    "react-tabs": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.2.tgz",
-      "integrity": "sha512-/o52eGKxFHRa+ssuTEgSM8qORnV4+k7ibW+aNQzKe+5gifeVz8nLxCrsI9xdRhfb0wCLdgIambIpb1qCxaMN+A==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
+      "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
      "requires": {
        "clsx": "^1.1.0",
        "prop-types": "^15.5.0"
--- a/package.json
+++ b/package.json
@ -78,7 +78,6 @@
    "@types/prop-types": "^15.7.3",
    "@types/react": "^17.0.8",
    "@types/react-dom": "^17.0.5",
-    "@types/react-tabs": "^2.3.2",
    "@types/styled-components": "^5.1.1",
    "@types/tapable": "^2.2.2",
    "@types/webpack": "^5.28.0",
@ -157,7 +156,7 @@
    "polished": "^4.1.3",
    "prismjs": "^1.27.0",
    "prop-types": "^15.7.2",
-    "react-tabs": "^3.2.2",
+    "react-tabs": "^4.3.0",
    "slugify": "~1.4.7",
    "stickyfill": "^1.1.1",
    "swagger2openapi": "^7.0.6",
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@ -1,14 +1,14 @@
 import { SECTION_ATTR } from '../services/MenuStore';
 import styled, { media } from '../styled-components';

-export const MiddlePanel = styled.div<{ compact?: boolean }>`
+export const MiddlePanel = styled.div<{ $compact?: boolean }>`
  width: calc(100% - ${props => props.theme.rightPanel.width});
  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;

-  ${({ compact, theme }) =>
+  ${({ $compact, theme }) =>
    media.lessThan('medium', true)`
    width: 100%;
-    padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${
+    padding: ${`${$compact ? 0 : theme.spacing.sectionVertical}px ${
      theme.spacing.sectionHorizontal
    }px`};
  `};
@ -16,7 +16,7 @@ export const MiddlePanel = styled.div<{ compact?: boolean }>`

 export const Section = styled.div.attrs(props => ({
  [SECTION_ATTR]: props.id,
-}))<{ underlined?: boolean }>`
+}))<{ $underlined?: boolean }>`
  padding: ${props => props.theme.spacing.sectionVertical}px 0;

  &:last-child {
@ -30,8 +30,8 @@ export const Section = styled.div.attrs(props => ({
  ${media.lessThan('medium', true)`
    padding: 0;
  `}
-  ${(props: any) =>
-    (props.underlined &&
+  ${({ $underlined }) =>
+    ($underlined &&
      `
    position: relative;

--- a/src/components/Callbacks/CallbackTitle.tsx
+++ b/src/components/Callbacks/CallbackTitle.tsx
@ -24,7 +24,7 @@ export const CallbackTitle = (props: CallbackTitleProps) => {
    <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
      <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
      <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
-      <CallbackName deprecated={deprecated}>{name}</CallbackName>
+      <CallbackName $deprecated={deprecated}>{name}</CallbackName>
      {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
    </CallbackTitleWrapper>
  );
@ -45,8 +45,8 @@ const CallbackTitleWrapper = styled.button`
  }
 `;

-const CallbackName = styled.span<{ deprecated?: boolean }>`
-  text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
+const CallbackName = styled.span<{ $deprecated?: boolean }>`
+  text-decoration: ${props => (props.$deprecated ? 'line-through' : 'none')};
  margin-right: 8px;
 `;

--- a/src/components/ContentItems/ContentItems.tsx
+++ b/src/components/ContentItems/ContentItems.tsx
@ -51,7 +51,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
    return (
      <>
        {content && (
-          <Section id={item.id} underlined={item.type === 'operation'}>
+          <Section id={item.id} $underlined={item.type === 'operation'}>
            {content}
          </Section>
        )}
@ -61,7 +61,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
  }
 }

-const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
+const middlePanelWrap = component => <MiddlePanel $compact={true}>{component}</MiddlePanel>;

@observer
 export class SectionItem extends React.Component<ContentItemProps> {
@ -72,7 +72,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
    return (
      <>
        <Row>
-          <MiddlePanel compact={false}>
+          <MiddlePanel $compact={false}>
            <Header>
              <ShareLink to={this.props.item.id} />
              {name}
--- a/src/components/Endpoint/Endpoint.tsx
+++ b/src/components/Endpoint/Endpoint.tsx
@ -49,8 +49,8 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
      <OptionsContext.Consumer>
        {options => (
          <OperationEndpointWrap>
-            <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
-              <HttpVerb type={operation.httpVerb} compact={this.props.compact}>
+            <EndpointInfo onClick={this.toggle} $expanded={expanded} $inverted={inverted}>
+              <HttpVerb type={operation.httpVerb} $compact={this.props.compact}>
                {operation.httpVerb}
              </HttpVerb>
              <ServerRelativeURL>{operation.path}</ServerRelativeURL>
@ -62,7 +62,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
                style={{ marginRight: '-25px' }}
              />
            </EndpointInfo>
-            <ServersOverlay expanded={expanded} aria-hidden={!expanded}>
+            <ServersOverlay $expanded={expanded} aria-hidden={!expanded}>
              {operation.servers.map(server => {
                const normalizedUrl = options.expandDefaultServerVariables
                  ? expandDefaultServerVariables(server.url, server.variables)
--- a/src/components/Endpoint/styled.elements.ts
+++ b/src/components/Endpoint/styled.elements.ts
@ -14,61 +14,62 @@ export const ServerRelativeURL = styled.span`
  text-overflow: ellipsis;
 `;

-export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>`
+export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boolean }>`
  outline: 0;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
-  padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
-  border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
+  padding: 10px 30px 10px ${props => (props.$inverted ? '10px' : '20px')};
+  border-radius: ${props => (props.$inverted ? '0' : '4px 4px 0 0')};
  background-color: ${props =>
-    props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
+    props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
  display: flex;
  white-space: nowrap;
  align-items: center;
-  border: ${props => (props.inverted ? '0' : '1px solid transparent')};
-  border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
+  border: ${props => (props.$inverted ? '0' : '1px solid transparent')};
+  border-bottom: ${props => (props.$inverted ? '1px solid #ccc' : '0')};
  transition: border-color 0.25s ease;

  ${props =>
-    (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
+    (props.$expanded && !props.$inverted && `border-color: ${props.theme.colors.border.dark};`) ||
+    ''}

  .${ServerRelativeURL} {
-    color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
+    color: ${props => (props.$inverted ? props.theme.colors.text.primary : '#ffffff')};
  }
  &:focus {
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
  }
 `;

-export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
+export const HttpVerb = styled.span.attrs((props: { type: string; $compact?: boolean }) => ({
  className: `http-verb ${props.type}`,
-}))<{ type: string; compact?: boolean }>`
-  font-size: ${props => (props.compact ? '0.8em' : '0.929em')};
-  line-height: ${props => (props.compact ? '18px' : '20px')};
+}))<{ type: string; $compact?: boolean }>`
+  font-size: ${props => (props.$compact ? '0.8em' : '0.929em')};
+  line-height: ${props => (props.$compact ? '18px' : '20px')};
  background-color: ${props => props.theme.colors.http[props.type] || '#999999'};
  color: #ffffff;
-  padding: ${props => (props.compact ? '2px 8px' : '3px 10px')};
+  padding: ${props => (props.$compact ? '2px 8px' : '3px 10px')};
  text-transform: uppercase;
  font-family: ${props => props.theme.typography.headings.fontFamily};
  margin: 0;
 `;

-export const ServersOverlay = styled.div<{ expanded: boolean }>`
+export const ServersOverlay = styled.div<{ $expanded: boolean }>`
  position: absolute;
  width: 100%;
  z-index: 100;
  background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor};
  color: ${props => props.theme.rightPanel.servers.overlay.textColor};
  box-sizing: border-box;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
  overflow: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  transition: all 0.25s ease;
  visibility: hidden;
-  ${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
+  ${props => (props.$expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
 `;

 export const ServerItem = styled.div`
--- a/src/components/ExternalDocumentation/ExternalDocumentation.tsx
+++ b/src/components/ExternalDocumentation/ExternalDocumentation.tsx
@ -4,9 +4,9 @@ import styled from '../../styled-components';
 import { OpenAPIExternalDocumentation } from '../../types';
 import { linksCss } from '../Markdown/styled.elements';

-const LinkWrap = styled.div<{ compact?: boolean }>`
+const LinkWrap = styled.div<{ $compact?: boolean }>`
  ${linksCss};
-  ${({ compact }) => (!compact ? 'margin: 1em 0' : '')}
+  ${({ $compact }) => (!$compact ? 'margin: 1em 0' : '')}
 `;

@observer
@ -21,7 +21,7 @@ export class ExternalDocumentation extends React.Component<{
    }

    return (
-      <LinkWrap compact={this.props.compact}>
+      <LinkWrap $compact={this.props.compact}>
        <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
      </LinkWrap>
    );
--- a/src/components/Markdown/SanitizedMdBlock.tsx
+++ b/src/components/Markdown/SanitizedMdBlock.tsx
@ -12,21 +12,25 @@ const StyledMarkdownSpan = styled(props => <StyledMarkdownBlock {...props} />)`

 const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);

-export function SanitizedMarkdownHTML(
-  props: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string },
-) {
-  const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock;
+export function SanitizedMarkdownHTML({
+  inline,
+  compact,
+  ...rest
+}: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }) {
+  const Wrap = inline ? StyledMarkdownSpan : StyledMarkdownBlock;

  return (
    <OptionsConsumer>
      {options => (
        <Wrap
-          className={'redoc-markdown ' + (props.className || '')}
+          className={'redoc-markdown ' + (rest.className || '')}
          dangerouslySetInnerHTML={{
-            __html: sanitize(options.untrustedSpec, props.html),
+            __html: sanitize(options.untrustedSpec, rest.html),
          }}
-          data-role={props['data-role']}
-          {...props}
+          data-role={rest['data-role']}
+          {...rest}
+          $inline={inline}
+          $compact={compact}
        />
      )}
    </OptionsConsumer>
--- a/src/components/Markdown/styled.elements.tsx
+++ b/src/components/Markdown/styled.elements.tsx
@ -24,7 +24,7 @@ export const StyledMarkdownBlock = styled(
  PrismDiv as StyledComponent<
    'div',
    ResolvedThemeInterface,
-    { compact?: boolean; inline?: boolean }
+    { $compact?: boolean; $inline?: boolean }
  >,
 )`
  font-family: ${props => props.theme.typography.fontFamily};
@ -37,8 +37,8 @@ export const StyledMarkdownBlock = styled(
    }
  }

-  ${({ compact }) =>
-    compact &&
+  ${({ $compact }) =>
+    $compact &&
    `
    p:first-child {
      margin-top: 0;
@ -48,8 +48,8 @@ export const StyledMarkdownBlock = styled(
    }
  `}

-  ${({ inline }) =>
-    inline &&
+  ${({ $inline }) =>
+    $inline &&
    ` p {
    display: inline-block;
  }`}
@ -87,7 +87,7 @@ export const StyledMarkdownBlock = styled(
    padding: ${props => props.theme.spacing.unit * 4}px;
    overflow-x: auto;
    line-height: normal;
-    border-radius: 0px;
+    border-radius: 0;
    border: 1px solid rgba(38, 50, 56, 0.1);

    code {
--- a/src/components/SecurityRequirement/SecurityHeader.tsx
+++ b/src/components/SecurityRequirement/SecurityHeader.tsx
@ -18,9 +18,9 @@ export function SecurityHeader(props: SecurityRequirementProps) {

  const grouping = security.schemes.length > 1;
  if (security.schemes.length === 0)
-    return <SecurityRequirementOrWrap expanded={expanded}>None</SecurityRequirementOrWrap>;
+    return <SecurityRequirementOrWrap $expanded={expanded}>None</SecurityRequirementOrWrap>;
  return (
-    <SecurityRequirementOrWrap expanded={expanded}>
+    <SecurityRequirementOrWrap $expanded={expanded}>
      {grouping && '('}
      {security.schemes.map(scheme => {
        return (
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/src/components/SecurityRequirement/SecurityRequirement.tsx
@ -37,12 +37,12 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {

  return (
    <>
-      <Wrap expanded={expanded}>
+      <Wrap $expanded={expanded}>
        <AuthHeaderColumn onClick={() => setExpanded(!expanded)}>
          <AuthHeader>Authorizations:</AuthHeader>
          <ShelfIcon size={'1.3em'} direction={expanded ? 'down' : 'right'} />
        </AuthHeaderColumn>
-        <SecuritiesColumn expanded={expanded}>
+        <SecuritiesColumn $expanded={expanded}>
          {securities.map((security, idx) => (
            <SecurityHeader
              key={idx}
--- a/src/components/SecurityRequirement/styled.elements.ts
+++ b/src/components/SecurityRequirement/styled.elements.ts
@ -55,11 +55,11 @@ export const SecurityRequirementAndWrap = styled.span`
  ${linksCss};
 `;

-export const SecurityRequirementOrWrap = styled.span<{ expanded?: boolean }>`
-  ${p => !p.expanded && `white-space: nowrap;`}
+export const SecurityRequirementOrWrap = styled.span<{ $expanded?: boolean }>`
+  ${p => !p.$expanded && `white-space: nowrap;`}
  &:after {
    content: ' or ';
-    ${p => p.expanded && `content: ' or \\a';`}
+    ${p => p.$expanded && `content: ' or \\a';`}
    white-space: pre;
  }

@ -76,13 +76,13 @@ export const AuthHeaderColumn = styled.div`
  cursor: pointer;
 `;

-export const SecuritiesColumn = styled.div<{ expanded?: boolean }>`
+export const SecuritiesColumn = styled.div<{ $expanded?: boolean }>`
  width: ${props => props.theme.schema.defaultDetailsWidth};
  text-overflow: ellipsis;
  border-radius: 4px;
  overflow: hidden;
  ${p =>
-    p.expanded &&
+    p.$expanded &&
    `background: ${p.theme.colors.gray['100']};
     padding: 8px 9.6px;
     margin: 20px 0;
@ -98,11 +98,11 @@ export const AuthHeader = styled(UnderlinedHeader)`
  margin: 0;
 `;

-export const Wrap = styled.div<{ expanded?: boolean }>`
+export const Wrap = styled.div<{ $expanded?: boolean }>`
  width: 100%;
  display: flex;
  margin: 1em 0;
-  flex-direction: ${p => (p.expanded ? 'column' : 'row')};
+  flex-direction: ${p => (p.$expanded ? 'column' : 'row')};
  ${media.lessThan('small')`
    flex-direction: column;
  `}
--- a/src/components/SeeMore/SeeMore.tsx
+++ b/src/components/SeeMore/SeeMore.tsx
@ -32,7 +32,7 @@ export function SeeMore({ children, height }: SeeMoreProps): JSX.Element {
      >
        {children}
      </Container>
-      <ButtonContainer dimmed={!showMore}>
+      <ButtonContainer $dimmed={!showMore}>
        {showLink && (
          <ButtonLinkStyled onClick={onClickMore}>
            {showMore ? 'See less' : 'See more'}
@ -47,11 +47,11 @@ const Container = styled.div`
  overflow-y: hidden;
 `;

-const ButtonContainer = styled.div<{ dimmed?: boolean }>`
+const ButtonContainer = styled.div<{ $dimmed?: boolean }>`
  text-align: center;
  line-height: 1.5em;
-  ${({ dimmed }) =>
-    dimmed &&
+  ${({ $dimmed }) =>
+    $dimmed &&
    `background-image: linear-gradient(to bottom, transparent,rgb(255 255 255));
     position: relative;
     top: -0.5em;
--- a/src/components/SideMenu/MenuItem.tsx
+++ b/src/components/SideMenu/MenuItem.tsx
@ -54,7 +54,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
        {item.type === 'operation' ? (
          <OperationMenuItemContent {...this.props} item={item as OperationModel} />
        ) : (
-          <MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}>
+          <MenuItemLabel $depth={item.depth} $active={item.active} $type={item.type} ref={this.ref}>
            {item.type === 'schema' && <OperationBadge type="schema">schema</OperationBadge>}
            <MenuItemTitle width="calc(100% - 38px)" title={item.sidebarLabel}>
              {item.sidebarLabel}
@ -95,7 +95,12 @@ export const OperationMenuItemContent = observer((props: OperationMenuItemConten
  }, [props.item.active, ref]);

  return (
-    <MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated} ref={ref}>
+    <MenuItemLabel
+      $depth={item.depth}
+      $active={item.active}
+      $deprecated={item.deprecated}
+      ref={ref}
+    >
      {item.isWebhook ? (
        <OperationBadge type="hook">
          {showWebhookVerb ? item.httpVerb : l('webhook')}
--- a/src/components/SideMenu/MenuItems.tsx
+++ b/src/components/SideMenu/MenuItems.tsx
@ -25,7 +25,7 @@ export class MenuItems extends React.Component<MenuItemsProps> {
      <MenuItemUl
        className={className}
        style={this.props.style}
-        expanded={expanded}
+        $expanded={expanded}
        {...(root ? { role: 'menu' } : {})}
      >
        {items.map((item, idx) => (
--- a/src/components/SideMenu/styled.elements.ts
+++ b/src/components/SideMenu/styled.elements.ts
@ -84,7 +84,7 @@ function menuItemActive(
  }
 }

-export const MenuItemUl = styled.ul<{ expanded: boolean }>`
+export const MenuItemUl = styled.ul<{ $expanded: boolean }>`
  margin: 0;
  padding: 0;

@ -96,7 +96,7 @@ export const MenuItemUl = styled.ul<{ expanded: boolean }>`
    font-size: 0.929em;
  }

-  ${props => (props.expanded ? '' : 'display: none;')};
+  ${props => (props.$expanded ? '' : 'display: none;')};
 `;

 export const MenuItemLi = styled.li<{ depth: number }>`
@ -122,40 +122,40 @@ export const menuItemDepth = {
 };

 export interface MenuItemLabelType {
-  depth: number;
-  active: boolean;
-  deprecated?: boolean;
-  type?: string;
+  $depth: number;
+  $active: boolean;
+  $deprecated?: boolean;
+  $type?: string;
 }

 export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
-  className: classnames('-depth' + props.depth, {
-    active: props.active,
+  className: classnames('-depth' + props.$depth, {
+    active: props.$active,
  }),
 }))<MenuItemLabelType>`
  cursor: pointer;
  color: ${props =>
-    props.active
-      ? menuItemActive(props.depth, props, 'activeTextColor')
+    props.$active
+      ? menuItemActive(props.$depth, props, 'activeTextColor')
      : props.theme.sidebar.textColor};
  margin: 0;
  padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
-  ${({ depth, type, theme }) =>
-    (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
+  ${({ $depth, $type, theme }) =>
+    ($type === 'section' && $depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
  display: flex;
  justify-content: space-between;
  font-family: ${props => props.theme.typography.headings.fontFamily};
-  ${props => menuItemDepth[props.depth]};
+  ${props => menuItemDepth[props.$depth]};
  background-color: ${props =>
-    props.active
-      ? menuItemActive(props.depth, props, 'activeBackgroundColor')
+    props.$active
+      ? menuItemActive(props.$depth, props, 'activeBackgroundColor')
      : props.theme.sidebar.backgroundColor};

-  ${props => (props.deprecated && deprecatedCss) || ''};
+  ${props => (props.$deprecated && deprecatedCss) || ''};

  &:hover {
-    color: ${props => menuItemActive(props.depth, props, 'activeTextColor')};
-    background-color: ${props => menuItemActive(props.depth, props, 'activeBackgroundColor')};
+    color: ${props => menuItemActive(props.$depth, props, 'activeTextColor')};
+    background-color: ${props => menuItemActive(props.$depth, props, 'activeBackgroundColor')};
  }

  ${ShelfIcon} {
--- a/src/components/tests/snapshots/FieldDetails.test.tsx.snap
+++ b/src/components/tests/snapshots/FieldDetails.test.tsx.snap
@ -56,7 +56,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
  </div>
  <div>
    <div
-      class="sc-lcIPJg sc-hknOHE gBHqkN eigFbs"
+      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
    >
      <p>
        test description
--- a/src/components/tests/snapshots/OneOfSchema.test.tsx.snap
+++ b/src/components/tests/snapshots/OneOfSchema.test.tsx.snap
@ -44,7 +44,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
       
      <div>
        <div
-          class="sc-eeDRCY sc-eBMEME gTGgei hXXgcw"
+          class="sc-eeDRCY sc-eBMEME gTGgei fbXBig"
        />
      </div>
    </div>
--- a/src/components/tests/snapshots/SecurityRequirement.test.tsx.snap
+++ b/src/components/tests/snapshots/SecurityRequirement.test.tsx.snap
@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`SecurityRequirement should render SecurityDefs 1`] = `
-"<div id=\\"section/Authentication/petstore_auth\\" data-section-id=\\"section/Authentication/petstore_auth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">petstore_auth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>Get access to data while protecting your account credentials.
+"<div id=\\"section/Authentication/petstore_auth\\" data-section-id=\\"section/Authentication/petstore_auth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">petstore_auth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>Get access to data while protecting your account credentials.
 OAuth2 is also a safer and more secure way to give you access.</p>
-</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OAuth2</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p>
-</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p>
-</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_PersonalAccessToken\\" data-section-id=\\"section/Authentication/GitLab_PersonalAccessToken\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_PersonalAccessToken</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab Personal Access Token description</p>
-</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>API Key</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_OpenIdConnect\\" data-section-id=\\"section/Authentication/GitLab_OpenIdConnect\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_OpenIdConnect</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab OpenIdConnect description</p>
-</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OpenID Connect</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div></div></div></div><div id=\\"section/Authentication/basicAuth\\" data-section-id=\\"section/Authentication/basicAuth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">basicAuth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"></div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>HTTP</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div></div></div></div>"
+</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OAuth2</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p>
+</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p>
+</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_PersonalAccessToken\\" data-section-id=\\"section/Authentication/GitLab_PersonalAccessToken\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_PersonalAccessToken</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab Personal Access Token description</p>
+</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>API Key</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_OpenIdConnect\\" data-section-id=\\"section/Authentication/GitLab_OpenIdConnect\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_OpenIdConnect</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab OpenIdConnect description</p>
+</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OpenID Connect</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div></div></div></div><div id=\\"section/Authentication/basicAuth\\" data-section-id=\\"section/Authentication/basicAuth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">basicAuth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"></div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>HTTP</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div></div></div></div>"
 `;

 exports[`SecurityRequirement should render authDefinition 1`] = `"<div class=\\"sc-bDumWk iWBBny\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR iZRiKW\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty eoFcYg\\"><span class=\\"sc-kbousE cpXQuZ\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE cpXQuZ\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i></span></span></div></div>,"`;

 exports[`SecurityRequirement should render authDefinition 2`] = `
-"<div class=\\"sc-bDumWk gtsPcy\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR dSJqIk\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty llvZdI\\"><span class=\\"sc-kbousE dOwJQz\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE dOwJQz\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i> (<code class=\\"sc-eyvILC bzHwfc\\">write:pets</code><code class=\\"sc-eyvILC bzHwfc\\">read:pets</code>) </span></span></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OAuth2: petstore_auth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>Get access to data while protecting your account credentials.
+"<div class=\\"sc-bDumWk gtsPcy\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR dSJqIk\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty llvZdI\\"><span class=\\"sc-kbousE dOwJQz\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE dOwJQz\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i> (<code class=\\"sc-eyvILC bzHwfc\\">write:pets</code><code class=\\"sc-eyvILC bzHwfc\\">read:pets</code>) </span></span></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OAuth2: petstore_auth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>Get access to data while protecting your account credentials.
 OAuth2 is also a safer and more secure way to give you access.</p>
-</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div><b>Required scopes: </b><code>write:pets</code> <code>read:pets</code> </div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p>
-</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p>
-</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab Personal Access Token description</p>
-</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab OpenIdConnect description</p>
-</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> HTTP: basicAuth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div>,"
+</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div><b>Required scopes: </b><code>write:pets</code> <code>read:pets</code> </div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p>
+</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p>
+</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab Personal Access Token description</p>
+</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab OpenIdConnect description</p>
+</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> HTTP: basicAuth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div>,"
 `;