@stoplight/elements-core 9.0.16-beta-0.1 → 9.0.16-beta-0.2

package/src/components/Docs/Sections.tsx

@@ -1,54 +0,0 @@
-import { Box, Flex, HeadingProps, Panel, PanelProps } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { slugify } from '../../utils/string';
-import { LinkHeading } from '../LinkHeading';
-
-export interface ISectionTitle {
-  title: string;
-  id?: string;
-  size?: HeadingProps['size'];
-  isCompact?: boolean;
-}
-
-export const SectionTitle: React.FC<ISectionTitle> = ({ title, id, size = 2, isCompact = false, children }) => {
-  return (
-    <Flex w="full">
-      <Box py={1} pr={6} as={LinkHeading} size={size} aria-label={title} id={id || slugify(title)}>
-        {title}
-      </Box>
-      <Flex alignSelf={'center'} py={1} flexGrow style={{ minWidth: 0 }} justify={isCompact ? 'end' : undefined}>
-        {children}
-      </Flex>
-    </Flex>
-  );
-};
-
-export const SectionSubtitle: React.FC<ISectionTitle> = props => {
-  return <SectionTitle {...props} size={3} />;
-};
-
-type SubSectionPanelProps = {
-  title: React.ReactNode;
-  hasContent?: boolean;
-  rightComponent?: React.ReactNode;
-};
-
-export const SubSectionPanel: React.FC<SubSectionPanelProps & Pick<PanelProps, 'defaultIsOpen' | 'onChange'>> = ({
-  title,
-  children,
-  hasContent,
-  rightComponent,
-  defaultIsOpen = true,
-  onChange,
-}) => {
-  return (
-    <Panel isCollapsible={hasContent} defaultIsOpen={defaultIsOpen} onChange={onChange} appearance="outlined">
-      <Panel.Titlebar fontWeight="medium" rightComponent={rightComponent}>
-        <div role="heading">{title}</div>
-      </Panel.Titlebar>
-
-      {hasContent !== false && <Panel.Content>{children}</Panel.Content>}
-    </Panel>
-  );
-};

package/src/components/Docs/Security/PanelContent.tsx

@@ -1,38 +0,0 @@
-import { MarkdownViewer } from '@stoplight/markdown-viewer';
-import { Box, NodeAnnotation } from '@stoplight/mosaic';
-import { HttpSecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { useOptionsCtx } from '../../../context/Options';
-import { getReadableSecurityName, shouldIncludeKey } from '../../../utils/oas/security';
-import { getDefaultDescription } from '../../../utils/securitySchemes';
-
-export const PanelContent: React.FC<{ schemes: HttpSecurityScheme[] }> = ({ schemes }) => {
-  const { nodeHasChanged } = useOptionsCtx();
-
-  if (!schemes || !schemes.length) {
-    return null;
-  }
-
-  const collection = schemes.length > 1;
-
-  return (
-    <Box>
-      {schemes.map(scheme => (
-        <Box key={scheme.key} p={2} m={2} border>
-          {collection && (
-            <MarkdownViewer
-              style={{ fontWeight: 'bold', fontSize: 12, marginBottom: 10 }}
-              markdown={getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type))}
-            />
-          )}
-          <MarkdownViewer
-            style={{ fontSize: 12 }}
-            markdown={`${scheme.description ?? ''}\n\n` + getDefaultDescription(scheme)}
-          />
-          <NodeAnnotation change={nodeHasChanged?.({ nodeId: scheme.id })} />
-        </Box>
-      ))}
-    </Box>
-  );
-};

package/src/components/Docs/Security/index.ts

@@ -1 +0,0 @@
-export * from './PanelContent';

package/src/components/Docs/Skeleton.tsx

@@ -1,12 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-export const DocsSkeleton = ({ className, padding = '12' }: { className?: string; padding?: string }) => {
-  return (
-    <div className={cn('PageSkeleton', className, `sl-p-${padding}`, 'sl-flex sl-flex-col sl-h-full')}>
-      <div className={cn('DocsSkeleton sl-h-12 sl-w-1/5')} />
-      <div className={cn('DocsSkeleton sl-h-12 sl-my-6')} />
-      <div className={cn('DocsSkeleton sl-flex-1 sl-my-6')} />
-    </div>
-  );
-};

package/src/components/Docs/TwoColumnLayout.tsx

@@ -1,28 +0,0 @@
-import { Box, Flex, VStack } from '@stoplight/mosaic';
-import React from 'react';
-
-export interface TwoColumnLayoutProps {
-  header: React.ReactNode;
-  right: React.ReactNode;
-  left: React.ReactNode;
-  className?: string;
-}
-
-export const TwoColumnLayout = React.forwardRef<HTMLDivElement, TwoColumnLayoutProps>(
-  ({ header, right, left, className }, ref) => (
-    <VStack ref={ref} w="full" className={className} spacing={8}>
-      {header}
-      <Flex>
-        <Box data-testid="two-column-left" w={0} flex={1}>
-          {left}
-        </Box>
-
-        {right && (
-          <Box data-testid="two-column-right" ml={16} pos="relative" w="2/5" style={{ maxWidth: 500 }}>
-            {right}
-          </Box>
-        )}
-      </Flex>
-    </VStack>
-  ),
-);

package/src/components/Docs/index.ts

@@ -1 +0,0 @@
-export * from './Docs';

package/src/components/Docs/story-helper.ts

@@ -1,46 +0,0 @@
-import type { ErrorBoundaryProps } from '@stoplight/react-error-boundary';
-import type { Meta, StoryFn } from '@storybook/react';
-import * as React from 'react';
-
-import { ExtensionAddonRenderer } from './Docs';
-import { wrapOptionsContext } from './story-renderer-helper';
-
-type DocsProps = { data: any; renderExtensionAddon?: ExtensionAddonRenderer } & ErrorBoundaryProps;
-
-type storyOptions = DocsProps & { layoutOptions?: object };
-
-interface HelperReturn<P extends DocsProps> {
-  meta: Meta<DocsProps>;
-  createStory(name: string, input: storyOptions): StoryFn<P>;
-  createHoistedStory(input: storyOptions): StoryFn<P>;
-}
-
-export const createStoriesForDocsComponent = (
-  Component: React.ComponentType<DocsProps>,
-  title?: string,
-): HelperReturn<DocsProps> => {
-  const createStory = (name: string, input: storyOptions) => {
-    const story: StoryFn<DocsProps> = (args: any) => {
-      const component = React.createElement(Component, args);
-      return wrapOptionsContext(component);
-    };
-    story.args = input;
-    story.storyName = name;
-    return story;
-  };
-  return {
-    meta: {
-      title: `Internal/Docs/${title || Component.displayName}`,
-      component: Component,
-      argTypes: <HelperReturn<DocsProps>['meta']['argTypes']>{
-        data: {
-          control: { type: 'object' },
-        },
-        FallbackComponent: { table: { disable: true } },
-        recoverableProps: { table: { disable: true } },
-      },
-    },
-    createStory: createStory,
-    createHoistedStory: input => createStory(title ?? Component.displayName ?? Component.name ?? '_unknown_', input),
-  };
-};

package/src/components/Docs/story-renderer-helper.tsx

@@ -1,56 +0,0 @@
-import { isPlainObject } from '@stoplight/json';
-import { isRegularNode } from '@stoplight/json-schema-tree';
-import { MarkdownViewer } from '@stoplight/markdown-viewer';
-import { Box } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { ElementsOptionsProvider } from '../../context/Options';
-import { ExtensionAddonRenderer, ExtensionRowProps } from './Docs';
-
-/**
- * Renders the known x-enum-Description vendor extension
- * @returns React.ReactElement
- */
-// eslint-disable-next-line storybook/prefer-pascal-case
-export const renderExtensionRenderer: ExtensionAddonRenderer = (props: ExtensionRowProps) => {
-  const { nestingLevel, schemaNode, vendorExtensions } = props;
-  const { 'x-enum-descriptions': enumDescriptions = {} } = vendorExtensions;
-
-  // If the nesting level is 0, we are at the root of the schema and should not render anything
-  if (nestingLevel === 0) {
-    return null;
-  }
-
-  // This implementation of the extension renderer only supports the `x-enum-descriptions`-extension
-  if ('x-enum-descriptions' in vendorExtensions && isRegularNode(schemaNode) && isPlainObject(enumDescriptions)) {
-    let value = `| Enum value | Description |\n|---|---|\n`;
-
-    for (const enumValue of schemaNode.enum ?? []) {
-      const description = enumDescriptions[String(enumValue)];
-      value += `| ${enumValue} | ${description} |\n`;
-    }
-
-    return (
-      <Box mb={2}>
-        <Box
-          mt={2}
-          as={MarkdownViewer}
-          markdown={value}
-          style={{
-            fontSize: 12,
-          }}
-        />
-      </Box>
-    );
-  }
-
-  return null;
-};
-
-/**
- * @private
- * Helper function to wrap the options context for the Docs subcomponents
- */
-export const wrapOptionsContext = (story: any) => {
-  return <ElementsOptionsProvider renderExtensionAddon={renderExtensionRenderer}>{story}</ElementsOptionsProvider>;
-};

package/src/components/Layout/MobileTopNav.tsx

@@ -1,78 +0,0 @@
-import { faBars, faX } from '@fortawesome/free-solid-svg-icons';
-import { Box, Button, Drawer, Flex, Icon } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { LogoProps } from '../../types';
-import type { TableOfContentsItem } from '../TableOfContents';
-import { Sidebar } from './ResponsiveSidebarLayout';
-
-export const MobileTopNav = ({
-  name,
-  logo,
-  tree,
-  pathname,
-  onTocClick,
-}: {
-  name: string;
-  logo?: string | LogoProps;
-  tree: TableOfContentsItem[];
-  pathname: string;
-  onTocClick(): void;
-}): JSX.Element => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState<boolean>(false);
-
-  const handleTocClick = () => {
-    onTocClick();
-    setIsSidebarOpen(false);
-  };
-  return (
-    <Flex className="TopNav--mosaic" alignItems="center" h="3xl" pl={4} pr={4} bg="canvas" borderB pos="fixed" w="full">
-      <Flex data-test="mobile-top-nav" w="full" alignItems="center" justifyContent="between">
-        <Button data-test="show-left-sidebar-btn" onPress={() => setIsSidebarOpen(true)} appearance="minimal">
-          <Icon size="lg" icon={faBars} />
-        </Button>
-        <NavHeading heading={name} />
-      </Flex>
-
-      <Drawer isOpen={isSidebarOpen} position="left" onClose={() => setIsSidebarOpen(false)} w="5/6">
-        <Flex justifyContent="end">
-          <Button
-            className="sl-mr-4 sl-mt-2"
-            onPress={() => setIsSidebarOpen(false)}
-            appearance="minimal"
-            justifySelf="end"
-          >
-            <Icon size="lg" icon={faX} />
-          </Button>
-        </Flex>
-        <Box tabIndex={-1}>
-          <Sidebar
-            name={name}
-            logo={logo}
-            tree={tree}
-            pathname={pathname}
-            onTocClick={handleTocClick}
-            isInResponsiveMode={true}
-          />
-        </Box>
-      </Drawer>
-    </Flex>
-  );
-};
-
-const NavHeading = ({ heading }: { heading?: string }): JSX.Element => (
-  <Flex flex={1} data-test="mobile-project-top-nav" style={{ minWidth: 0 }}>
-    <Box
-      fontSize="xl"
-      fontWeight="semibold"
-      whitespace="nowrap"
-      textOverflow="overflow-ellipsis"
-      overflowX="hidden"
-      overflowY="hidden"
-      w="full"
-      textAlign="center"
-    >
-      {heading}
-    </Box>
-  </Flex>
-);

package/src/components/Layout/ResponsiveSidebarLayout.tsx

@@ -1,175 +0,0 @@
-import { Box, Flex, Heading } from '@stoplight/mosaic';
-import * as React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-
-import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
-import { LogoProps } from '../../types';
-import { Logo } from '../Logo';
-import { PoweredByLink } from '../PoweredByLink';
-import type { CustomLinkComponent, TableOfContentsItem } from '../TableOfContents';
-import { TableOfContents } from '../TableOfContents';
-import { MobileTopNav } from './MobileTopNav';
-
-type ResponsiveSidebarLayoutProps = {
-  maxContentWidth?: number;
-  sidebarWidth?: number;
-  children?: React.ReactNode;
-  name: string;
-  logo?: string | LogoProps;
-  tree?: TableOfContentsItem[];
-  onTocClick?(): void;
-};
-
-const MAX_CONTENT_WIDTH = 1800;
-const SIDEBAR_MIN_WIDTH = 300;
-const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
-
-export const ResponsiveSidebarLayout = React.forwardRef<HTMLDivElement, ResponsiveSidebarLayoutProps>(
-  (
-    { children, name, logo, tree, onTocClick, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH },
-    ref,
-  ) => {
-    const scrollRef = React.useRef<HTMLDivElement | null>(null);
-    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
-    const { pathname } = useLocation();
-
-    React.useEffect(() => {
-      // Scroll to top on page change
-      scrollRef.current?.scrollTo(0, 0);
-    }, [pathname]);
-
-    const { isResponsiveLayoutEnabled } = useResponsiveLayout();
-
-    return (
-      <Flex ref={ref} className="sl-elements-api" pin h="full">
-        {!isResponsiveLayoutEnabled && (
-          <Flex
-            ref={sidebarRef}
-            onMouseDown={(e: React.MouseEvent<HTMLElement>) => e.preventDefault()}
-            style={{ maxWidth: `${SIDEBAR_MAX_WIDTH}px` }}
-          >
-            <Flex
-              direction="col"
-              bg="canvas-100"
-              borderR
-              pt={8}
-              pos="sticky"
-              pinY
-              overflowY="auto"
-              style={{
-                paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
-                width: `${currentSidebarWidth}px`,
-                minWidth: `${SIDEBAR_MIN_WIDTH}px`,
-              }}
-            >
-              <Sidebar
-                name={name}
-                logo={logo}
-                tree={tree!}
-                pathname={pathname}
-                onTocClick={onTocClick}
-                isInResponsiveMode={false}
-              />
-            </Flex>
-            <Flex
-              justifySelf="end"
-              flexGrow={0}
-              flexShrink={0}
-              resize="x"
-              onMouseDown={startResizing}
-              style={{ width: '1em', flexBasis: '6px', cursor: 'ew-resize' }}
-            />
-          </Flex>
-        )}
-
-        <Box ref={scrollRef} bg="canvas" px={!isResponsiveLayoutEnabled ? 24 : 6} flex={1} w="full" overflowY="auto">
-          <Box style={{ maxWidth: `${maxContentWidth - currentSidebarWidth}px` }} py={16}>
-            {children}
-          </Box>
-        </Box>
-
-        {isResponsiveLayoutEnabled && (
-          <MobileTopNav onTocClick={onTocClick!} name={name} logo={logo} tree={tree!} pathname={pathname} />
-        )}
-      </Flex>
-    );
-  },
-);
-
-type SidebarRef = React.Ref<HTMLDivElement>;
-type SidebarWidth = number;
-type StartResizingFn = () => void;
-
-export const Sidebar = ({
-  name,
-  logo,
-  tree,
-  pathname,
-  onTocClick,
-  isInResponsiveMode,
-}: {
-  name: string;
-  logo?: string | LogoProps;
-  tree: TableOfContentsItem[];
-  pathname: string;
-  onTocClick?(): void;
-  isInResponsiveMode: boolean;
-}) => {
-  return (
-    <>
-      <Flex ml={4} mb={5} alignItems="center">
-        {typeof logo === 'string' ? (
-          <Logo logo={{ url: logo, altText: 'logo' }} />
-        ) : (
-          typeof logo === 'object' && <Logo logo={logo} />
-        )}
-        <Heading size={4}>{name}</Heading>
-      </Flex>
-      <Flex flexGrow flexShrink overflowY="auto" direction="col">
-        <TableOfContents
-          tree={tree}
-          activeId={pathname}
-          Link={Link as CustomLinkComponent}
-          onLinkClick={onTocClick}
-          isInResponsiveMode={isInResponsiveMode}
-        />
-      </Flex>
-      <PoweredByLink source={name} pathname={pathname} packageType="elements" />
-    </>
-  );
-};
-
-function useResizer(sidebarWidth: number): [SidebarRef, SidebarWidth, StartResizingFn] {
-  const sidebarRef = React.useRef<HTMLDivElement | null>(null);
-  const [isResizing, setIsResizing] = React.useState(false);
-  const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
-
-  const startResizing = React.useCallback(() => {
-    setIsResizing(true);
-  }, []);
-
-  const stopResizing = React.useCallback(() => {
-    setIsResizing(false);
-  }, []);
-
-  const resize = React.useCallback(
-    mouseMoveEvent => {
-      if (isResizing) {
-        const value = mouseMoveEvent.clientX - sidebarRef.current!.getBoundingClientRect().left;
-        setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
-      }
-    },
-    [isResizing],
-  );
-
-  React.useEffect(() => {
-    window?.addEventListener('mousemove', resize);
-    window?.addEventListener('mouseup', stopResizing, { passive: true });
-    return () => {
-      window?.removeEventListener('mousemove', resize);
-      window?.removeEventListener('mouseup', stopResizing);
-    };
-  }, [resize, stopResizing]);
-
-  return [sidebarRef, currentSidebarWidth, startResizing];
-}

package/src/components/Layout/SidebarLayout.tsx

@@ -1,107 +0,0 @@
-import { Box, Flex } from '@stoplight/mosaic';
-import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-
-type SidebarLayoutProps = {
-  sidebar: React.ReactNode;
-  maxContentWidth?: number;
-  sidebarWidth?: number;
-  children?: React.ReactNode;
-};
-
-const MAX_CONTENT_WIDTH = 1800;
-const SIDEBAR_MIN_WIDTH = 300;
-const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
-
-export const SidebarLayout = React.forwardRef<HTMLDivElement, SidebarLayoutProps>(
-  ({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
-    const scrollRef = React.useRef<HTMLDivElement | null>(null);
-    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
-    const { pathname } = useLocation();
-
-    React.useEffect(() => {
-      // Scroll to top on page change
-      scrollRef.current?.scrollTo(0, 0);
-    }, [pathname]);
-
-    return (
-      <Flex ref={ref} className="sl-elements-api" pin h="full">
-        <Flex
-          ref={sidebarRef}
-          onMouseDown={(e: React.MouseEvent<HTMLElement>) => e.preventDefault()}
-          style={{ maxWidth: `${SIDEBAR_MAX_WIDTH}px` }}
-        >
-          <Flex
-            direction="col"
-            bg="canvas-100"
-            borderR
-            pt={8}
-            pos="sticky"
-            pinY
-            overflowY="auto"
-            style={{
-              paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
-              width: `${currentSidebarWidth}px`,
-              minWidth: `${SIDEBAR_MIN_WIDTH}px`,
-            }}
-          >
-            {sidebar}
-          </Flex>
-          <Flex
-            justifySelf="end"
-            flexGrow={0}
-            flexShrink={0}
-            resize="x"
-            onMouseDown={startResizing}
-            style={{ width: '1em', flexBasis: '6px', cursor: 'ew-resize' }}
-          />
-        </Flex>
-
-        <Box ref={scrollRef} bg="canvas" px={24} flex={1} w="full" overflowY="auto">
-          <Box style={{ maxWidth: `${maxContentWidth - currentSidebarWidth}px` }} py={16}>
-            {children}
-          </Box>
-        </Box>
-      </Flex>
-    );
-  },
-);
-
-type SidebarRef = React.Ref<HTMLDivElement>;
-type SidebarWidth = number;
-type StartResizingFn = () => void;
-
-function useResizer(sidebarWidth: number): [SidebarRef, SidebarWidth, StartResizingFn] {
-  const sidebarRef = React.useRef<HTMLDivElement | null>(null);
-  const [isResizing, setIsResizing] = React.useState(false);
-  const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
-
-  const startResizing = React.useCallback(() => {
-    setIsResizing(true);
-  }, []);
-
-  const stopResizing = React.useCallback(() => {
-    setIsResizing(false);
-  }, []);
-
-  const resize = React.useCallback(
-    mouseMoveEvent => {
-      if (isResizing) {
-        const value = mouseMoveEvent.clientX - sidebarRef.current!.getBoundingClientRect().left;
-        setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
-      }
-    },
-    [isResizing],
-  );
-
-  React.useEffect(() => {
-    window.addEventListener('mousemove', resize);
-    window.addEventListener('mouseup', stopResizing, { passive: true });
-    return () => {
-      window.removeEventListener('mousemove', resize);
-      window.removeEventListener('mouseup', stopResizing);
-    };
-  }, [resize, stopResizing]);
-
-  return [sidebarRef, currentSidebarWidth, startResizing];
-}

package/src/components/LinkHeading.tsx

@@ -1,21 +0,0 @@
-import { LinkHeading as MosaicLinkHeading, LinkHeadingProps } from '@stoplight/mosaic';
-import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { RouterTypeContext, useRouterType } from '../context/RouterType';
-
-export const LinkHeading = React.memo<LinkHeadingProps>(function LinkHeading(props) {
-  const isUsingRouter = !!useRouterType();
-  const Comp = isUsingRouter ? CustomLinkHeading : MosaicLinkHeading;
-
-  return <Comp {...props} />;
-});
-
-const CustomLinkHeading = React.memo<LinkHeadingProps>(function LinkHeading({ id: _id, ...props }) {
-  const { pathname } = useLocation();
-  const routerKind = React.useContext(RouterTypeContext);
-  const route = pathname.split('#')[0];
-  const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
-
-  return <MosaicLinkHeading id={id} {...props} />;
-});

package/src/components/LoadMore.tsx

@@ -1,20 +0,0 @@
-import { Button, Flex, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-interface LoadMoreProps {
-  loading: boolean;
-  onClick: () => void;
-}
-
-export const LoadMore: React.FC<LoadMoreProps> = ({ loading, onClick }) => {
-  return (
-    <Flex flexDirection="col" justifyContent="center" alignItems="center" style={{ height: '400px' }}>
-      <Button aria-label="load-example" onPress={onClick} appearance="minimal" loading={loading} disabled={loading}>
-        {loading ? 'Loading...' : 'Load examples'}
-      </Button>
-      <Text fontSize="base" textAlign="center">
-        Large examples are not rendered by default.
-      </Text>
-    </Flex>
-  );
-};

package/src/components/Loading/Loading.tsx

@@ -1,9 +0,0 @@
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
-import { Flex, Icon } from '@stoplight/mosaic';
-import React from 'react';
-
-export const Loading = () => (
-  <Flex justify="center" alignItems="center" w="full" minH="screen" color="muted">
-    <Icon icon={faCircleNotch} size="3x" spin />
-  </Flex>
-);

package/src/components/Logo.tsx

@@ -1,25 +0,0 @@
-import { Box } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { LogoProps } from '../types';
-
-export const Logo: React.FC<{ logo: LogoProps }> = ({ logo }) => {
-  return (
-    <Box
-      display="inline"
-      mr={3}
-      rounded="lg"
-      overflowY="hidden"
-      overflowX="hidden"
-      style={{ backgroundColor: logo.backgroundColor ?? 'transparent' }}
-    >
-      {logo.href ? (
-        <a href={logo.href} target="_blank" rel="noopener noreferrer">
-          <img src={logo.url} height="30px" width="30px" alt={logo.altText} />
-        </a>
-      ) : (
-        <img src={logo.url} height="30px" width="30px" alt={logo.altText} />
-      )}
-    </Box>
-  );
-};