@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Sidebar/FooterWrapper.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+export const FooterWrapper = styled.div<{ collapsed?: boolean }>`
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
+  ${({ collapsed }) =>
+    collapsed &&
+    `
+        position: sticky;
+        bottom: 0;
+        padding: 0;
+    `}
+
+  button {
+    margin: 0;
+  }
+`;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Sidebar/HeaderWrapper',
+  className,
+}))`
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
+  border-bottom: solid 1px var(--border-primary);
+`;

package/src/components/Sidebar/MobileSidebarButton.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const MobileSidebarButton = styled.span.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Sidebar/MobileSidebarButton',
+  className,
+}))<{ opened?: boolean }>`
+  background-color: var(
+    ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
+  );
+  width: 55px;
+  user-select: none;
+  height: 55px;
+  bottom: 44px;
+  cursor: pointer;
+  position: fixed;
+  right: 20px;
+  z-index: var(--z-index-surface);
+  box-shadow: ${(props) =>
+    props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
+  border-radius: 50%;
+  transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
+  transition: transform 0.75s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  fill: var(--fab-icon-color);
+
+  &:hover {
+    background-color: var(--fab-background-color);
+    box-shadow: var(--fab-hover-box-shadow);
+  }
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    display: none;
+    transform: rotate(180deg);
+  }
+
+  ${({ theme }) => theme.mediaQueries?.print} {
+    display: none !important;
+  }
+`;

package/src/components/Sidebar/MobileSidebarIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MobileSidebarIcon = ({ className }: { className?: string }): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25px"
+    height="25px"
+    viewBox="0 0 294.842 294.842"
+    className={className}
+  >
+    <path d="M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z" />
+    <path d="M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z" />
+    <path d="M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z" />
+    <path d="M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z" />
+    <path d="M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z" />
+    <path d="M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z" />
+  </svg>
+);

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+interface SidebarProps {
+  opened?: boolean;
+  animate?: boolean;
+}
+
+export const Sidebar = styled.aside.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Sidebar/Sidebar',
+  className,
+}))<SidebarProps>`
+  border-right: 1px solid var(--sidebar-border-color);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background: var(--sidebar-background-color);
+  font-size: var(--sidebar-item-font-size);
+  font-family: var(--sidebar-item-font-family);
+  color: var(--sidebar-item-text-color);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+
+  ${({ opened, animate }) => `
+    opacity: ${opened ? '1' : '0'};
+    pointer-events: ${opened ? 'auto' : 'none'};
+
+    & > * {
+      transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
+      transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};
+    }
+  `};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: sticky;
+    pointer-events: auto;
+    display: flex;
+    opacity: 1;
+    flex-shrink: 0;
+    width: var(--sidebar-width);
+
+    & > * {
+      transform: none;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.large} {
+    transform: none;
+  }
+`;

package/src/components/Sidebar/SidebarItemIcon.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const SidebarItemIcon = styled.img`
+  width: var(--sidebar-item-icon-size);
+  height: var(--sidebar-item-icon-size);
+  margin-right: var(--sidebar-spacing-unit);
+  border-radius: var(--sidebar-item-icon-border-radius);
+  flex-shrink: 0;
+  overflow: hidden;
+`;

package/src/components/Sidebar/SidebarLayout.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+
+import { Sidebar } from '@theme/components/Sidebar/Sidebar';
+import { FooterWrapper } from '@theme/components/Sidebar/FooterWrapper';
+import { HeaderWrapper } from '@theme/components/Sidebar/HeaderWrapper';
+import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import { MobileSidebarButton } from '@theme/components/Sidebar/MobileSidebarButton';
+import { MenuContainer } from '@theme/components/Menu/MenuContainer';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { telemetry } from '@portal/telemetry';
+
+import { MobileSidebarIcon } from './MobileSidebarIcon';
+
+interface SidebarLayoutProps {
+  versions?: React.ReactNode;
+  menu?: React.ReactNode;
+  backLink?: {
+    label: string;
+    slug: string;
+  };
+  footer?: React.ReactNode;
+  actions?: React.ReactNode;
+  header?: React.ReactNode;
+  growContent?: boolean;
+  collapsed?: boolean;
+  onToggleMenu?: (isOpen: boolean) => void;
+  className?: string;
+}
+
+const StyledFooterWrapper = styled(FooterWrapper)`
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    display: flex;
+  }
+`;
+
+export function SidebarLayout({
+  versions,
+  menu,
+  footer,
+  header,
+  growContent,
+  collapsed,
+  onToggleMenu,
+  className,
+}: SidebarLayoutProps): JSX.Element | null {
+  const [isOpen, setIsOpen] = useMobileMenu();
+  const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
+
+  useEffect(() => {
+    setMappedCollapsed(collapsed && !isOpen);
+  }, [isOpen, collapsed, setMappedCollapsed]);
+
+  const toggleMenu = () => {
+    onToggleMenu?.(!isOpen);
+    setIsOpen(!isOpen);
+  };
+
+  const { sidebar } = useThemeConfig();
+
+  if (sidebar?.hide) {
+    return null;
+  }
+
+  return (
+    <>
+      {mappedCollapsed ? (
+        footer ? (
+          <Wrapper collapsed={true}>
+            <StyledFooterWrapper data-component-name="Sidebar/FooterWrapper" collapsed={true}>
+              {footer}
+            </StyledFooterWrapper>
+            <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
+              <MobileSidebarIcon />
+            </MobileSidebarButton>
+          </Wrapper>
+        ) : null
+      ) : (
+        <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
+          <Sidebar animate={true} opened={isOpen}>
+            {header ? (
+              <HeaderWrapper onClick={() => telemetry.send('back_to_catalog_button_clicked', {})}>
+                {header}
+              </HeaderWrapper>
+            ) : null}
+            {versions ? <>{versions}</> : null}
+            <MenuContainer growContent={growContent}>{menu}</MenuContainer>
+            {footer && !isOpen ? (
+              <FooterWrapper data-component-name="Sidebar/FooterWrapper">{footer}</FooterWrapper>
+            ) : null}
+          </Sidebar>
+        </Wrapper>
+      )}
+    </>
+  );
+}
+
+const Wrapper = styled.div<{ collapsed?: boolean }>`
+  ${({ collapsed }) =>
+    collapsed &&
+    `
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        border-right: 1px solid var(--sidebar-border-color);
+    `}
+`;

package/src/components/Sidebar/VersionPicker.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { SelectProps } from '../Select';
+
+import { useThemeConfig } from '@theme/hooks';
+import { useTranslate } from '@portal/hooks';
+import type { Version } from '@theme/types/portal';
+
+import { Select, SelectInput, SelectList, SelectListItem } from '../Select';
+
+export interface VersionPickerProps extends SelectProps {}
+
+export function VersionPicker(props: { versions?: Version[]; onChange: (v: Version) => void }) {
+  const themeConfig = useThemeConfig();
+  const { versionPicker } = themeConfig;
+
+  const { translate } = useTranslate();
+
+  const { versions = [], onChange } = props;
+  const options = versions.map((version) => {
+    return {
+      element: version.label || version.version,
+      value: version,
+      active: version.active,
+    };
+  });
+
+  if (versionPicker?.hide) {
+    return null;
+  }
+
+  const value = options.find((item) => item.active)?.value;
+
+  if (!options.length && !versionPicker?.showForUnversioned) return null;
+
+  return (
+    <VersionsPickerWrapper>
+      <VersionPickerLabel data-translation-key="theme.versionPicker.label">
+        {translate('theme.versionPicker.label', 'Version:')}
+      </VersionPickerLabel>
+      <VersionPickerSelect
+        placeholder={translate('theme.versionPicker.unversioned', 'All versions')}
+        disabled={!options.length}
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+    </VersionsPickerWrapper>
+  );
+}
+
+const VersionPickerLabel = styled.label`
+  font-size: var(--version-picker-label-font-size);
+  font-weight: var(--version-picker-label-font-weight);
+`;
+
+export const VersionPickerSelect = styled(Select)<SelectProps>`
+  --select-list-item-active-background-color: var(
+    --version-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
+
+  flex: 1;
+
+  font-size: var(--version-picker-font-size);
+  font-weight: var(--version-picker-font-weight);
+  border-radius: var(--version-picker-border-radius);
+  line-height: var(--version-picker-line-height);
+  color: var(--version-picker-text-color);
+
+  ${SelectInput} {
+    border: var(--version-picker-input-border);
+    border-radius: var(--version-picker-input-border-radius);
+    padding: var(--version-picker-input-padding-vertical)
+      var(--version-picker-input-padding-horizontal);
+  }
+
+  ${SelectList} {
+    right: 0;
+    width: 100%;
+    min-width: var(--version-picker-list-min-width);
+    max-width: var(--version-picker-list-max-width);
+    padding: var(--version-picker-list-padding);
+    background-color: var(--version-picker-list-background-color);
+    border-radius: var(--version-picker-list-border-radius);
+    box-shadow: var(--version-picker-list-box-shadow);
+  }
+
+  ${SelectListItem} {
+    border-radius: var(--version-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--version-picker-list-item-vertical-padding)
+        var(--version-picker-list-item-horizontal-padding);
+    }
+  }
+`;
+
+const VersionsPickerWrapper = styled.div.attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'Sidebar/VersionPicker',
+  },
+}))`
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
+  border-bottom: var(--version-picker-border-bottom);
+`;

package/src/components/Sidebar/index.ts

@@ -0,0 +1,15 @@
+export * from '@theme/components/Sidebar/ApiCallItem';
+export * from '@theme/components/Sidebar/BackButton';
+export * from '@theme/components/Sidebar/Drilldown';
+export * from '@theme/components/Sidebar/DrilldownMenu';
+export * from '@theme/components/Sidebar/DrilldownMenuItem';
+export * from '@theme/components/Sidebar/MobileSidebarButton';
+export * from '@theme/components/Sidebar/MobileSidebarIcon';
+export * from '@theme/components/Sidebar/Sidebar';
+export * from '@theme/components/Sidebar/SidebarLayout';
+export * from '@theme/components/Sidebar/FooterWrapper';
+export * from '@theme/components/Sidebar/HeaderWrapper';
+export * from '@theme/components/Sidebar/SidebarItemIcon';
+export * from '@theme/components/Sidebar/VersionPicker';
+export * from '@theme/components/Sidebar/styledVariables';
+export * from '@theme/components/Sidebar/types';

package/src/components/Sidebar/styledVariables.ts

@@ -0,0 +1,220 @@
+import { css } from 'styled-components';
+
+export const sidebar = css`
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px; // @presenter Spacing
+  --sidebar-logo-max-width: 285px; // @presenter Spacing
+  --sidebar-logo-padding: 2px; // @presenter Spacing
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: inherit;
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--bg-base); // @presenter Color
+  --sidebar-border-color: var(--border-secondary); // @presenter Color
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-spacing-unit: var(--spacing-base); // @presenter Spacing
+  --sidebar-width: 285px; // @presenter Spacing
+
+  --sidebar-offset-top: var(--sidebar-spacing-unit); // @presenter Spacing
+  --sidebar-offset-left: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-header-padding-bottom: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-chevron-size: var(--spacing-xs); // @presenter Spacing
+
+  /* === Sidebar Item === */
+
+  /**
+    * @tokens Sidebar item typography
+    */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+    * @tokens Sidebar item colors
+    *  @presenter Color
+    */
+  --sidebar-item-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-item-background-color: transparent; // @presenter Color
+
+  --sidebar-item-active-color: var(--text-primary); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
+
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-hover-color: var(--text-primary); // @presenter Color
+
+  /**
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
+  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: 6px; // @presenter BorderRadius
+
+  /**
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: var(--spacing-xl);
+  --sidebar-item-icon-border-radius: 100%;
+
+  /**
+    * @tokens Sidebar item sublabel
+    */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item drilldown
+    */
+
+  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-drilldown-transform: inherit; // @presenter TextTransform
+  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-drilldown-background-color: var(--sidebar-background-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+  --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
+
+  // we need a theme config for chevron-location: left (default), right-compact, right, none
+  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right
+
+  --sidebar-group-item-chevron-size: var(--spacing-xs); // @presenter Spacing
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item separator
+    */
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-item-separator-font-weight: var(--sidebar-item-font-weight); // @presenter FontWeight
+  --sidebar-item-separator-text-transform: inherit; // @presenter TextTransform
+  --sidebar-item-separator-text-color: var(--text-placeholder); // @presenter Color
+
+  --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-separator-border-width: 1px; // @presenter Spacing
+  --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
+
+  /**
+   * @tokens Sidebar item http tag
+   */
+
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
+  --sidebar-item-http-tag-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
+
+  /**
+    * @tokens Sidebar back button
+    */
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-back-button-transform: inherit; // @presenter TextTransform
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-background-color: transparent; // @presenter Color
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-back-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-margin: 0 0 var(--spacing-lg) 0; // @presenter Spacing
+  --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
+  --sidebar-back-button-icon: none;
+
+  /**
+  * @tokens Sidebar footer
+  */
+  --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --sidebar-footer-padding-horizontal: var(--spacing-lg); // @presenter Spacing
+  --sidebar-collapse-button-background-color: var(--bg-overlay); // @presenter Color
+  --sidebar-collapse-button-icon-color: var(--text-primary); // @presenter Color
+  --sidebar-collapse-button-border-color: var(--border-primary); // @presenter Color
+  --sidebar-collapse-button-active-background-color: unset; // @presenter Color
+  --sidebar-collapse-button-active-border-color: 0; // @presenter Color
+
+  --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+
+  // @tokens End
+`;
+
+export const versionPicker = css`
+  /**
+    * @tokens Version picker
+    * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-padding-vertical: 10px; // @presenter Spacing
+  --version-picker-padding-horizontal: calc(var(--sidebar-margin-horizontal) + var(--sidebar-item-padding-horizontal)); // @presenter Spacing
+  --version-picker-border-bottom: 1px solid var(--border-primary); // @presenter Border
+
+  --version-picker-label-font-size: var(--font-size-base);
+  --version-picker-label-font-weight: var(--font-weight-bold);
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-primary); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --version-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Sidebar/types.ts

@@ -0,0 +1,52 @@
+export enum MenuStyle {
+  Drilldown = 'drilldown',
+}
+
+export interface ItemState extends NavItem {
+  items: ItemState[];
+  active: boolean;
+  hasActiveSubItem: boolean;
+  menuStyle?: MenuStyle;
+}
+
+export interface DrilldownMenuProps {
+  back: () => void;
+  item: ItemState;
+  className?: string;
+}
+
+export interface MenuItemProps {
+  item: ItemState;
+  activeItem?: ItemState;
+  className?: string;
+  isMobile?: boolean;
+}
+
+export interface NavItem {
+  label?: string;
+  labelTranslationKey?: string;
+  sublabel?: string;
+  subLabelTranslationKey?: string;
+  icon?: string;
+  link?: string;
+  type?: string;
+  httpVerb?: string;
+  expanded?: string;
+  selectFirstItemOnExpand?: boolean;
+  pageId?: string;
+  redocPrevLink?: string;
+  redocPrevLabel?: string;
+  redocNextLink?: string;
+  redocNextLabel?: string;
+  redocFakePage?: boolean;
+  redocInfoPageId?: string;
+  target?: string;
+  external?: boolean;
+  items?: NavItem[];
+  requiredPermission?: string;
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  linePosition?: 'top' | 'bottom';
+  version?: string;
+  default?: boolean;
+}