fix: rename brand ui package

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": "https://gitpkg.now.sh/vtexdocs/brand-ui/packages/brand-ui/dist?main",
+    "vtexdocs-brand-ui": "https://gitpkg.now.sh/vtexdocs/brand-ui/packages/brand-ui/dist?main",
     "algoliasearch": "^4.14.2",
     "chalk": "^5.2.0",
     "copy-text-to-clipboard": "^3.0.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/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,4 @@
-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,4 @@
-import type { SxStyleProp } from '@vtex/brand-ui'
+import type { SxStyleProp } from 'vtexdocs-brand-ui'
 import { VtexTrustMedium } from 'utils/fonts'
 
 const menuContainer: SxStyleProp = {

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

src/components/icons/arrow-right-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 ArrowRightIcon = (props: IconProps) => (
   <Icon

src/components/icons/caret.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 CaretIcon = (props: IconProps) => (
   <Icon

src/components/icons/close-filter-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 CloseFilterIcon = (props: IconProps) => (
   <Icon

src/components/icons/close-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 CloseIcon = (props: IconProps) => (
   <Icon

src/components/icons/community-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 CommunityIcon = (props: IconProps) => (
   <Icon

src/components/icons/deprecated-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 DeprecatedIcon = (props: IconProps) => (
   <Icon

src/components/icons/documentation-updates-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 DocumentationUpdatesIcon = (props: IconProps) => (
   <Icon

src/components/icons/edit-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 EditIcon = (props: IconProps) => (
   <Icon