@redocly/theme 0.10.0 → 0.11.0

package/src/Search/Search.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { usePreloadHistory } from '@portal/usePreloadHistory';
-import { useFuseSearch } from '@portal/search';
-import { Autocomplete } from '@theme/Search/Autocomplete';
-import { ClearIcon } from '@theme/Search/ClearIcon';
-import { SearchIcon } from '@theme/Search/SearchIcon';
-import { SearchItem } from '@theme/Search/SearchItem';
-import { useThemeConfig } from '@theme/hooks';
-
-interface OperationParameter {
-  name: string | string[];
-  description: string | string[];
-  place: string;
-  path?: string[];
-}
-
-interface SearchDocument {
-  id: string;
-  url: string;
-  title: string | string[];
-  text: string | string[];
-  path?: string[];
-  httpVerb?: string;
-  pathName?: string | string[];
-  parameters?: OperationParameter[];
-}
-
-export function Search(): JSX.Element {
-  const history = usePreloadHistory();
-  const { query, setQuery, items } = useFuseSearch();
-  const themeSettings = useThemeConfig();
-
-  // TODO: ask somebody about typings
-  const navigate = (item: SearchDocument) => history.push(item.url);
-
-  const renderAutocomplete = () => (
-    <Autocomplete
-      items={items}
-      value={query}
-      change={setQuery}
-      select={navigate}
-      placeholder="Search the docs"
-      keyShortcuts={themeSettings?.search?.shortcuts ?? ['/']}
-      renderItem={(item) => <SearchItem key={item.id} item={item} />}
-    >
-      {(isOpen, reset) => (isOpen ? <ClearIcon onClick={reset} /> : <SearchIcon />)}
-    </Autocomplete>
-  );
-
-  return <Wrapper data-component-name="Search/Search">{renderAutocomplete()}</Wrapper>;
-}
-
-const Wrapper = styled.div`
-  margin-left: auto;
-
-  display: none;
-
-  ${({ theme }) => theme.mediaQueries?.small} {
-    display: block;
-  }
-
-  ${({ theme }) => theme.mediaQueries?.medium} {
-    margin: 0 auto;
-  }
-`;

package/src/Search/SearchItem.tsx

@@ -1,90 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-
-import { OperationBadge } from '@theme/OperationBadge';
-import { Link } from '@portal/Link';
-import { Parameters } from '@theme/Search/Parameters';
-import { highlight } from '@theme/Search/utils';
-import type { ActiveItem, SearchDocument } from '@portal/types';
-
-interface SearchItemProps {
-  item: ActiveItem<SearchDocument>;
-}
-
-export function SearchItem({ item }: SearchItemProps): JSX.Element {
-  const ref = useRef<HTMLAnchorElement>();
-
-  useEffect(() => {
-    if (item.active) {
-      ref.current?.focus();
-    }
-  }, [item.active]);
-
-  return (
-    <SearchLink to={item.url} tabIndex={0} innerRef={ref} data-component-name="Search/SearchItem">
-      {item.httpVerb ? (
-        <Operation>
-          <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
-          {item.pathName ? highlight(item.pathName) : null}
-        </Operation>
-      ) : null}
-      <Title>{highlight(item.title)}</Title>
-      <Description>{highlight(item.text)}</Description>
-
-      {item.parameters?.length ? (
-        <Parameters parameters={item.parameters} />
-      ) : (
-        <Path>{item.path?.join(' → ')}</Path>
-      )}
-    </SearchLink>
-  );
-}
-
-const Title = styled.div`
-  font-weight: var(--font-weight-bold);
-  color: var(--search-item-title-text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: var(--line-height-base);
-`;
-
-const SearchLink = styled(Link)`
-  display: block;
-  text-decoration: none;
-  padding: var(--search-item-padding);
-  transition: background-color 0.3s ease;
-  outline: none;
-  white-space: nowrap;
-  color: var(--search-item-text-color);
-  background-color: var(--search-item-background-color);
-
-  &:hover,
-  &:focus {
-    color: var(--search-item-active-text-color);
-    background-color: var(--search-item-active-background-color);
-    ${Title} {
-      color: var(--search-item-active-title-text-color);
-    }
-  }
-`;
-
-const Operation = styled.div`
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-small);
-  color: var(--search-item-title-text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const Description = styled.div`
-  font-size: var(--font-size-base);
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const Path = styled.div`
-  font-size: var(--font-size-small);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 22px;
-`;

package/src/Search/SidebarSearch.tsx

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-import { Search } from '@theme/Search/Search';
-import { Popover } from '@theme/Search/Popover';
-
-export const SidebarSearch = styled(Search).attrs(() => ({
-  'data-component-name': 'Search/SidebarSearch',
-}))`
-  --search-input-text-color: var(--sidebar-item-active-color);
-
-  ${Popover} {
-    right: unset;
-    top: 100%;
-  }
-`;

package/src/Search/index.ts

@@ -1,9 +0,0 @@
-export * from '@theme/Search/Autocomplete';
-export * from '@theme/Search/ClearIcon';
-export * from '@theme/Search/Input';
-export * from '@theme/Search/Parameters';
-export * from '@theme/Search/Popover';
-export * from '@theme/Search/Search';
-export * from '@theme/Search/SearchIcon';
-export * from '@theme/Search/SearchItem';
-export * from '@theme/Search/utils';

package/src/Sidebar/ApiCallItem.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { OperationBadge } from '@theme/OperationBadge';
-import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
-import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
-import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
-export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
-  return (
-    <Wrapper data-component-name="Sidebar/ApiCallItem">
-      <MenuLinkItem item={item}>
-        <MenuItemLabel active={item.active}>
-          <Badge type={item.httpVerb || ''}>
-            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
-          </Badge>
-          {item.label}
-        </MenuItemLabel>
-      </MenuLinkItem>
-
-      {item.separatorLine ? <SeparatorLine /> : null}
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div``;
-
-export const Badge = styled(OperationBadge)`
-  flex-shrink: 0;
-  margin-top: 0;
-  width: 36px;
-  height: 14px;
-  font-size: var(--sidebar-item-badge-http-font-size);
-  font-family: var(--sidebar-item-badge-http-font-family);
-  font-weight: var(--sidebar-item-badge-http-font-weight);
-  border-radius: var(--sidebar-item-badge-http-border-radius);
-  color: var(--sidebar-item-badge-http-text-color);
-`;

package/src/Sidebar/ArrowBack.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Arrow = ({ className }: { className?: string }): JSX.Element => (
-  <span data-component-name="Sidebar/ArrowBack">
-    <svg
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 12 10"
-      width="10px"
-      height="10px"
-      className={className}
-    >
-      <path d="M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" />
-      <path d="M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" />
-    </svg>
-  </span>
-);
-
-export const ArrowBack = styled(Arrow)`
-  fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
-
-  background-image: var(--sidebar-back-button-icon);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-`;

package/src/Sidebar/BackButton.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { ArrowBack } from '@theme/Sidebar/ArrowBack';
-
-interface BackButtonProps {
-  back: () => void;
-}
-
-export function BackButton({
-  children,
-  back,
-}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
-  return (
-    <Button onClick={back} data-component-name="Sidebar/BackButton">
-      <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);
-  }
-`;

package/src/Sidebar/Drilldown.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
-import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
-import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
-import { DrilldownMenu } from '@theme/Sidebar/DrilldownMenu';
-import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
-
-interface DrilldownProps extends DrilldownMenuProps {
-  isExpanded: boolean;
-  expand: () => void;
-}
-
-export function Drilldown({
-  isExpanded,
-  item,
-  expand,
-  ...props
-}: React.PropsWithChildren<DrilldownProps>): JSX.Element {
-  return (
-    <Wrapper data-component-name="Sidebar/Drilldown">
-      <DrilldownLabel onClick={expand}>
-        <DrilldownMenuItem item={item} />
-      </DrilldownLabel>
-
-      {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/Sidebar/DrilldownMenu.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-
-import { BackButton } from '@theme/Sidebar/BackButton';
-import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
-import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
-
-export function DrilldownMenu({
-  item,
-  back,
-  prevActiveItem,
-  children,
-}: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
-  return (
-    <MenuContainer data-component-name="Sidebar/DrilldownMenu">
-      <MenuContent>
-        <MenuWrapper>
-          <BackButton back={back}>{prevActiveItem?.label || 'Back'}</BackButton>
-          <DrilldownMenuItem item={item} />
-        </MenuWrapper>
-
-        {children}
-      </MenuContent>
-    </MenuContainer>
-  );
-}
-
-const MenuContainer = styled.div`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: 100;
-  background-color: var(--sidebar-item-drilldown-background-color);
-`;
-
-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);
-  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
-  word-break: break-word;
-`;

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
-export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
-  return (
-    <Container data-component-name="Sidebar/DrilldownMenuItem">
-      {item.icon ? <Icon src={item.icon} /> : null}
-      <div>
-        {item.label}
-        {item.sublabel ? <SubLabel>{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 Icon = 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;
-`;
-
-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);
-`;

package/src/Sidebar/ExternalIcon.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Icon = ({ className }: { className?: string }): JSX.Element => (
-  <span data-component-name="Sidebar/ExternalIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0px"
-      y="0px"
-      viewBox="0 0 100 125"
-      enableBackground="new 0 0 100 100"
-      className={className}
-    >
-      <path d="M-408.167-318.5" />
-      <line
-        fill="none"
-        stroke="#ffffff"
-        strokeWidth="0.25"
-        strokeMiterlimit="10"
-        x1="57.5"
-        y1="11.75"
-        x2="57.5"
-        y2="17.5"
-      />
-      <path d="M98.57,4.784c-0.024-0.113-0.047-0.223-0.074-0.334c-0.035-0.117-0.075-0.231-0.117-0.346 c-0.023-0.062-0.037-0.125-0.064-0.187c-0.016-0.032-0.03-0.06-0.049-0.092c-0.048-0.119-0.107-0.227-0.17-0.336 c-0.05-0.089-0.095-0.179-0.152-0.265c-0.062-0.1-0.139-0.195-0.209-0.292C97.67,2.85,97.611,2.77,97.545,2.69 c-0.081-0.092-0.172-0.178-0.258-0.262c-0.07-0.068-0.139-0.139-0.212-0.202c-0.093-0.083-0.196-0.158-0.3-0.232 c-0.08-0.058-0.152-0.114-0.236-0.163c-0.104-0.069-0.219-0.128-0.329-0.186c-0.091-0.046-0.175-0.093-0.262-0.132 c-0.044-0.019-0.081-0.043-0.121-0.061c-0.074-0.03-0.154-0.046-0.234-0.072c-0.095-0.033-0.19-0.065-0.288-0.092 c-0.123-0.034-0.246-0.059-0.369-0.083c-0.096-0.019-0.188-0.036-0.289-0.046c-0.131-0.018-0.263-0.022-0.393-0.028 c-0.064-0.002-0.12-0.012-0.186-0.012L63.77,1.305c-2.535,0.017-4.566,2.078-4.554,4.605c0.019,2.525,2.084,4.563,4.604,4.546 l19.258-0.121l-29.79,30.162c-1.112,1.126-1.526,2.678-1.233,4.118c0.174,0.863,0.596,1.691,1.272,2.357 c0.897,0.888,2.073,1.325,3.245,1.32c1.17-0.007,2.337-0.459,3.227-1.361l0.002-0.001l29.787-30.158l0.121,19.255 c0.014,2.523,2.07,4.564,4.602,4.545c1.268-0.005,2.408-0.526,3.233-1.357c0.817-0.834,1.325-1.98,1.317-3.242L98.675,5.665 c0-0.063-0.016-0.124-0.016-0.189c-0.009-0.123-0.015-0.25-0.032-0.375C98.616,4.992,98.592,4.89,98.57,4.784z" />
-      <path d="M6.542,83.279c0,5.717,4.635,10.354,10.354,10.354l55.616,0.065c5.719,0,10.354-4.636,10.354-10.354l-0.091-40.782h6.135 v40.849c0,9.014-7.307,16.319-16.319,16.319l-56.36-0.066c-8.597,0-15.564-6.969-15.564-15.562L0.585,27.821 c0-9.014,7.306-16.32,16.32-16.32l41.138-0.084v6.142L16.98,17.535c-5.718,0-10.354,4.635-10.354,10.354L6.542,83.279z" />
-    </svg>
-  </span>
-);
-
-export const ExternalIcon = styled(Icon)`
-  width: 10px;
-  height: 10px;
-  margin-left: 5px;
-  fill: var(--sidebar-group-item-chevron-color);
-`;

package/src/Sidebar/Menu.tsx

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const Menu = styled.ul.attrs(() => ({
-  'data-component-name': 'Sidebar/Menu',
-}))`
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  color: var(--sidebar-item-text-color);
-  position: relative;
-`;

package/src/Sidebar/MenuContainer.tsx

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-interface MenuContainerProps {
-  growContent?: boolean;
-}
-
-export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent }) => ({
-  'data-component-name': 'Sidebar/MenuContainer',
-  growContent: growContent === undefined ? true : growContent,
-}))<MenuContainerProps>`
-  position: relative;
-  overflow-y: auto;
-  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
-  padding-top: var(--sidebar-offset-top);
-`;

package/src/Sidebar/MenuGroup.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-
-import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
-import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
-import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
-import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
-import type { ItemState } from '@theme/Sidebar/types/ItemState';
-
-interface MenuGroupProps {
-  item: ItemState;
-  isExpanded: boolean;
-  toggleExpanded: () => void;
-}
-
-export function MenuGroup({
-  item,
-  isExpanded,
-  toggleExpanded,
-  children,
-}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
-  const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    timer.current && clearTimeout(timer.current);
-    if (isExpanded) {
-      setShowChildren(true);
-    } else {
-      timer.current = setTimeout(() => {
-        setShowChildren(false);
-      }, 800);
-    }
-    return () => {
-      timer.current && clearTimeout(timer.current);
-    };
-  }, [isExpanded]);
-
-  return (
-    <Wrapper data-component-name="Sidebar/MenuGroup">
-      <MenuLinkItem item={item}>
-        <MenuGroupLabel
-          onClick={toggleExpanded}
-          isAlwaysExpanded={item.expanded === 'always'}
-          active={item.active}
-        >
-          <MenuGroupArrow
-            visibility={item.items.length ? 'visible' : 'hidden'}
-            direction={isExpanded ? 'down' : 'right'}
-          />
-          {item.label}
-        </MenuGroupLabel>
-      </MenuLinkItem>
-
-      <MenuWrapper isExpanded={isExpanded}>{showChildren ? children : null}</MenuWrapper>
-
-      {item.separatorLine ? <SeparatorLine /> : null}
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div``;
-
-const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
-  padding-left: var(--sidebar-item-nested-offset);
-  overflow: hidden;
-  ${(props) =>
-    props.isExpanded
-      ? `max-height: 99999px;
-        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
-      : `max-height: 0px;
-	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
-`;
-
-const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
-  padding-left: var(--sidebar-item-padding-horizontal);
-  cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
-  font-family: var(--sidebar-item-group-font-family);
-  font-size: var(--sidebar-item-group-font-size);
-  text-transform: var(--sidebar-text-group-transform);
-  color: var(--sidebar-item-group-text-color);
-  background: var(--sidebar-item-group-background-color);
-  ${(props) =>
-    props.active
-      ? `color: var(--sidebar-item-group-active-text-color);
-        background-color: var(--sidebar-item-group-active-background-color);`
-      : null};
-`;
-
-const MenuGroupArrow = styled(ArrowIcon)`
-  margin-right: calc(var(--sidebar-spacing-unit) / 2);
-`;

package/src/Sidebar/MenuItem.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
-import { ExternalIcon } from '@theme/Sidebar/ExternalIcon';
-import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
-import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
-export function MenuItem({ item }: MenuItemProps): JSX.Element {
-  return (
-    <Wrapper data-component-name="Sidebar/MenuItem">
-      <MenuLinkItem item={item}>
-        <MenuItemLabel active={item.active}>
-          {item.label}
-          {item.external ? <ExternalIcon /> : null}
-        </MenuItemLabel>
-      </MenuLinkItem>
-
-      {item.separatorLine ? <SeparatorLine /> : null}
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div``;

package/src/Sidebar/MenuItemLabel.tsx

@@ -1,41 +0,0 @@
-import styled from 'styled-components';
-
-export const MenuItemLabel = styled.li.attrs(() => ({
-  'data-component-name': 'Sidebar/MenuItemLabel',
-}))<{ active?: boolean }>`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  transition: background-color 0.3s, color 0.3s;
-  word-break: break-word;
-  margin-bottom: 1px;
-
-  background-color: var(--sidebar-item-background-color);
-  font-family: var(--sidebar-item-font-family);
-  font-size: var(--sidebar-item-font-size);
-  font-weight: var(--font-weight-regular);
-  margin-left: var(--sidebar-offset-left);
-  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
-  padding-left: calc(
-    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +
-      var(--sidebar-spacing-unit) * 0.5
-  );
-  border-radius: var(--sidebar-item-border-radius);
-
-  ${(props) =>
-    props.active
-      ? `
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
-  `
-      : null};
-
-  :hover {
-    color: var(--sidebar-item-hover-color);
-    background-color: var(--sidebar-item-hover-background-color);
-  }
-
-  :empty {
-    padding: 0;
-  }
-`;