@salesforce/retail-react-app 1.1.0-dev.0 → 1.1.0-dev.2

package/app/components/_app/index.jsx

@@ -22,7 +22,11 @@ import {
 } from '@salesforce/commerce-sdk-react'
 import * as queryKeyHelpers from '@salesforce/commerce-sdk-react/hooks/ShopperProducts/queryKeyHelpers'
 // Chakra
-import {Box, useDisclosure, useStyleConfig} from '@chakra-ui/react'
+import {
+    Box,
+    useDisclosure,
+    useStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {SkipNavLink, SkipNavContent} from '@chakra-ui/skip-nav'
 
 // Contexts
@@ -71,7 +75,7 @@ import Seo from '@salesforce/retail-react-app/app/components/seo'
 
 const onClient = typeof window !== 'undefined'
 
-/* 
+/*
 The categories tree can be really large! For performance reasons,
 we only load the level 0 categories on server side, and load the rest
 on client side to reduce SSR page size.
@@ -139,10 +143,23 @@ const App = (props) => {
         l10nConfig: site.l10n
     })
 
+    // If the translation file exists, it'll be served directly from static folder (and won't reach this code here).
+    // However, if the file is missing, the App would render a 404 page.
+    const is404ForMissingTranslationFile = /\/static\/translations\/compiled\/[^.]+\.json$/.test(
+        location?.pathname
+    )
+
     // Fetch the translation message data using the target locale.
     const {data: messages} = useQuery({
-        queryKey: ['app', 'translationas', 'messages', targetLocale],
-        queryFn: () => fetchTranslations(targetLocale),
+        queryKey: ['app', 'translations', 'messages', targetLocale],
+        queryFn: () => {
+            if (is404ForMissingTranslationFile) {
+                // Return early to prevent an infinite loop
+                // Otherwise, it'll continue to fetch the missing translation file again
+                return {}
+            }
+            return fetchTranslations(targetLocale)
+        },
         enabled: isServer
     })
 

package/app/components/_app-config/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {ChakraProvider} from '@chakra-ui/react'
+import {ChakraProvider} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Removes focus for non-keyboard interactions for the whole application
 import 'focus-visible/dist/focus-visible'

package/app/components/_app-config/index.test.js

@@ -17,8 +17,10 @@ import {rest} from 'msw'
 import {registerUserToken} from '@salesforce/retail-react-app/app/utils/test-utils'
 
 describe('AppConfig', () => {
+    let originalFetch
     beforeAll(() => {
         jest.spyOn(window.localStorage, 'setItem')
+        originalFetch = global.fetch
         global.fetch = jest.fn().mockImplementation(() => mockConfig.mockFetchOCAPISessions)
     })
 
@@ -45,7 +47,7 @@ describe('AppConfig', () => {
     afterAll(() => {
         window.localStorage.setItem.mockRestore()
         global.fetch.mockClear()
-        delete global.fetch
+        global.fetch = originalFetch
     })
 
     test('renders', async () => {

package/app/components/_error/index.jsx

@@ -7,7 +7,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {Helmet} from 'react-helmet'
-import {Box, Button, Flex, Heading, IconButton, Stack, Text} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Flex,
+    Heading,
+    IconButton,
+    Stack,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 import {BrandLogo, FileIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {useHistory} from 'react-router-dom'

package/app/components/action-card/index.jsx

@@ -6,7 +6,7 @@
  */
 import React, {useState} from 'react'
 import PropTypes from 'prop-types'
-import {Stack, Box, Button} from '@chakra-ui/react'
+import {Stack, Box, Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {FormattedMessage} from 'react-intl'
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 

package/app/components/address-display/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Text} from '@chakra-ui/react'
+import {Box, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 const AddressDisplay = ({address}) => {
     return (

package/app/components/basic-tile/index.jsx

@@ -7,7 +7,13 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Img, Text, AspectRatio, useTheme} from '@chakra-ui/react'
+import {
+    Box,
+    Img,
+    Text,
+    AspectRatio,
+    useTheme
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Link} from 'react-router-dom'
 
 import {ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'

package/app/components/breadcrumb/index.jsx

@@ -17,7 +17,7 @@ import {
     BreadcrumbLink as ChakraBreadcrumbLink,
     // Hooks
     useStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Icons
 import {ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'

package/app/components/confirmation-modal/index.jsx

@@ -15,7 +15,7 @@ import {
     AlertDialogContent,
     AlertDialogOverlay,
     Text
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 import PropTypes from 'prop-types'
 import {CONFIRMATION_DIALOG_DEFAULT_CONFIG} from '@salesforce/retail-react-app/app/pages/account/constant'

package/app/components/confirmation-modal/index.test.js

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import ConfirmationModal from '@salesforce/retail-react-app/app/components/confirmation-modal/index'
-import {Box, useDisclosure} from '@chakra-ui/react'
+import {Box, useDisclosure} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import userEvent from '@testing-library/user-event'
 import {screen} from '@testing-library/react'

package/app/components/drawer-menu/index.jsx

@@ -39,7 +39,7 @@ import {
     // Hooks
     useBreakpointValue,
     useMultiStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {AuthHelpers, useAuthHelper, useCustomerType} from '@salesforce/commerce-sdk-react'
 import Link from '@salesforce/retail-react-app/app/components/link'
 // Icons

package/app/components/dynamic-image/index.jsx

@@ -6,7 +6,7 @@
  */
 import React, {useMemo} from 'react'
 import PropTypes from 'prop-types'
-import {Img, Box, useTheme} from '@chakra-ui/react'
+import {Img, Box, useTheme} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {getResponsiveImageAttributes} from '@salesforce/retail-react-app/app/utils/responsive-image'
 
 /**

package/app/components/field/index.jsx

@@ -17,7 +17,7 @@ import {
     InputRightElement,
     Select,
     Checkbox
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {VisibilityIcon, VisibilityOffIcon} from '@salesforce/retail-react-app/app/components/icons'
 
 const Field = ({

package/app/components/footer/index.jsx

@@ -20,7 +20,7 @@ import {
     createStylesContext,
     Button,
     FormControl
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useIntl} from 'react-intl'
 
 import LinksList from '@salesforce/retail-react-app/app/components/links-list'
@@ -211,7 +211,7 @@ const Subscribe = ({...otherProps}) => {
 
             <Box>
                 <InputGroup>
-                    {/* Had to swap the following InputRightElement and Input 
+                    {/* Had to swap the following InputRightElement and Input
                         to avoid the hydration error due to mismatched html between server and client side.
                         This is a workaround for Lastpass plugin that automatically injects its icon for input fields.
                     */}

package/app/components/forms/address-fields.jsx

@@ -6,7 +6,12 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Grid, GridItem, SimpleGrid, Stack} from '@chakra-ui/react'
+import {
+    Grid,
+    GridItem,
+    SimpleGrid,
+    Stack
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useAddressFields from '@salesforce/retail-react-app/app/components/forms/useAddressFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'

package/app/components/forms/credit-card-fields.jsx

@@ -8,7 +8,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ccValidator from 'card-validator'
 import {useIntl} from 'react-intl'
-import {Box, Flex, FormLabel, InputRightElement, SimpleGrid, Stack, Tooltip} from '@chakra-ui/react'
+import {
+    Box,
+    Flex,
+    FormLabel,
+    InputRightElement,
+    SimpleGrid,
+    Stack,
+    Tooltip
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {
     formatCreditCardNumber,
     getCreditCardIcon

package/app/components/forms/form-action-buttons.jsx

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Button, Stack} from '@chakra-ui/react'
+import {Button, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {MESSAGE_PROPTYPE} from '@salesforce/retail-react-app/app/utils/locale.js'
 
 /**

package/app/components/forms/login-fields.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Stack} from '@chakra-ui/react'
+import {Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useLoginFields from '@salesforce/retail-react-app/app/components/forms/useLoginFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 

package/app/components/forms/password-requirements.jsx

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Flex, Text, Stack} from '@chakra-ui/react'
+import {Flex, Text, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {CheckCircleIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {validatePassword} from '@salesforce/retail-react-app/app/utils/password-utils'
 

package/app/components/forms/post-checkout-registration-fields.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Stack, Box} from '@chakra-ui/react'
+import {Stack, Box} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useRegistrationFields from '@salesforce/retail-react-app/app/components/forms/useRegistrationFields'
 import PasswordRequirements from '@salesforce/retail-react-app/app/components/forms/password-requirements'
 import Field from '@salesforce/retail-react-app/app/components/field'

package/app/components/forms/profile-fields.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {SimpleGrid, Stack} from '@chakra-ui/react'
+import {SimpleGrid, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useProfileFields from '@salesforce/retail-react-app/app/components/forms/useProfileFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 

package/app/components/forms/promo-code-fields.jsx

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Box, Button} from '@chakra-ui/react'
+import {Box, Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import usePromoCodeFields from '@salesforce/retail-react-app/app/components/forms/usePromoCodeFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 

package/app/components/forms/registration-fields.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Stack} from '@chakra-ui/react'
+import {Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useRegistrationFields from '@salesforce/retail-react-app/app/components/forms/useRegistrationFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 import PasswordRequirements from '@salesforce/retail-react-app/app/components/forms/password-requirements'

package/app/components/forms/reset-password-fields.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box} from '@chakra-ui/react'
+import {Box} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useResetPasswordFields from '@salesforce/retail-react-app/app/components/forms/useResetPasswordFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 

package/app/components/forms/update-password-fields.jsx

@@ -7,7 +7,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Box, Button, Stack, StackDivider} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Stack,
+    StackDivider
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useUpdatePasswordFields from '@salesforce/retail-react-app/app/components/forms/useUpdatePasswordFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 import PasswordRequirements from '@salesforce/retail-react-app/app/components/forms/password-requirements'

package/app/components/header/index.jsx

@@ -26,7 +26,7 @@ import {
     Divider,
     useDisclosure,
     useMediaQuery
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {AuthHelpers, useAuthHelper, useCustomerType} from '@salesforce/commerce-sdk-react'
 
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'

package/app/components/header/index.test.js

@@ -20,8 +20,10 @@ import {
     mockedRegisteredCustomer
 } from '@salesforce/retail-react-app/app/mocks/mock-data'
 
-jest.mock('@chakra-ui/react', () => {
-    const originalModule = jest.requireActual('@chakra-ui/react')
+jest.mock('@salesforce/retail-react-app/app/components/shared/ui', () => {
+    const originalModule = jest.requireActual(
+        '@salesforce/retail-react-app/app/components/shared/ui'
+    )
     return {
         ...originalModule,
         useMediaQuery: jest.fn().mockReturnValue([true])

package/app/components/hero/index.jsx

@@ -7,7 +7,13 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Flex, Heading, Stack, Image} from '@chakra-ui/react'
+import {
+    Box,
+    Flex,
+    Heading,
+    Stack,
+    Image
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 const Hero = ({title, img, actions, ...props}) => {
     const {src, alt} = img

package/app/components/icons/index.jsx

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React, {forwardRef} from 'react'
-import {Icon, useTheme} from '@chakra-ui/react'
+import {Icon, useTheme} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Our own SVG imports. These will be extracted to a single sprite sheet by the
 // svg-sprite-loader webpack plugin at build time and injected in the <body> tag

package/app/components/image-gallery/index.jsx

@@ -21,7 +21,7 @@ import {
     ListItem,
     List,
     useMultiStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {findImageGroupBy} from '@salesforce/retail-react-app/app/utils/image-groups-utils'
 import DynamicImage from '@salesforce/retail-react-app/app/components/dynamic-image'
 

package/app/components/item-variant/item-attributes.jsx

@@ -8,7 +8,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage, FormattedNumber} from 'react-intl'
-import {Flex, Stack, Text} from '@chakra-ui/react'
+import {Flex, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useItemVariant} from '@salesforce/retail-react-app/app/components/item-variant'
 import PromoPopover from '@salesforce/retail-react-app/app/components/promo-popover'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'

package/app/components/item-variant/item-image.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {AspectRatio, Box, Badge, Image} from '@chakra-ui/react'
+import {AspectRatio, Box, Badge, Image} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useItemVariant} from '.'
 import {FormattedMessage} from 'react-intl'
 import {findImageGroupBy} from '@salesforce/retail-react-app/app/utils/image-groups-utils'

package/app/components/item-variant/item-price.jsx

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
-import {Stack, Text} from '@chakra-ui/react'
+import {Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useItemVariant} from '.'
 import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'

package/app/components/link/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Link as ChakraLink} from '@chakra-ui/react'
+import {Link as ChakraLink} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Link as SPALink, NavLink as NavSPALink} from 'react-router-dom'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 

package/app/components/links-list/index.jsx

@@ -6,7 +6,14 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, List, ListItem, Heading, HStack, useMultiStyleConfig} from '@chakra-ui/react'
+import {
+    Box,
+    List,
+    ListItem,
+    Heading,
+    HStack,
+    useMultiStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Link from '@salesforce/retail-react-app/app/components/link'
 
 const LinksList = ({

package/app/components/links-list/index.test.js

@@ -6,7 +6,10 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {StylesProvider, useMultiStyleConfig} from '@chakra-ui/react'
+import {
+    StylesProvider,
+    useMultiStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {screen} from '@testing-library/react'
 
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'

package/app/components/list-menu/index.jsx

@@ -31,7 +31,7 @@ import {
     // Hooks
     useTheme,
     useDisclosure
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Link from '@salesforce/retail-react-app/app/components/link'
 // Others
 import {categoryUrlBuilder} from '@salesforce/retail-react-app/app/utils/url'

package/app/components/loading-spinner/index.jsx

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
-import {Box, Spinner} from '@chakra-ui/react'
+import {Box, Spinner} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 
 const LoadingSpinner = ({wrapperStyles = {}, spinnerStyles = {}}) => {

package/app/components/locale-selector/index.jsx

@@ -19,7 +19,7 @@ import {
 
     // Hooks
     useStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Icons
 import {

package/app/components/login/index.jsx

@@ -8,7 +8,13 @@
 import React, {Fragment} from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Alert, Box, Button, Stack, Text} from '@chakra-ui/react'
+import {
+    Alert,
+    Box,
+    Button,
+    Stack,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {AlertIcon, BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
 import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
 import {noop} from '@salesforce/retail-react-app/app/utils/utils'

package/app/components/nested-accordion/index.jsx

@@ -18,7 +18,7 @@ import {
 
     // Hooks
     useStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Link from '@salesforce/retail-react-app/app/components/link'
 // Icons
 import {ChevronDownIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'

package/app/components/offline-banner/index.jsx

@@ -15,7 +15,7 @@ import {
 
     // Hooks
     useStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Icons
 import {AlertIcon} from '@salesforce/retail-react-app/app/components/icons'

package/app/components/offline-boundary/index.jsx

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {withRouter} from 'react-router-dom'
-import {Button} from '@chakra-ui/react'
+import {Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {AlertIcon} from '@salesforce/retail-react-app/app/components/icons'
 
 // import Button from '@salesforce/pwa-kit-react-sdk/components/button'

package/app/components/order-summary/index.jsx

@@ -7,7 +7,15 @@
 import React, {useState} from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage, FormattedNumber} from 'react-intl'
-import {Box, Flex, Button, Stack, Text, Heading, Divider} from '@chakra-ui/react'
+import {
+    Box,
+    Flex,
+    Button,
+    Stack,
+    Text,
+    Heading,
+    Divider
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {
     BasketIcon,
     ChevronDownIcon,

package/app/components/page-action-placeholder/index.jsx

@@ -7,7 +7,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Button, Stack, Text} from '@chakra-ui/react'
+import {Box, Button, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {PlusIcon} from '@salesforce/retail-react-app/app/components/icons'
 
 const PageActionPlaceHolder = ({heading, text, icon, buttonText, buttonProps, onButtonClick}) => {

package/app/components/pagination/index.jsx

@@ -19,7 +19,7 @@ import {
 
     // Hooks
     useStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Icons
 import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'

package/app/components/product-item/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
 
 // Chakra Components
-import {Box, Fade, Flex, Stack, Text} from '@chakra-ui/react'
+import {Box, Fade, Flex, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Project Components
 import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'

package/app/components/product-scroller/index.jsx

@@ -6,7 +6,14 @@
  */
 import React, {forwardRef, useRef} from 'react'
 import PropTypes from 'prop-types'
-import {AspectRatio, Box, Heading, IconButton, Skeleton, Stack} from '@chakra-ui/react'
+import {
+    AspectRatio,
+    Box,
+    Heading,
+    IconButton,
+    Skeleton,
+    Stack
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import ProductTile from '@salesforce/retail-react-app/app/components/product-tile'
 import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
 

package/app/components/product-tile/index.jsx

@@ -18,7 +18,7 @@ import {
     Stack,
     useMultiStyleConfig,
     IconButton
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import DynamicImage from '@salesforce/retail-react-app/app/components/dynamic-image'
 
 // Hooks