Perf/font optimization

netlify.toml

@@ -2,6 +2,9 @@
 external_node_modules = ["sharp"]
 included_files = ["node_modules/sharp/**/*", "./github.pem"]
 
+[build]
+YARN_FLAGS = "--skip-integrity-check"
+
 [[redirects]]
 force = true
 from = "/404/docs/recipes/store-management/enabling-order-form-optimization"

package.json

@@ -30,7 +30,7 @@
     "@types/probe-image-size": "^7.2.0",
     "@types/react-svg-pan-zoom": "^3.3.5",
     "@types/uuid": "^9.0.0",
-    "@vtex/brand-ui": "^0.46.1",
+    "@vtexdocs/brand-ui": "https://gitpkg.now.sh/vtexdocs/brand-ui/packages/brand-ui/dist?b3777abc881fd4d3874a7799d107dd831d6e847f",
     "algoliasearch": "^4.14.2",
     "chalk": "^5.2.0",
     "copy-text-to-clipboard": "^3.0.1",
@@ -76,7 +76,15 @@
     "unist-builder": "^3.0.1",
     "unist-util-visit": "^4.1.1",
     "use-yarn": "^2.4.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "@emotion/core": "^10.0.35",
+    "@react-aria/focus": "3.2.0",
+    "@theme-ui/css": "0.4.0-rc.3",
+    "deepmerge": "^4.2.2",
+    "luxon": "^1.25.0",
+    "react-swipeable": "^6.0.0",
+    "theme-ui": "^0.3.1",
+    "tiny-invariant": "^1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.2.1",

src/components/JsonEditorComponent/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useContext, useEffect } from 'react'
 import { SidebarContext } from 'utils/contexts/sidebar'
 import navigation from '../../../public/navigation.json'
 import styles from './styles'
-import { Box, Button } from '@vtex/brand-ui'
+import { Box, Button } from '@vtexdocs/brand-ui'
 import { ToastContainer, toast } from 'react-toastify'
 const initialData = navigation.navbar
 import { injectStyle } from 'react-toastify/dist/inject-style'

src/components/JsonEditorComponent/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const formBox: SxStyleProp = {
   textarea: {

src/components/JsonEditorIndex/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import navigation from '../../../public/navigation.json'
 import styles from './styles'
-import { Box, Button } from '@vtex/brand-ui'
+import { Box, Button } from '@vtexdocs/brand-ui'
 import { ToastContainer, toast } from 'react-toastify'
 import { injectStyle } from 'react-toastify/dist/inject-style'
 

src/components/JsonEditorIndex/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const formBox: SxStyleProp = {
   textarea: {

src/components/announcement-bar/IconClose.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, IconProps } from '@vtex/brand-ui'
+import { Icon, IconProps } from '@vtexdocs/brand-ui'
 
 export function IconClose(props: IconProps) {
   return (

src/components/announcement-bar/index.tsx

@@ -1,7 +1,7 @@
 import styles from './styles'
 import type { PropsWithChildren } from 'react'
 import { useDialogState, Dialog } from 'reakit/Dialog'
-import { Box, Button, Text, SxProps, Link } from '@vtex/brand-ui'
+import { Box, Button, Text, SxProps, Link } from '@vtexdocs/brand-ui'
 import { IconClose } from './IconClose'
 
 interface AnnouncementBarProps extends PropsWithChildren<SxProps> {

src/components/announcement-bar/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const container: SxStyleProp = (type: string) => {
   const background = {

src/components/article-pagination/index.tsx

@@ -1,4 +1,4 @@
-import { Link, Grid, Text, Box } from '@vtex/brand-ui'
+import { Link, Grid, Text, Box } from '@vtexdocs/brand-ui'
 import { useRouter } from 'next/router'
 
 interface Props {

src/components/article-pagination/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const mainContainer: SxStyleProp = {
   width: '100%',

src/components/auth/index.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react'
-import { Box, Flex, Button, Text } from '@vtex/brand-ui'
+import { Box, Flex, Button, Text } from '@vtexdocs/brand-ui'
 import { useSession, signIn, signOut } from 'next-auth/react'
 
 import styles from './styles'

src/components/auth/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const signOutButton: SxStyleProp = {
   bottom: '20px',

src/components/breadcrumb/index.tsx

@@ -1,4 +1,4 @@
-import { Link, Flex, IconCaret, Text } from '@vtex/brand-ui'
+import { Link, Flex, IconCaret, Text } from '@vtexdocs/brand-ui'
 
 import styles from './styles'
 

src/components/breadcrumb/styles.ts

@@ -1,4 +1,4 @@
-import type { SxStyleProp } from '@vtex/brand-ui'
+import type { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const breadcrumb: SxStyleProp = {
   alignItems: 'center',

src/components/category-layout/index.tsx

@@ -1,6 +1,6 @@
 import styles from './styles'
 import type { ReactElement } from 'react'
-import { Box } from '@vtex/brand-ui'
+import { Box } from '@vtexdocs/brand-ui'
 interface Props {
   children: ReactElement[]
 }

src/components/category-layout/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const container: SxStyleProp = {
   maxWidth: '1080px',

src/components/code-block/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import CopyButton from 'components/copy-button'
-import { Box, Text } from '@vtex/brand-ui'
+import { Box, Text } from '@vtexdocs/brand-ui'
 import styles from './styles'
 import { childrenToString } from 'utils/string-utils'
 

src/components/code-block/styles.ts

@@ -1,4 +1,4 @@
-import type { SxStyleProp } from '@vtex/brand-ui'
+import type { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const CodeBlock: SxStyleProp = {
   backgroundColor: '#f8f7fc !important',

src/components/contributors/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Box, Flex, Grid, IconCaret, Text } from '@vtex/brand-ui'
+import { Box, Flex, Grid, IconCaret, Text } from '@vtexdocs/brand-ui'
 
 import Tooltip from 'components/tooltip'
 

src/components/contributors/styles.ts

@@ -1,4 +1,4 @@
-import type { SxStyleProp } from '@vtex/brand-ui'
+import type { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const container: SxStyleProp = {
   mb: '32px',

src/components/copy-button/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useRef, useEffect } from 'react'
 import copy from 'copy-text-to-clipboard'
-import { Box, Button, Icon } from '@vtex/brand-ui'
+import { Box, Button, Icon } from '@vtexdocs/brand-ui'
 
 import styles from './styles'
 

src/components/copy-button/styles.ts

@@ -1,4 +1,4 @@
-import type { SxStyleProp } from '@vtex/brand-ui'
+import type { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const basicButton: SxStyleProp = {
   float: 'right',

src/components/documentation-card/functions.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 import styles from './styles'
 
 const cardContainer = (containerType: string) => {

src/components/documentation-card/index.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { Box, Flex, Text } from '@vtex/brand-ui'
+import { Box, Flex, Text } from '@vtexdocs/brand-ui'
 
 import styles from './styles'
 import { cardContainer, cardTitle, titleContainer } from './functions'

src/components/documentation-card/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const cardContainer: SxStyleProp = {
   my: ['16px', '16px', '16px', '16px', '16px', '16px', '24px'],

src/components/documentation-section-card/index.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { Flex, Text } from '@vtex/brand-ui'
+import { Flex, Text } from '@vtexdocs/brand-ui'
 
 import { getMessages } from 'utils/get-messages'
 import type { DocDataElement } from 'utils/typings/types'

src/components/documentation-section-card/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const cardContainer: SxStyleProp = {
   flexDirection: 'column',

src/components/documentation-section/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from '@vtex/brand-ui'
+import { Box, Flex, Text } from '@vtexdocs/brand-ui'
 
 import DocumentationSectionCard from '../documentation-section-card'
 

src/components/documentation-section/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const sectionContainer: SxStyleProp = {
   px: ['8px', '12px', '96px', '38px'],

src/components/dropdown-menu/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@vtex/brand-ui'
+import { Box } from '@vtexdocs/brand-ui'
 
 import DocumentationCard from 'components/documentation-card'
 import { documentationData, updatesData } from 'utils/constants'

src/components/dropdown-menu/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const outerContainer: SxStyleProp = {
   cursor: 'initial',

src/components/education-channel/index.tsx

@@ -1,7 +1,7 @@
 import type { IconComponent } from 'utils/typings/types'
 
 import Link from 'next/link'
-import { Flex, Text } from '@vtex/brand-ui'
+import { Flex, Text } from '@vtexdocs/brand-ui'
 
 import ArrowRightIcon from 'components/icons/arrow-right-icon'
 

src/components/education-channel/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const channelBox: SxStyleProp = {
   flexDirection: 'column',

src/components/education-section/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, Flex } from '@vtex/brand-ui'
+import { Box, Text, Flex } from '@vtexdocs/brand-ui'
 
 import EducationChannel from 'components/education-channel'
 import GithubIcon from 'components/icons/github-icon'

src/components/education-section/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const container: SxStyleProp = {
   pt: ['32px', '64px'],

src/components/feedback-modal/functions.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 import styles from './styles'
 
 const modalWidth = 320,

src/components/feedback-modal/index.tsx

@@ -1,4 +1,11 @@
-import { Box, Button, Textarea, Text, Icon, IconProps } from '@vtex/brand-ui'
+import {
+  Box,
+  Button,
+  Textarea,
+  Text,
+  Icon,
+  IconProps,
+} from '@vtexdocs/brand-ui'
 import {
   Dispatch,
   MutableRefObject,

src/components/feedback-modal/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const container: SxStyleProp = {
   display: 'flex',

src/components/feedback-section/functions.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 import { ModalProps } from 'components/feedback-modal'
 import styles from './styles'
 

src/components/feedback-section/index.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text, Link } from '@vtex/brand-ui'
+import { Flex, Text, Link } from '@vtexdocs/brand-ui'
 import EditIcon from 'components/icons/edit-icon'
 import LikeIcon from 'components/icons/like-icon'
 import LikeSelectedIcon from 'components/icons/like-selected-icon'

src/components/feedback-section/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const container: SxStyleProp = {
   width: '100%',

src/components/footer/index.tsx

@@ -1,4 +1,4 @@
-import { Box, FooterLanding } from '@vtex/brand-ui'
+import { Box, FooterLanding } from '@vtexdocs/brand-ui'
 import { getMessages } from 'utils/get-messages'
 import styles from './styles'
 import {

src/components/footer/styles.ts

@@ -1,4 +1,4 @@
-import { SxStyleProp } from '@vtex/brand-ui'
+import { SxStyleProp } from '@vtexdocs/brand-ui'
 
 const footerLeftLinks: SxStyleProp = {
   ml: ['0px', '32px'],

src/components/header/hamburger-menu.tsx

@@ -4,7 +4,7 @@ import {
   Box,
   IconCaret,
   Button,
-} from '@vtex/brand-ui'
+} from '@vtexdocs/brand-ui'
 import styles from './styles'
 
 import DocumentationCard from 'components/documentation-card'

src/components/header/index.tsx

@@ -4,7 +4,7 @@ import {
   Flex,
   Text,
   Box,
-} from '@vtex/brand-ui'
+} from '@vtexdocs/brand-ui'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 

src/components/header/styles.ts

@@ -1,4 +1,5 @@
-import type { SxStyleProp } from '@vtex/brand-ui'
+import type { SxStyleProp } from '@vtexdocs/brand-ui'
+import { VtexTrustMedium } from 'utils/fonts'
 
 const menuContainer: SxStyleProp = {
   display: 'flex',
@@ -107,10 +108,9 @@ const dropdownButton: (active: boolean) => SxStyleProp = (active: boolean) => ({
 })
 
 const rightButtonsText: SxStyleProp = {
-  fontWeight: 'normal',
   fontSize: '16px',
   lineHeight: '22px',
-  fontFamily: 'VTEX Trust Medium !important',
+  fontFamily: `${VtexTrustMedium.style.fontFamily} !important`,
   textTransform: 'none',
 }
 

src/components/icons/added-icon.tsx

@@ -1,5 +1,5 @@
-import type { IconProps } from '@vtex/brand-ui'
-import { Icon } from '@vtex/brand-ui'
+import type { IconProps } from '@vtexdocs/brand-ui'
+import { Icon } from '@vtexdocs/brand-ui'
 
 const AddedIcon = (props: IconProps) => (
   <Icon

src/components/icons/api-guides-icon.tsx

@@ -1,5 +1,5 @@
-import type { IconProps } from '@vtex/brand-ui'
-import { Icon } from '@vtex/brand-ui'
+import type { IconProps } from '@vtexdocs/brand-ui'
+import { Icon } from '@vtexdocs/brand-ui'
 
 const APIGuidesIcon = (props: IconProps) => (
   <Icon

src/components/icons/api-reference-icon.tsx

@@ -1,5 +1,5 @@
-import type { IconProps } from '@vtex/brand-ui'
-import { Icon } from '@vtex/brand-ui'
+import type { IconProps } from '@vtexdocs/brand-ui'
+import { Icon } from '@vtexdocs/brand-ui'
 
 const APIReferenceIcon = (props: IconProps) => (
   <Icon

src/components/icons/app-development-icon.tsx

@@ -1,5 +1,5 @@
-import type { IconProps } from '@vtex/brand-ui'
-import { Icon } from '@vtex/brand-ui'
+import type { IconProps } from '@vtexdocs/brand-ui'
+import { Icon } from '@vtexdocs/brand-ui'
 
 const AppDevelopmentIcon = (props: IconProps) => (
   <Icon

src/components/icons/arrow-left-icon.tsx

@@ -1,5 +1,5 @@
-import type { IconProps } from '@vtex/brand-ui'
-import { Icon } from '@vtex/brand-ui'
+import type { IconProps } from '@vtexdocs/brand-ui'
+import { Icon } from '@vtexdocs/brand-ui'
 
 const ArrowLeftIcon = (props: IconProps) => (
   <Icon