@redocly/theme 0.1.8 → 0.1.11

package/src/Search/Parameters.tsx

@@ -38,7 +38,7 @@ export function Parameters({ parameters = [] }: ParametersProps): JSX.Element {
 }
 
 const Wrapper = styled.div`
-  border-left: 1px solid var(--color-border-light);
+  border-left: 1px solid var(--global-border-color);
   padding: 0 12px;
   margin-top: 8px;
   margin-bottom: 4px;
@@ -57,6 +57,6 @@ const Place = styled.div`
 
 const MoreText = styled.div`
   font-size: var(--font-size-small);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   padding-top: 4px;
 `;

package/src/Search/SearchIcon.tsx

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/SearchIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 490 490"
-      {...props}
-    >
-      <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 490 490"
+    data-component-name="Search/SearchIcon"
+    {...props}
+  >
+    <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
+  </svg>
 );
 
 export const SearchIcon = styled(Icon)`

package/src/Search/SearchItem.tsx

@@ -56,7 +56,7 @@ const SearchLink = styled(Link)`
 `;
 
 const Operation = styled.div`
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-small);
   color: var(--search-item-title-text-color);
   overflow: hidden;
@@ -68,7 +68,7 @@ const Title = styled.div`
   color: var(--search-item-title-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: var(--line-height-m);
+  line-height: var(--line-height-base);
 `;
 
 const Description = styled.div`

package/src/Search/__tests__/Input.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { FormInput } from '@theme/Search/Input';
+
+describe('FormInput', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(<FormInput />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/Search/__tests__/__snapshots__/Input.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormInput renders 1`] = `
+.c0 {
+  padding: 1em 2.5em 1em 1em;
+  background-color: var(--input-background-color);
+  border-radius: var(--input-border-radius);
+  border: none;
+  outline: none;
+  color: var(--input-text-color);
+  font-size: var(--input-font-size);
+  font-family: var(--input-font-family);
+  line-height: var(--input-line-height);
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--input-text-color);
+}
+
+.c0::-moz-placeholder {
+  color: var(--input-text-color);
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--input-text-color);
+}
+
+.c0::placeholder {
+  color: var(--input-text-color);
+}
+
+<input
+  class="c0"
+  data-component-name="Search/Input"
+/>
+`;

package/src/Search/index.ts

@@ -0,0 +1,9 @@
+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/Search/utils.tsx

@@ -15,5 +15,5 @@ export const highlight = (text: string | string[]): JSX.Element | string => {
 };
 
 const Strong = styled.strong`
-  color: var(--color-primary-main);
+  color: var(--color-content);
 `;

package/src/Sidebar/ApiCallItem.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { OperationBadge } from '@theme/OperationBadge';
-import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
-import MenuLinkItem from '@theme/Sidebar/MenuLinkItem';
-import SeparatorLine from '@theme/Sidebar/SeparatorLine';
-import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
+import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
+import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
+import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 
-export default function ApiCallItem({ item }: MenuItemProps): JSX.Element {
+export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/ApiCallItem">
       <MenuLinkItem item={item}>

package/src/Sidebar/ArrowBack.tsx

@@ -17,6 +17,6 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
   </span>
 );
 
-export default styled(Arrow)`
+export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-chevron-color);
 `;

package/src/Sidebar/BackButton.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import ArrowBack from '@theme/Sidebar/ArrowBack';
+import { ArrowBack } from '@theme/Sidebar/ArrowBack';
 
 interface BackButtonProps {
   back: () => void;
 }
 
-export default function BackButton({
+export function BackButton({
   children,
   back,
 }: React.PropsWithChildren<BackButtonProps>): JSX.Element {
@@ -25,7 +25,7 @@ const Button = styled.button`
   padding: 0;
   border: 0;
   outline: 0;
-  color: var(--color-secondary-contrast);
+  color: var(--color-content);
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -39,6 +39,6 @@ const Button = styled.button`
   }
 
   &:hover {
-    color: var(--sidebar-text-color);
+    color: var(--sidebar-item-color);
   }
 `;

package/src/Sidebar/Drilldown.tsx

@@ -1,18 +1,18 @@
 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 DrilldownMenuProps from '@theme/Sidebar/types/DrilldownMenuProps';
+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 { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;
   expand: () => void;
 }
 
-export default function Drilldown({
+export function Drilldown({
   isExpanded,
   item,
   expand,

package/src/Sidebar/DrilldownMenu.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
 
-import DrilldownMenuProps from '@theme/Sidebar/types/DrilldownMenuProps';
-import BackButton from '@theme/Sidebar/BackButton';
-import DrilldownMenuItem from '@theme/Sidebar/DrilldownMenuItem';
+import { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
+import { BackButton } from '@theme/Sidebar/BackButton';
+import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
 
-export default function DrilldownMenu({
+export function DrilldownMenu({
   item,
   back,
   prevActiveItem,

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
+import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
-export default function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
+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}
+        {item.sublabel ? <SubLabel>{item.sublabel}</SubLabel> : null}
       </div>
     </Container>
   );
@@ -18,7 +18,7 @@ export default function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element
 const Container = styled.div`
   display: flex;
   align-items: center;
-  color: var(--sidebar-text-color);
+  color: var(--sidebar-item-color);
   font-size: var(--sidebar-font-size);
   font-weight: var(--font-weight-bold);
 `;
@@ -32,9 +32,9 @@ const Icon = styled.img`
   overflow: hidden;
 `;
 
-const Sublabel = styled.div`
+const SubLabel = styled.div`
   margin-top: 2px;
   font-size: 0.85rem;
-  color: var(--color-secondary-contrast);
+  color: var(--color-content);
   font-weight: var(--font-weight-regular);
 `;

package/src/Sidebar/ExternalIcon.tsx

@@ -29,7 +29,7 @@ const Icon = ({ className }: { className?: string }): JSX.Element => (
   </span>
 );
 
-export default styled(Icon)`
+export const ExternalIcon = styled(Icon)`
   width: 10px;
   height: 10px;
   margin-left: 5px;

package/src/Sidebar/Menu.tsx

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

package/src/Sidebar/MenuContainer.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.div`
+export const MenuContainer = styled.div`
   position: relative;
   overflow-y: auto;
   flex-grow: 1;

package/src/Sidebar/MenuGroup.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Arrow } from '@theme/ui/Arrow/Arrow';
-import ItemState from '@theme/Sidebar/types/ItemState';
-import MenuLinkItem from '@theme/Sidebar/MenuLinkItem';
-import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
-import SeparatorLine from '@theme/Sidebar/SeparatorLine';
+import { Arrow } from '@theme/ui/Arrow';
+import { ItemState } from '@theme/Sidebar/types/ItemState';
+import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
+import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
+import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 
 interface MenuGroupProps {
   item: ItemState;

package/src/Sidebar/MenuItem.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
-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 { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
+import { ExternalIcon } from '@theme/Sidebar/ExternalIcon';
+import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
+import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 
-export default function MenuItem({ item }: MenuItemProps): JSX.Element {
+export function MenuItem({ item }: MenuItemProps): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/MenuItem">
       <MenuLinkItem item={item}>

package/src/Sidebar/MenuItemLabel.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.li.attrs(() => ({
+export const MenuItemLabel = styled.li.attrs(() => ({
   'data-component-name': 'Sidebar/MenuItemLabel',
 }))<{ active?: boolean }>`
   display: flex;
@@ -25,14 +25,14 @@ export default styled.li.attrs(() => ({
   ${(props) =>
     props.active
       ? `
-    color: var(--sidebar-text-active-color);
-    background-color: var(--sidebar-text-active-background-color);
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
   `
       : null};
 
   :hover {
-    color: var(--sidebar-text-active-color);
-    background-color: var(--sidebar-text-active-background-color);
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
   }
 
   :empty {

package/src/Sidebar/MenuLink.tsx

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 
 import { UniversalLink, UniversalLinkProps } from '@theme/ui/UniversalLink';
 
-export default styled(UniversalLink).attrs(() => ({
+export const MenuLink = styled(UniversalLink).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',
 }))<UniversalLinkProps>`
   text-decoration: none;
-  color: var(--sidebar-text-color);
+  color: var(--sidebar-item-color);
 
   &&.external-url:after {
     content: none;

package/src/Sidebar/MenuLinkItem.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import MenuLink from '@theme/Sidebar/MenuLink';
-import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
+import { MenuLink } from '@theme/Sidebar/MenuLink';
+import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
-export default function MenuLinkItem({
+export function MenuLinkItem({
   item,
   children,
 }: React.PropsWithChildren<MenuItemProps>): JSX.Element {

package/src/Sidebar/MobileSidebarButton.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.span.attrs(() => ({
+export const MobileSidebarButton = styled.span.attrs(() => ({
   'data-component-name': 'Sidebar/MobileSidebarButton',
 }))<{ opened?: boolean }>`
   background-color: var(--color-primary-500);
@@ -12,7 +12,7 @@ export default styled.span.attrs(() => ({
   position: fixed;
   right: 20px;
   z-index: 3;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;
   border-radius: 50%;
   transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform 0.75s;
@@ -35,7 +35,7 @@ export default styled.span.attrs(() => ({
     left: 50%;
     width: 25px;
     height: 25px;
-    background-color: var(--color-primary-contrast);
+    background-color: #fff;
     -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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' /%3E%3Cpath fill='%23fff' 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' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
       no-repeat 50% 50%;
     mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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'/%3E%3Cpath fill='%23fff' 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' /%3E%3Cpath fill='%23fff' 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' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")

package/src/Sidebar/Separator.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
-import SeparatorLine from '@theme/Sidebar/SeparatorLine';
-import SeparatorItem from '@theme/Sidebar/SeparatorItem';
+import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
+import { SeparatorItem } from '@theme/Sidebar/SeparatorItem';
 
-export default function Separator({ item }: MenuItemProps): JSX.Element {
+export function Separator({ item }: MenuItemProps): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/Separator">
       <SeparatorItem>{item.label}</SeparatorItem>

package/src/Sidebar/SeparatorItem.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
+import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 
-export default styled(MenuItemLabel)`
+export const SeparatorItem = styled(MenuItemLabel)`
   cursor: default;
   font-weight: var(--font-weight-bold);
   color: var(--sidebar-separator-label-color);

package/src/Sidebar/SeparatorLine.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.div.attrs(() => ({
+export const SeparatorLine = styled.div.attrs(() => ({
   'data-component-name': 'Sidebar/SeparatorLine',
 }))`
   height: 1px;

package/src/Sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@ interface SidebarProps {
   animate?: boolean;
 }
 
-export default styled.aside.attrs(() => ({
+export const Sidebar = styled.aside.attrs(() => ({
   'data-component-name': 'Sidebar/Sidebar',
 }))<SidebarProps>`
   border-right: 1px solid var(--sidebar-right-line-color);
@@ -17,7 +17,7 @@ export default styled.aside.attrs(() => ({
   background: var(--sidebar-background-color);
   font-size: var(--sidebar-font-size);
   font-family: var(--sidebar-font-family);
-  color: var(--sidebar-text-color);
+  color: var(--sidebar-item-color);
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   display: flex;

package/src/Sidebar/SidebarLayout.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Sidebar from '@theme/Sidebar/Sidebar';
+import { Sidebar } from '@theme/Sidebar/Sidebar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
-import MobileSidebarButton from '@theme/Sidebar/MobileSidebarButton';
-import MenuContainer from '@theme/Sidebar/MenuContainer';
+import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
+import { MenuContainer } from '@theme/Sidebar/MenuContainer';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
   menu: React.ReactNode;
 }
 
-export default function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element {
+export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
 

package/src/Sidebar/index.ts

@@ -0,0 +1,19 @@
+export * from '@theme/Sidebar/ApiCallItem';
+export * from '@theme/Sidebar/ArrowBack';
+export * from '@theme/Sidebar/BackButton';
+export * from '@theme/Sidebar/Drilldown';
+export * from '@theme/Sidebar/DrilldownMenu';
+export * from '@theme/Sidebar/DrilldownMenuItem';
+export * from '@theme/Sidebar/ExternalIcon';
+export * from '@theme/Sidebar/Menu';
+export * from '@theme/Sidebar/MenuContainer';
+export * from '@theme/Sidebar/MenuGroup';
+export * from '@theme/Sidebar/MenuItem';
+export * from '@theme/Sidebar/MenuItemLabel';
+export * from '@theme/Sidebar/MenuLink';
+export * from '@theme/Sidebar/MenuLinkItem';
+export * from '@theme/Sidebar/MobileSidebarButton';
+export * from '@theme/Sidebar/Separator';
+export * from '@theme/Sidebar/SeparatorItem';
+export * from '@theme/Sidebar/Sidebar';
+export * from '@theme/Sidebar/SidebarLayout';

package/src/Sidebar/types/DrilldownMenuProps.ts

@@ -1,6 +1,6 @@
-import ItemState from '@theme/Sidebar/types/ItemState';
+import { ItemState } from '@theme/Sidebar/types/ItemState';
 
-export default interface DrilldownMenuProps {
+export interface DrilldownMenuProps {
   back: () => void;
   item: ItemState;
   prevActiveItem?: ItemState;

package/src/Sidebar/types/ItemState.ts

@@ -1,11 +1,9 @@
-import NavItem from '@theme/Sidebar/types/NavItem';
+import { NavItem } from '@theme/Sidebar/types/NavItem';
 import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
 
-interface ItemState extends NavItem {
+export interface ItemState extends NavItem {
   items: ItemState[];
   active: boolean;
   hasActiveSubItem: boolean;
   menuStyle?: MenuStyle;
 }
-
-export default ItemState;

package/src/Sidebar/types/MenuItemProps.ts

@@ -1,6 +1,6 @@
-import ItemState from '@theme/Sidebar/types/ItemState';
+import { ItemState } from '@theme/Sidebar/types/ItemState';
 
-export default interface MenuItemProps {
+export interface MenuItemProps {
   item: ItemState;
   activeItem?: ItemState;
 }

package/src/Sidebar/types/NavItem.ts

@@ -1,6 +1,6 @@
 import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
 
-export default interface NavItem {
+export interface NavItem {
   label?: string;
   sublabel?: string;
   icon?: string;

package/src/Sidebar/types/index.ts

@@ -0,0 +1,5 @@
+export * from '@theme/Sidebar/types/DrilldownMenuProps';
+export * from '@theme/Sidebar/types/ItemState';
+export * from '@theme/Sidebar/types/MenuItemProps';
+export * from '@theme/Sidebar/types/MenuStyle';
+export * from '@theme/Sidebar/types/NavItem';

package/src/SidebarLogo/SidebarLogo.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { SidebarLogo } from '@theme/SidebarLogo';
 
 export default {
-  title: 'SidebarLogo',
+  title: 'Components/SidebarLogo',
   component: SidebarLogo,
   argTypes: {
     backgroundColor: { control: 'color' },

package/src/SidebarLogo/index.ts

@@ -1 +1 @@
-export * from './SidebarLogo';
+export * from '@theme/SidebarLogo/SidebarLogo';

package/src/SourceCode/SourceCode.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { SourceCode } from '@theme/SourceCode';
 
 export default {
-  title: 'SourceCode',
+  title: 'Components/SourceCode',
   component: SourceCode,
 } as ComponentMeta<typeof SourceCode>;
 

package/src/SourceCode/index.ts

@@ -1 +1 @@
-export * from './SourceCode';
+export * from '@theme/SourceCode/SourceCode';