@redocly/theme 0.18.3-patch.8 → 0.18.4-patch.1

package/src/components/EditPageButton/EditPageButton.tsx

@@ -3,18 +3,29 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 import { telemetry } from '@portal/telemetry';
+import { EditIcon } from '@theme/icons';
+import { useTranslate } from '@portal/hooks';
 
 export interface EditPageButtonProps {
-  text: string;
   to: string;
-  icon?: string;
 }
 
-export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
+export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    text: 'theme.markdown.editPage.text',
+  };
+
   return (
-    <EditButton to={to} onClick={() => telemetry.send('edit_page_link_clicked', {})}>
-      {icon ? <ButtonIcon src={icon} /> : null}
-      <ButtonText>{text}</ButtonText>
+    <EditButton
+      data-component-name="EditPageButton/EditPageButton"
+      to={to}
+      onClick={() => telemetry.send('edit_page_link_clicked', {})}
+    >
+      <ButtonIcon />
+      <ButtonText data-translation-key={translationKeys.text}>
+        {translate(translationKeys.text, 'Edit')}
+      </ButtonText>
     </EditButton>
   );
 };
@@ -37,9 +48,8 @@ const EditButton = styled(Link)`
   }
 `;
 
-const ButtonIcon = styled.img`
-  height: 14px;
-  padding-right: 3px;
+const ButtonIcon = styled(EditIcon)`
+  margin-right: 3px;
 `;
 
 const ButtonText = styled.span`

package/src/components/Filter/Filter.tsx

@@ -175,7 +175,7 @@ const FilterOptionCount = styled.label`
   font-weight: var(--filter-option-count-font-weight);
   padding: var(--filter-option-count-padding);
   border-radius: var(--filter-option-count-border-radius);
-  border: 1px solid var(--filter-option-count-border-color);
+  border: var(--filter-option-count-border);
   background-color: var(--filter-option-count-background-color);
 `;
 

package/src/components/Filter/styledVariables.ts

@@ -20,14 +20,14 @@ export const filter = css`
   --filter-option-label-margin: 0 var(--spacing-xs) 0 0;
   --filter-option-label-color: var(--text-secondary);
 
-  --filter-option-count-height: 14px;
-  --filter-option-count-color: var(--text-description);
-  --filter-option-count-font-size: var(--spacing-sm);
+  --filter-option-count-height: 17px;
+  --filter-option-count-color: var(--text-secondary);
+  --filter-option-count-font-size: var(--font-size-sm);
   --filter-option-count-font-weight: var(--font-weight-regular);
   --filter-option-count-padding: 0px var(--spacing-xxs);
   --filter-option-count-border-radius: var(--spacing-sm);
-  --filter-option-count-border-color: 1px solid var(--border-secondary);
-  --filter-option-count-background-color: var(--bg-raised);
+  --filter-option-count-border: 1px solid var(--border-primary);
+  --filter-option-count-background-color: var(--bg-overlay);
 
   --filter-content-border-color: var(--border-secondary);
   --filter-content-items-padding: 0 var(--spacing-lg);
@@ -47,7 +47,7 @@ export const filter = css`
   --filter-popover-header-button-font-size: var(--font-size-base);
   --filter-popover-header-button-font-weight: var(--font-weight-regular);
 
-  --filter-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) var(--spacing-base);
+  --filter-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) 0;
   --filter-tag-color: var(--text-primary);
   --filter-tag-border-radius: var(--spacing-sm);
   --filter-tag-border-color: var(--border-primary);

package/src/components/Footer/FooterColumn.tsx

@@ -6,6 +6,7 @@ import type { ResolvedNavItem } from '@theme/types/portal';
 import { useTranslate } from '@portal/hooks';
 import { Image } from '@theme/components/Image/Image';
 import { telemetry } from '@portal/telemetry';
+import { ExternalIcon } from '@theme/icons';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
@@ -47,6 +48,7 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
                 </FooterLinkIcon>
               ) : null}
               {!iconsOnly && translate(columnItem.labelTranslationKey, columnItem.label)}
+              {columnItem.external ? <ExternalIcon /> : null}
             </FooterLink>
           );
         })}

package/src/components/Markdown/MarkdownLayout.tsx

@@ -8,7 +8,6 @@ import { EditPageButton } from '@theme/components/EditPageButton';
 import { LastUpdated } from '@theme/components/LastUpdated/LastUpdated';
 import { useThemeConfig } from '@theme/hooks';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
-import { useTranslate } from '@portal/hooks';
 import { Breadcrumbs as ThemeBreadcrumbs } from '@theme/components/Breadcrumbs';
 
 type MarkdownLayoutProps = {
@@ -17,8 +16,6 @@ type MarkdownLayoutProps = {
   feedback: React.ReactNode;
   editPage?: {
     to: string;
-    text: string;
-    icon?: string;
   };
   /** String in ISO format */
   lastModified?: string | null;
@@ -38,10 +35,7 @@ export function MarkdownLayout({
   className,
 }: MarkdownLayoutProps): JSX.Element {
   const { markdown } = useThemeConfig();
-  const { translate } = useTranslate();
-  const translationKeys = {
-    text: 'theme.markdown.editPage.text',
-  };
+
   const { editPage: themeEditPage } = markdown || {};
 
   const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
@@ -52,14 +46,7 @@ export function MarkdownLayout({
         <Breadcrumbs />
         <LayoutTop>
           {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-          {mergedConf && (
-            <EditPageButton
-              text={translate(translationKeys.text, mergedConf.text)}
-              to={mergedConf.to}
-              icon={mergedConf.icon}
-              data-translation-key={translationKeys.text}
-            />
-          )}
+          {mergedConf && <EditPageButton to={mergedConf.to} />}
         </LayoutTop>
         {markdownWrapper}
         <LayoutBottom>{feedback}</LayoutBottom>

package/src/components/Menu/MenuItem.tsx

@@ -17,7 +17,7 @@ export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
         <Label active={item.active}>
           {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
           {translate(item.labelTranslationKey, item.label)}
-          {item.external ? <ExternalIcon dataComponentName="Sidebar/ExternalIcon" /> : null}
+          {item.external ? <ExternalIcon /> : null}
         </Label>
       </MenuLinkItem>
 

package/src/components/Menu/styledVariables.ts

@@ -26,7 +26,7 @@ export const mobileMenu = css`
   --mobile-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --mobile-menu-padding-top: var(--spacing-sm); // @presenter Spacing
   --mobile-menu-items-margin-top: var(--spacing-xxs); // @presenter Spacing
-  --mobile-menu-burger-button-margin: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-burger-button-margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0; // @presenter Spacing
   --mobile-menu-background: var(--bg-base); // @presenter Color
   --mobile-menu-profile-background: var(--bg-base); // @presenter Color
   --mobile-menu-profile-border-color: var(--border-secondary); // @presenter Color

package/src/components/Navbar/Navbar.tsx

@@ -12,7 +12,7 @@ import { Search } from '@theme/components/Search/Search';
 import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
 import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
 import { useI18n } from '@portal/hooks';
-import { LanguagePicker } from '@theme/I18n/LanguagePicker';
+import { LanguagePicker } from '@theme/i18n/LanguagePicker';
 import { ProductPicker } from '@theme/components/Product';
 import { BurgerButton } from '@theme/components/Navbar/BurgerButton';
 
@@ -141,7 +141,7 @@ export const NavbarContainer = styled.nav`
   position: sticky;
   top: 0;
   z-index: var(--z-index-raised);
-  padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal);
+  padding: 0;
   background: var(--navbar-background-color);
   font-family: var(--navbar-font-family);
 
@@ -156,6 +156,10 @@ export const NavbarContainer = styled.nav`
       margin: 0;
     }
   }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    padding: var(--navbar-padding);
+  }
 `;
 
 export const NavbarRow = styled.div`
@@ -163,7 +167,11 @@ export const NavbarRow = styled.div`
   align-items: center;
   justify-content: space-between;
   margin: 0 auto;
-  width: 100%;
+  width: 90%;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 100%;
+  }
 
   gap: var(--navbar-menu-items-gap);
   max-width: var(--navbar-container-max-width);

package/src/components/Navbar/NavbarItem.tsx

@@ -13,6 +13,7 @@ import { useI18nConfig, useTranslate } from '@portal/hooks';
 import { withPathPrefix } from '@theme/utils';
 import { telemetry } from '@portal/telemetry';
 import { Dropdown } from '@theme/components/Dropdown';
+import { ExternalIcon } from '@theme/icons';
 
 export interface NavbarItemProps {
   navItem: ResolvedNavItem;
@@ -40,6 +41,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           {item.icon ? <NavbarIcon url={item.icon} /> : null}
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
+          {item.external ? <ExternalIcon /> : null}
         </NavbarLink>
       </NavbarMenuItem>
     );
@@ -64,6 +66,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         >
           <NavbarIcon url={item.icon} />
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
+          {item.external ? <ExternalIcon /> : null}
         </NavbarMenuItem>
       </NavbarMenuItemDropdown>
     );
@@ -84,6 +87,8 @@ export const NavbarMenuItemDropdown = styled(Dropdown).attrs(() => ({
 `;
 
 export const NavbarLink = styled(Link)`
+  display: flex;
+  align-items: center;
   color: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) =>

package/src/components/Navbar/styledVariables.ts

@@ -1,15 +1,14 @@
 import { css } from 'styled-components';
 
 export const navbar = css`
-  --navbar-background-color: var(--bg-raised); // @presenter Color
+  --navbar-background-color: var(--bg-base); // @presenter Color
   --navbar-border-color: var(--border-secondary);
   --navbar-border: 1px solid var(--navbar-border-color);
 
   --navbar-text-color: var(--text-secondary); // @presenter Color
   --navbar-height: 64px; // @presenter Spacing
   --navbar-font-size: var(--font-size-base);
-  --navbar-padding-horizontal: var(--spacing-xl); // @presenter Spacing
-  --navbar-padding-vertical: 0;
+  --navbar-padding: 0 var(--spacing-xl); // @presenter Spacing
   --navbar-font-family: var(--font-family-base);
   --navbar-container-max-width: 100%;
 

package/src/components/PageNavigation/NextButton.tsx

@@ -29,7 +29,6 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
 
   return (
     <StyledButton
-      variant="outlined"
       size="large"
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"

package/src/components/PageNavigation/PreviousButton.tsx

@@ -32,7 +32,6 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
 
   return (
     <StyledButton
-      variant="outlined"
       size="large"
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"

package/src/components/Product/ProductPicker.tsx

@@ -47,6 +47,11 @@ const ProductSelect = styled(Select).attrs(() => ({
     'data-component-name': 'Product/ProductPicker',
   },
 }))`
+  --select-list-item-active-background-color: var(
+    --product-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--product-picker-list-item-hover-background-color);
+
   display: none;
   font-size: var(--product-picker-font-size);
   font-weight: var(--product-picker-font-weight);
@@ -81,10 +86,6 @@ const ProductSelect = styled(Select).attrs(() => ({
       padding: var(--product-picker-list-item-vertical-padding)
         var(--product-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--product-picker-list-item-active-background-color);
-    }
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/components/Product/styledVariables.ts

@@ -36,4 +36,5 @@ export const productPicker = css`
   --product-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --product-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --product-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --product-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
 `;

package/src/components/Select/Select.tsx

@@ -143,7 +143,6 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
-  width: 100%;
   max-width: var(--select-list-max-width);
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);

package/src/components/Select/styledVariables.ts

@@ -24,7 +24,7 @@ export const select = css`
   --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(--color-primary-bg); // @presenter Color
+  --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/Sidebar/HeaderWrapper.tsx

@@ -6,5 +6,5 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
 }))`
   margin: var(--sidebar-offset-top) 0 0 0;
   padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
-  border-bottom: solid 1px var(--border-secondary);
+  border-bottom: solid 1px var(--border-primary);
 `;

package/src/components/Sidebar/VersionPicker.tsx

@@ -30,6 +30,7 @@ export const VersionPicker = styled(Select).attrs(() => ({
 
   ${SelectList} {
     right: 0;
+    width: 100%;
     min-width: var(--version-picker-list-min-width);
     max-width: var(--version-picker-list-max-width);
     padding: var(--version-picker-list-padding);

package/src/components/TableOfContent/TableOfContent.tsx

@@ -101,6 +101,8 @@ const MenuItem = styled.a<{ depth: number }>`
   :hover,
   &.active {
     color: var(--toc-item-active-text-color);
+    background-color: var(--toc-item-active-background-color);
+    border-radius: var(--border-radius);
   }
 
   :empty {

package/src/components/TableOfContent/styledVariables.ts

@@ -15,7 +15,7 @@ export const toc = css`
      * @tokens TOC item typography
      */
   --toc-item-font-family: var(--font-family-base); // @presenter FontFamily
-  --toc-item-font-size: var(--font-size-base); // @presenter FontSize
+  --toc-item-font-size: var(--font-size-sm); // @presenter FontSize
 
   /**
     * @tokens TOC item
@@ -25,6 +25,7 @@ export const toc = css`
   --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --toc-item-active-text-color: var(--text-primary); // @presenter Color
   --toc-item-background-color: transparent; // @presenter Color
+  --toc-item-active-background-color: var(--bg-overlay); // @presenter Color
   --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
   --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing
   --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing

package/src/components/Tag/Tag.tsx

@@ -13,7 +13,7 @@ type Color =
   | 'grey'
   | 'gold'
   | 'cyan'
-  | 'magneta'
+  | 'magenta'
   | 'purple'
   | 'lime'
   | 'geekblue'

package/src/components/Tag/styledVariables.ts

@@ -19,6 +19,15 @@ export const tag = css`
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
+  /**
+    * @tokens Tag size
+    */
+   
+  .tag-size-large {
+    --tag-padding: var(--tag-large-padding);
+    --tag-font-size: var(--font-size-base);
+  }
+
   /**
     * @tokens Tag typography
     */
@@ -39,11 +48,6 @@ export const tag = css`
     * @tokens Tag colors
     */
 
-  .tag-size-large {
-    --tag-padding: var(--tag-large-padding);
-    --tag-font-size: var(--font-size-regular);
-  }
-
   .tag-grey,
   .tag-draft,
   .tag-schema,
@@ -116,11 +120,11 @@ export const tag = css`
     --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
-  .tag-magneta,
+  .tag-magenta,
   .tag-hook {
-    --tag-color: var(--color-magneta-7); // @presenter Color
-    --tag-background-color: var(--color-magneta-1); // @presenter Color
-    --tag-border-color: var(--color-magneta-7); // @presenter Color
+    --tag-color: var(--color-magenta-7); // @presenter Color
+    --tag-background-color: var(--color-magenta-1); // @presenter Color
+    --tag-border-color: var(--color-magenta-7); // @presenter Color
   }
 
   .tag-lime {

package/src/config.ts

@@ -100,8 +100,6 @@ const markdownConfigSchema = {
       type: 'object',
       properties: {
         baseUrl: { type: 'string' },
-        icon: { type: 'string' },
-        text: { type: 'string', default: 'Edit this page' },
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
@@ -198,37 +196,17 @@ const googleAnalyticsConfigSchema = {
   properties: {
     includeInDevelopment: { type: 'boolean' },
     trackingId: { type: 'string' },
+
+    conversionId: { type: 'string' },
+    floodlightId: { type: 'string' },
+
     head: { type: 'boolean' },
     respectDNT: { type: 'boolean' },
-    anonymize: { type: 'boolean' },
     exclude: { type: 'array', items: { type: 'string' } },
-    optimizeId: { type: 'string' },
-    experimentId: { type: 'string' },
-    variationId: { type: 'string' },
-    enableWebVitalsTracking: { type: 'boolean' },
 
-    defer: { type: 'boolean' },
-    sampleRate: { type: 'number' },
-    name: { type: 'string' },
-    clientId: { type: 'string' },
-    siteSpeedSampleRate: { type: 'number' },
-    alwaysSendReferrer: { type: 'boolean' },
-    allowAnchor: { type: 'boolean' },
-    cookieName: { type: 'string' },
-    cookieFlags: { type: 'string' },
-    cookieDomain: { type: 'string' },
+    optimizeId: { type: 'string' },
+    anonymizeIp: { type: 'boolean' },
     cookieExpires: { type: 'number' },
-    storeGac: { type: 'boolean' },
-    legacyCookieDomain: { type: 'string' },
-    legacyHistoryImport: { type: 'boolean' },
-    allowLinker: { type: 'boolean' },
-    storage: { type: 'string' },
-
-    allowAdFeatures: { type: 'boolean' },
-    dataSource: { type: 'string' },
-    queueTime: { type: 'number' },
-    forceSSL: { type: 'boolean' },
-    transport: { type: 'string' },
   },
   additionalProperties: false,
   required: ['trackingId'],

package/src/globalStyle.ts

@@ -16,7 +16,7 @@ import { menu, mobileMenu } from "@theme/components/Menu";
 import { apiReferencePanels, responsePanelColors } from '@theme/components/Panel';
 import { code } from '@theme/components/CodeBlock';
 import { product, productPicker } from '@theme/components/Product';
-import { languagePicker } from '@theme/I18n';
+import { languagePicker } from '@theme/i18n';
 import { select } from '@theme/components/Select';
 import { userProfile, userProfileDropdown } from '@theme/components/Profile';
 import { dropdown } from '@theme/components/Dropdown';
@@ -351,8 +351,8 @@ const borders = css`
    * @presenter Color
    */
 
-  --border-primary: #d5d5d5; // 12% opacity. Raised dividers
-  --border-secondary: #f0f0f0; // 6% opacity. Default dividers, borders
+  --border-primary: #00000021; // 13% opacity. Raised dividers
+  --border-secondary: #00000017; // 9% opacity. Default dividers, borders
 
   /**
    * @tokens Border Radius

package/src/i18n/index.ts

@@ -0,0 +1,2 @@
+export { LanguagePicker } from '@theme/i18n/LanguagePicker';
+export * from '@theme/i18n/styledVariables';

package/src/icons/EditIcon/EditIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    className={className}
+    fill="none"
+    data-component-name="icons/EditIcon"
+  >
+    <rect width="16" height="16" fill="white" style={{ mixBlendMode: 'multiply' }} />
+    <path d="M15 13H1V14H15V13Z" fill="currentColor" />
+    <path
+      d="M12.7 4.5C13.1 4.1 13.1 3.5 12.7 3.1L10.9 1.3C10.5 0.9 9.9 0.9 9.5 1.3L2 8.8V12H5.2L12.7 4.5ZM10.2 2L12 3.8L10.5 5.3L8.7 3.5L10.2 2ZM3 11V9.2L8 4.2L9.8 6L4.8 11H3Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const EditIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+`;

package/src/icons/EditIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/EditIcon/EditIcon';

package/src/icons/ExternalIcon/ExternalIcon.tsx

@@ -9,14 +9,14 @@ const Icon = ({
   className?: string;
   dataComponentName?: string;
 }): JSX.Element => (
-  <span data-component-name={dataComponentName}>
+  <span data-component-name={dataComponentName ?? 'icons/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"
+      viewBox="0 0 110 110"
+      enableBackground="new 0 0 110 110"
       className={className}
     >
       <path d="M-408.167-318.5" />
@@ -40,5 +40,5 @@ export const ExternalIcon = styled(Icon)`
   width: 10px;
   height: 10px;
   margin-left: 5px;
-  fill: var(--sidebar-group-item-chevron-color);
+  fill: currentColor;
 `;

package/src/icons/RocketIcon/RocketIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/RocketIcon"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.7002 1.55068C13.5251 1.49305 13.3388 1.47772 13.1567 1.50596L13.152 1.50671C11.8258 1.7252 9.24768 2.44828 6.43935 4.8604C5.65751 4.58592 4.81217 4.53466 3.99912 4.71587C3.07823 4.92111 2.24649 5.41394 1.62419 6.12309C1.45038 6.32115 1.46012 6.62011 1.64645 6.80644L3.21653 8.37652C3.16682 8.44409 3.11716 8.51231 3.06755 8.5812C2.92429 8.78013 2.94639 9.05359 3.11974 9.22694L3.17618 9.28339L2.5864 9.87317L2.58535 9.87422C2.36806 10.0928 2.24609 10.3885 2.24609 10.6967C2.24609 11.0049 2.36806 11.3006 2.58535 11.5192L2.5864 11.5203L4.47974 13.4136L4.48079 13.4147C4.69938 13.632 4.99507 13.7539 5.30329 13.7539C5.56764 13.7539 5.82278 13.6642 6.02797 13.5016C6.07134 13.4785 6.11147 13.449 6.14684 13.4136L6.72662 12.8338L6.77307 12.8803C6.94695 13.0542 7.22146 13.0758 7.42044 12.9313C7.48845 12.8819 7.55583 12.8324 7.62256 12.783L9.19307 14.3535C9.3794 14.5398 9.67836 14.5495 9.87642 14.3757C10.5856 13.7534 11.0784 12.9217 11.2836 12.0008C11.4657 11.1839 11.4131 10.3345 11.1352 9.54961C13.5373 6.75034 14.273 4.18993 14.4869 2.84653C14.5165 2.66498 14.5027 2.479 14.4467 2.30378C14.3906 2.1282 14.2937 1.96841 14.164 1.83751C14.0342 1.7066 13.8753 1.60831 13.7002 1.55068ZM10.3358 10.4241C9.77433 11.0018 9.13889 11.5852 8.41986 12.166L9.54647 13.2927C9.91995 12.8623 10.1826 12.3441 10.3076 11.7833C10.4077 11.334 10.4163 10.8719 10.3358 10.4241ZM7.40379 11.6944C12.1351 8.03789 13.2477 4.2709 13.4995 2.68816L13.4999 2.68582C13.5041 2.65984 13.5022 2.63321 13.4942 2.60813C13.4862 2.58305 13.4723 2.56022 13.4538 2.54152C13.4352 2.52282 13.4125 2.50878 13.3875 2.50054C13.363 2.49248 13.337 2.49021 13.3115 2.49391C12.1198 2.69072 9.6488 3.36687 6.93487 5.75486C6.90034 5.79743 6.85946 5.8334 6.81428 5.86196C5.99258 6.5985 5.15012 7.49283 4.31544 8.57889C4.29366 8.6174 4.26636 8.65363 4.23355 8.68644C4.23319 8.6868 4.23283 8.68716 4.23247 8.68752C4.19837 8.73243 4.16429 8.77767 4.13023 8.82323L4.18811 8.8811C4.20578 8.89449 4.22276 8.90921 4.23893 8.92526L7.09226 11.7586C7.12536 11.7915 7.15338 11.8285 7.17583 11.8684C7.22546 11.831 7.27471 11.7936 7.32359 11.7562C7.34864 11.7325 7.37553 11.7119 7.40379 11.6944ZM3.83102 7.57679C4.40831 6.85775 4.98895 6.22264 5.56449 5.66166C5.12019 5.58338 4.66217 5.59262 4.21666 5.69192C3.65578 5.81692 3.13757 6.07956 2.70726 6.45303L3.83102 7.57679ZM3.29456 10.5792L3.88329 9.9905L6.01952 12.1267L5.51323 12.633C5.47994 12.6533 5.44888 12.6775 5.42079 12.7055C5.38956 12.7365 5.34732 12.7539 5.30329 12.7539C5.25942 12.7539 5.21732 12.7366 5.18613 12.7058L3.29456 10.8142C3.2637 10.783 3.24609 10.7406 3.24609 10.6967C3.24609 10.6528 3.26371 10.6104 3.29456 10.5792Z"
+      fill="currentColor"
+      fillOpacity="0.87"
+    />
+  </svg>
+);
+
+export const RocketIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+`;

package/src/icons/RocketIcon/index.tsx

@@ -0,0 +1 @@
+export * from '@theme/icons/RocketIcon/RocketIcon';

package/src/icons/index.ts

@@ -19,3 +19,5 @@ export * from '@theme/icons/LanguageIcon';
 export * from '@theme/icons/PointingArrowIcon';
 export * from '@theme/icons/CheckboxIcon';
 export * from '@theme/icons/ErrorIcon';
+export * from '@theme/icons/EditIcon';
+export * from '@theme/icons/RocketIcon';

package/src/index.ts

@@ -7,4 +7,4 @@ export * from './globalStyle';
 export * from './types/config';
 export * from './config';
 export * from './ui';
-export * from './I18n';
+export * from './i18n';

package/src/mocks/hooks/index.ts

@@ -34,7 +34,6 @@ export function useThemeConfig<T extends Record<string, unknown>>(
       lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
       editPage: {
         baseUrl: '',
-        text: 'Edit this page',
       },
       frontMatterKeysToResolve: ['image', 'links'],
     },