@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Search/styledVariables.ts

@@ -0,0 +1,95 @@
+import { css } from 'styled-components';
+
+export const search = css`
+  /**
+      * @tokens Search
+      */
+
+  --search-highlight-background-color: none; // @presenter Color
+  --search-highlight-text-color: var(--color-info); // @presenter Color
+
+  /**
+      * @tokens Portal Search
+      */
+
+  --search-input-background-color: var(--bg-raised); // @presenter Color
+  --search-input-text-color: var(--text-primary); // @presenter Color
+
+  --search-input-border: none;
+  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-font-size: var(--font-size-base); // @presenter FontSize
+  --search-input-font-family: var(--font-family-base); // @presenter FontFamily
+  --search-input-line-height: 1.15em; // @presenter LineHeight
+
+  --search-input-hover-background-color: var(--bg-raised); // @presenter Color
+  --search-input-hover-border: none; // @presenter Color
+  --search-input-placeholder-color: var(--text-placeholder);
+  --search-input-icons-color: var(--text-placeholder);
+
+  --search-popover-background-color: var(--bg-base); // @presenter Color
+  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
+  --search-popover-shadow: var(--bg-base-shadow); // @presenter BoxShadow
+  --search-popover-border: none;
+
+  --search-item-padding: 8px 24px;
+  --search-item-text-color: var(--text-secondary); // @presenter Color
+  --search-item-title-text-color: var(--text-primary); // @presenter Color
+  --search-item-path-text-color: var(--text-description); // @presenter Color
+  --search-item-background-color: transparent; // @presenter Color
+  --search-item-active-text-color: var(--text-primary); // @presenter Color
+  --search-item-active-title-text-color: var(--text-primary); // @presenter Color
+  --search-item-active-background-color: var(--bg-raised); // @presenter Color
+
+  /**
+    * @tokens Sidebar Search
+    */
+
+  --sidebar-search-button-background-color: transparent; // @presenter Color
+  --sidebar-search-button-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-search-button-border: var(--border-primary);
+  --sidebar-search-button-border-radius: none; // @presenter BorderRadius
+  --sidebar-search-button-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight
+  --sidebar-search-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-search-button-hover-border: var(--border-primary); // @presenter Color
+  --sidebar-search-button-active-background-color: transparent; // @presenter Color
+  --sidebar-search-button-active-border: var(--border-primary); // @presenter Color
+
+  /**
+    * @tokens Search results modal
+    * @presenter Color
+    */
+
+  --search-modal-background: var(--bg-base);
+  --search-modal-text-color: var(--text-primary);
+  --search-modal-border: none;
+  --search-modal-box-shadow: none;
+
+  --search-modal-header-border-radius: var(--border-radius-lg);
+  --search-modal-header-background-color: var(--bg-raised);
+  --search-modal-clear-button-background-color: var(--bg-overlay);
+  --search-modal-clear-button-border: 1px solid var(--bg-overlay);
+  --search-modal-clear-button-hover-background-color: var(--bg-overlay);
+  --search-modal-clear-button-hover-border: 1px solid var(--border-primary);
+
+  /**
+  * @tokens Sidebar Trigger
+  */
+
+  --search-trigger-padding-horizontal: var(--spacing-sm);
+  --search-trigger-padding-vertical: calc(var(--spacing-unit) * 1.5);
+  --search-trigger-padding: var(--search-trigger-padding-vertical)
+    var(--search-trigger-padding-horizontal);
+  --search-trigger-text-color: var(--text-placeholder);
+  --search-trigger-background-color: var(--bg-base);
+  --search-trigger-border: 1px solid var(--border-primary);
+  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-hover-background-color: var(--navbar-item-hover-background-color);
+  --search-trigger-gap: var(--spacing-sm);
+  --search-trigger-font-size: var(--font-size-base);
+  --search-trigger-shortcut-font-size: var(--font-size-sm);
+  --search-trigger-icon-size: 16px;
+  
+  // @tokens End
+`;

package/src/components/Search/utils.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export const highlight = (text: string | string[]): JSX.Element | string => {
+  if (!Array.isArray(text)) return text;
+
+  const [pre, entry, suf] = text;
+  return (
+    <>
+      {pre}
+      <Highlight>{entry}</Highlight>
+      {suf}
+    </>
+  );
+};
+
+const Highlight = styled.span`
+  background-color: var(--search-highlight-background-color);
+  color: var(--search-highlight-text-color);
+`;

package/src/components/Select/Select.tsx

@@ -0,0 +1,189 @@
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import { ArrowIcon } from '@theme/icons';
+import { useOutsideClick } from '@theme/hooks';
+
+export interface SelectProps<T = any> {
+  value: T;
+  options: {
+    element: React.ReactNode | string;
+    value: T;
+    label?: string;
+  }[];
+  dataAttributes?: Record<string, string>;
+  className?: string;
+  withArrow?: boolean;
+  triggerEvent?: 'click' | 'hover';
+  onChange?: (value: any) => void;
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  icon?: React.ReactNode;
+  onlyIcon?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export function Select<T>({
+  className,
+  value,
+  options,
+  dataAttributes,
+  withArrow = true,
+  triggerEvent = 'click',
+  onChange,
+  placement,
+  alignment,
+  icon,
+  onlyIcon,
+  disabled,
+  placeholder,
+}: SelectProps<T>) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleSelect = (value: T) => {
+    // setSelectedIdx(options.findIndex(o => o.value === value));
+    setIsOpen(false);
+    onChange?.(value);
+  };
+
+  useOutsideClick(containerRef, handleClose);
+
+  // useEffect(() => {
+  //   handleSelect(selected);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [selected]);
+
+  const selectedOption = options.find((option) => option.value === value);
+
+  return (
+    <SelectContainer
+      {...dataAttributes}
+      disabled={disabled}
+      data-testid="select"
+      className={className}
+      ref={containerRef}
+      onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
+      onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
+      onClick={triggerEvent === 'click' ? handleToggle : undefined}
+    >
+      <SelectInput>
+        {!onlyIcon && (
+          <SelectInputValue>
+            {selectedOption?.label || selectedOption?.element || placeholder}
+          </SelectInputValue>
+        )}
+        {icon}
+        {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
+      </SelectInput>
+      {isOpen && (
+        <SelectList placement={placement} alignment={alignment}>
+          {options.map((option, index) => (
+            <SelectListItem
+              key={index}
+              onClick={() => handleSelect(option.value)}
+              selected={option.value === value}
+            >
+              {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
+            </SelectListItem>
+          ))}
+        </SelectList>
+      )}
+    </SelectContainer>
+  );
+}
+
+export const SelectContainer = styled.div<{ disabled?: boolean }>`
+  position: relative;
+  font-size: var(--select-font-size);
+  font-weight: var(--select-font-weight);
+  line-height: var(--select-line-height);
+  border-radius: var(--select-border-radius);
+  color: var(--select-text-color);
+  min-width: 0;
+
+  ${({ disabled }) =>
+    disabled &&
+    `
+    opacity: 0.59;
+    pointer-events: none;
+  `}
+
+  a {
+    display: block;
+    text-decoration: none;
+    color: var(--select-text-color);
+  }
+`;
+
+export const SelectInput = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--select-input-border-radius);
+  padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
+  cursor: pointer;
+  gap: 8px;
+`;
+
+export const SelectInputValue = styled.div`
+  pointer-events: none;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
+  position: absolute;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  margin: 0;
+  min-width: var(--select-list-min-width);
+  max-width: var(--select-list-max-width);
+  padding: var(--select-list-padding);
+  background-color: var(--select-list-background-color);
+  border-radius: var(--select-list-border-radius);
+  box-shadow: var(--select-list-box-shadow);
+  list-style-type: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+`;
+
+export const SelectListItem = styled.li<{ selected: boolean }>`
+  border-radius: var(--select-list-item-border-radius);
+
+  & > * {
+    padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :hover {
+    background-color: var(--select-list-item-hover-background-color);
+  }
+
+  ${({ selected }) =>
+    selected &&
+    `
+    &, &:hover { background-color: var(--select-list-item-active-background-color); }
+    `}
+`;

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export * from '@theme/components/Select/Select';
+export * from '@theme/components/Select/styledVariables';

package/src/components/Select/styledVariables.ts

@@ -0,0 +1,31 @@
+import { css } from "styled-components";
+
+export const select = css`
+  /**
+    * @tokens Select
+    * */
+  --select-font-size: var(--font-size-base); // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-secondary); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-active-background-color: var(--bg-overlay); // @presenter Color
+  --select-list-item-hover-background-color: var(--bg-raised); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
+import { useThemeConfig } from '@theme/hooks';
+
+export function Separator({ item, className }: MenuItemProps): JSX.Element {
+  const { translate } = useTranslate();
+  const { sidebar } = useThemeConfig();
+
+  const separatorLine = item.separatorLine || sidebar?.separatorLine;
+  const linePosition = item.linePosition || sidebar?.linePosition || 'bottom';
+
+  return (
+    <Wrapper
+      data-component-name="Sidebar/Separator"
+      className={className}
+      linePosition={linePosition}
+      withLabel={!!item.label}
+    >
+      <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
+      {separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<{ linePosition: 'top' | 'bottom'; withLabel?: boolean }>`
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;

package/src/components/Separator/SeparatorItem.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+
+export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>(
+  ({ className }) => ({
+    'data-component-name': 'Sidebar/SeparatorItem',
+    className,
+  }),
+)`
+  cursor: default;
+  font-weight: var(--sidebar-item-separator-font-weight);
+  color: var(--sidebar-item-separator-text-color);
+  font-size: var(--sidebar-item-separator-font-size);
+  text-transform: var(--sidebar-item-separator-text-transform);
+  background: var(--mobile-menu-background);
+  border-radius: 0;
+  padding: var(--sidebar-item-separator-padding);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    background: var(--sidebar-item-separator-background-color);
+  }
+
+  :hover {
+    color: var(--sidebar-item-separator-text-color);
+    background: none;
+  }
+`;

package/src/components/Separator/SeparatorLine.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Sidebar/SeparatorLine',
+  className,
+}))`
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
+`;

package/src/components/Separator/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/components/Separator/Separator';
+export * from '@theme/components/Separator/SeparatorLine';
+export * from '@theme/components/Separator/SeparatorItem';

package/src/components/Sidebar/ApiCallItem.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Tag } from '@theme/components/Tag';
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+
+export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
+      <MenuLinkItem item={item}>
+        <Label active={item.active}>
+          {item.label}
+          <HttpTag color={item.httpVerb || ''}>
+            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
+          </HttpTag>
+        </Label>
+      </MenuLinkItem>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Label = styled(MenuItemLabel)`
+  display: flex;
+  justify-content: space-between;
+  color: var(--mobile-menu-item-text-color);
+  padding-left: var(--sidebar-item-label-padding);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+`;
+
+const Wrapper = styled.div``;
+
+export const HttpTag = styled(Tag).attrs({
+  className: 'tag-http',
+})`
+  flex-shrink: 0;
+  margin: var(--sidebar-item-http-tag-margin);
+
+  width: var(--sidebar-item-http-tag-width);
+  height: var(--sidebar-item-http-tag-height);
+
+  font-size: var(--sidebar-item-http-tag-font-size);
+  font-family: var(--sidebar-item-http-tag-font-family);
+  font-weight: var(--sidebar-item-http-tag-font-weight);
+  border-radius: var(--sidebar-item-http-tag-border-radius);
+`;

package/src/components/Sidebar/BackButton.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ArrowBack as ThemeArrowBack } from '@theme/ui/ArrowBack';
+
+interface BackButtonProps {
+  back: () => void;
+  className?: string;
+}
+
+export function BackButton({
+  children,
+  back,
+  className,
+}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
+  return (
+    <Button onClick={back} data-component-name="Sidebar/BackButton" className={className}>
+      <ArrowBack dataComponentName="Sidebar/ArrowBack" />
+      {children}
+    </Button>
+  );
+}
+
+const Button = styled.button`
+  width: 100%;
+  background-color: var(--sidebar-back-button-background-color);
+  padding: 0;
+  border: 0;
+  outline: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--sidebar-back-button-text-color);
+  font-size: var(--sidebar-back-button-font-size);
+  font-family: var(--sidebar-back-button-font-family);
+  text-transform: var(--sidebar-back-button-transform);
+
+  transition: color 0.25s ease;
+  text-align: left;
+  margin: var(--sidebar-back-button-margin);
+
+  &:hover {
+    color: var(--sidebar-back-button-hover-text-color);
+    background: var(--sidebar-back-button-hover-background-color);
+  }
+`;
+
+const ArrowBack = styled(ThemeArrowBack)`
+  margin-right: var(--spacing-sm);
+`;

package/src/components/Sidebar/Drilldown.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { DrilldownMenuItem } from '@theme/components/Sidebar/DrilldownMenuItem';
+import { DrilldownMenu } from '@theme/components/Sidebar/DrilldownMenu';
+import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
+import { MenuLinkItem } from '@theme/components/Menu';
+
+interface DrilldownProps extends DrilldownMenuProps {
+  isExpanded: boolean;
+  expand: () => void;
+  className?: string;
+}
+
+export function Drilldown({
+  isExpanded,
+  item,
+  expand,
+  className,
+  ...props
+}: React.PropsWithChildren<DrilldownProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/Drilldown" className={className}>
+      <MenuLinkItem item={item}>
+        <DrilldownLabel onClick={expand}>
+          <DrilldownMenuItem item={item} />
+        </DrilldownLabel>
+      </MenuLinkItem>
+
+      {isExpanded ? <DrilldownMenu item={item} {...props} /> : null}
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const DrilldownLabel = styled(MenuItemLabel)`
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
+  font-weight: var(--font-weight-bold);
+
+  &:hover {
+    color: initial;
+    background-color: initial;
+  }
+`;

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import { BackButton } from '@theme/components/Sidebar/BackButton';
+import { DrilldownMenuItem } from '@theme/components/Sidebar/DrilldownMenuItem';
+import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
+import { MenuLinkItem } from '@theme/components/Menu';
+
+export function DrilldownMenu({
+  item,
+  back,
+  children,
+  className,
+}: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
+  const { translate } = useTranslate();
+
+  return (
+    <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
+      <MenuContent>
+        <MenuWrapper>
+          <BackButton back={back} data-translation-key="theme.sidebar.menu.backLabel">
+            {translate('theme.sidebar.menu.backLabel', 'Back')}
+          </BackButton>
+          <MenuLinkItem item={item}>
+            <DrilldownMenuItem item={item} />
+          </MenuLinkItem>
+        </MenuWrapper>
+        {children}
+      </MenuContent>
+    </MenuContainer>
+  );
+}
+
+const MenuContainer = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: var(--z-index-raised);
+  background-color: var(--sidebar-item-drilldown-background-color);
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
+`;
+
+const slideInAnimation = keyframes`
+  0% {
+    transform: translateX(100%)
+  }
+  100% {
+    transform: translateX(0%)
+  }
+`;
+
+const MenuContent = styled.div`
+  animation-name: ${slideInAnimation};
+  animation-fill-mode: forwards;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  background-color: transparent;
+`;
+
+const MenuWrapper = styled.div`
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  word-break: break-word;
+`;

package/src/components/Sidebar/DrilldownMenuItem.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { SidebarItemIcon } from '@theme/components/Sidebar/SidebarItemIcon';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
+
+export function DrilldownMenuItem({ item, className }: MenuItemProps): JSX.Element {
+  const { translate } = useTranslate();
+
+  return (
+    <Container data-component-name="Sidebar/DrilldownMenuItem" className={className}>
+      {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
+      <div>
+        {translate(item.labelTranslationKey, item.label)}
+        {item.sublabel ? (
+          <SubLabel>{translate(item.subLabelTranslationKey, item.sublabel)}</SubLabel>
+        ) : null}
+      </div>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-item-drilldown-text-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--sidebar-item-drilldown-font-size);
+  font-family: var(--sidebar-item-drilldown-font-family);
+  text-transform: var(--sidebar-text-drilldown-transform);
+  background: var(--sidebar-item-drilldown-background-color);
+`;
+
+const SubLabel = styled.div`
+  margin-top: 2px;
+  color: var(--sidebar-item-sublabel-text-color);
+  font-weight: var(-sidebar-item-sublabel-font-weight);
+  font-size: var(--sidebar-item-sublabel-font-size);
+  font-family: var(--sidebar-item-sublabel-font-family);
+`;