ordering-ui-external 2.6.7 → 2.7.0

package/src/themes/five/src/components/BusinessBasicInformation/BusinessInfoComponent.js

@@ -0,0 +1,230 @@
+import React from 'react'
+import { BusinessDetail, BusinessInfo, BusinessInfoContainer, BusinessInfoContent, BusinessInfoItem, IconWrapper, RibbonBox, SocialList, TitleWrapper } from './styles'
+import Skeleton from 'react-loading-skeleton'
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../../../../utils'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { useTheme } from 'styled-components'
+import { SocialNetWork } from './SocialNetWork'
+import { StarFill, Facebook, Tiktok, Pinterest, Whatsapp, Instagram, Snapchat } from 'react-bootstrap-icons'
+import { useConfig, useLanguage, useOrder, useUtils } from 'ordering-components-external'
+import { SearchComponent } from './SearchComponent'
+
+export const BusinessInfoComponent = (props) => {
+  const {
+    isChew,
+    loading,
+    business,
+    isInfoShrunken,
+    isCustomerMode,
+    setIsPreOrder,
+    setIsBusinessReviews,
+    categoryState,
+    searchValue,
+    errorQuantityProducts,
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions,
+    isCustomLayout
+  } = props
+  const theme = useTheme()
+  const [orderState] = useOrder()
+  const [{ parsePrice, parseDistance }] = useUtils()
+  const [{ configs }] = useConfig()
+  const [, t] = useLanguage()
+  const windowSize = useWindowSize()
+  const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+  const hideTime = theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+  const hideReviews = theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+  const hideReviewsPopup = theme?.business_view?.components?.header?.components?.reviews?.hidden
+  const hideDistance = theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+  const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
+  const layoutsWithOldSearch = ['starbucks', 'old', 'floating']
+  const hideSearch = layoutsWithOldSearch.includes(theme?.business_view?.components?.product_search?.components?.layout?.type)
+  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
+
+  const searchComponentProps = {
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions
+  }
+
+  return (
+    <BusinessInfoContainer isChew={isChew} isFlexEnd={windowSize.width >= 768}>
+      <BusinessInfoContent>
+        <BusinessInfo className='info'>
+          <BusinessInfoItem isInfoShrunken={isInfoShrunken}>
+            {!loading ? (
+              <TitleWrapper isCustomLayout={isCustomLayout}>
+                <h2 className='bold' id='business_name'>{business?.name}</h2>
+                {business?.ribbon?.enabled && (
+                  <RibbonBox
+                    bgColor={business?.ribbon?.color}
+                    colorText={lightenDarkenColor(business?.ribbon?.color)}
+                    borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
+                    isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+                    isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+                  >
+                    {business?.ribbon?.text}
+                  </RibbonBox>
+                )}
+              </TitleWrapper>
+            ) : (
+              <Skeleton width={isCustomerMode ? 100 : 150} height={isCustomerMode ? 35 : 'auto'} />
+            )}
+            {typeof hideCity !== 'undefined' && !hideCity && business?.city?.name && (
+              <>
+                {!loading ? (
+                  <p className='type'>{business?.city?.name}</p>
+                ) : (
+                  <Skeleton width={isCustomerMode ? 100 : 150} />
+                )}
+              </>
+            )}
+            {!loading ? (
+              <SocialList>
+                {business?.facebook_profile && (
+                  <SocialNetWork
+                    url={business?.facebook_profile}
+                    icon={<Facebook />}
+                  />
+                )}
+                {business?.instagram_profile && (
+                  <SocialNetWork
+                    url={business?.instagram_profile}
+                    icon={<Instagram />}
+                  />
+                )}
+                {business?.tiktok_profile && (
+                  <SocialNetWork
+                    url={business?.tiktok_profile}
+                    icon={<Tiktok />}
+                  />
+                )}
+                {business?.pinterest_profile && (
+                  <SocialNetWork
+                    url={business?.pinterest_profile}
+                    icon={<Pinterest />}
+                  />
+                )}
+                {business?.whatsapp_number && (
+                  <SocialNetWork
+                    url={business?.whatsapp_number}
+                    icon={<Whatsapp />}
+                  />
+                )}
+                {business?.snapchat_profile && (
+                  <SocialNetWork
+                    url={business?.snapchat_profile}
+                    icon={<Snapchat />}
+                  />
+                )}
+              </SocialList>
+            ) : (
+              <SocialList>
+                {[...Array(5).keys()].map(i => (
+                  <IconWrapper isSkeleton key={i}>
+                    <Skeleton width={27} height={27} />
+                  </IconWrapper>
+                ))}
+              </SocialList>
+            )}
+            <BusinessDetail isSkeleton={loading}>
+              {orderState?.options.type === 1 && !hideDeliveryFee && (
+                <>
+                  {!loading ? (
+                    <>
+                      <h5>
+                        <span>{t('DELIVERY_FEE', 'Delivery fee')}</span>
+                        {business && parsePrice(business?.delivery_price || 0)}
+                      </h5>
+                      <span className='dot'>•</span>
+                    </>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 70 : 50} />
+                  )}
+                </>
+              )}
+              {!hideTime && (
+                <>
+                  {!loading ? (
+                    <>
+                      {orderState?.options?.type === 1 ? (
+                        <>
+                          <h5>
+                            {convertHoursToMinutes(business?.delivery_time)}
+                          </h5>
+                          <span className='dot'>•</span>
+                        </>
+                      ) : (
+                        <>
+                          <h5>
+                            {convertHoursToMinutes(business?.pickup_time)}
+                          </h5>
+                          <span className='dot'>•</span>
+                        </>
+                      )}
+                    </>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 70 : 50} />
+                  )}
+                </>
+              )}
+              {!hideDistance && (
+                <>
+                  {!loading ? (
+                    <>
+                      <h5>
+                        {parseDistance(business?.distance || 0)}
+                      </h5>
+                      <span className='dot'>•</span>
+                    </>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 70 : 50} />
+                  )}
+                </>
+              )}
+              {!hideReviews && (
+                <>
+                  {!loading ? (
+                    <div className='review'>
+                      <StarFill className='start' />
+                      <p>{business?.reviews?.total}</p>
+                    </div>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 100 : 50} />
+                  )}
+                </>
+              )}
+            </BusinessDetail>
+            {
+              !loading ? (
+                <div className='preorder-Reviews'>
+                  {isPreOrderSetting && (
+                    <>
+                      <span onClick={() => setIsPreOrder(true)}>{t('PREORDER', 'Preorder')}</span>
+                      <span className='dot'>•</span>
+                    </>
+                  )}
+                  {business.reviews?.reviews && !hideReviewsPopup && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
+                </div>
+              ) : (
+                <Skeleton width={isCustomerMode ? 100 : 150} />
+              )
+            }
+          </BusinessInfoItem>
+        </BusinessInfo>
+      </BusinessInfoContent>
+      {!hideSearch &&
+        (categoryState?.products?.length !== 0 || searchValue) &&
+        !errorQuantityProducts &&
+        !isInfoShrunken &&
+        !business?.professionals?.length &&
+        // (categoryClicked || windowSize.width >= 993) &&
+        (
+          <SearchComponent {...searchComponentProps} />
+        )}
+    </BusinessInfoContainer>
+  )
+}

package/src/themes/five/src/components/BusinessBasicInformation/SearchComponent.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { SearchIconWrapper, SearchWrapper, WrapperSearch } from './styles'
+import { Select } from '../../styles/Select'
+import { useTheme } from 'styled-components'
+import CgSearch from '@meronex/icons/cg/CgSearch'
+
+export const SearchComponent = (props) => {
+  const {
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions,
+    isResponsive
+  } = props
+
+  const theme = useTheme()
+
+  const hideSort = theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
+
+  return (
+    <WrapperSearch id='search-component' isResponsive={isResponsive}>
+      <SearchWrapper>
+        <SearchIconWrapper
+          onClick={() => setOpenSearchProducts(true)}
+        >
+          <CgSearch />
+        </SearchIconWrapper>
+        {!hideSort && (
+          <Select
+            notAsync
+            notReload
+            options={sortByOptions}
+            defaultValue={sortByValue}
+            onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+          />
+        )}
+      </SearchWrapper>
+    </WrapperSearch>
+  )
+}

package/src/themes/five/src/components/BusinessBasicInformation/SocialNetWork.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { IconWrapper } from './styles'
+
+export const SocialNetWork = ({ url, icon }) => {
+  return (
+    <IconWrapper href={url} target='_blank' rel='noopener noreferrer'>
+      {icon}
+    </IconWrapper>
+  )
+}

package/src/themes/five/src/components/BusinessBasicInformation/index.js

@@ -1,6 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import Skeleton from 'react-loading-skeleton'
-import { StarFill, Facebook, Tiktok, Pinterest, Whatsapp, Instagram, Snapchat } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 
 import { Modal } from '../Modal'
@@ -8,12 +6,9 @@ import { BusinessInformation } from '../BusinessInformation'
 import { BusinessReviews } from '../BusinessReviews'
 import BsInfoCircle from '@meronex/icons/bs/BsInfoCircle'
 
-import { useUtils, useOrder, useLanguage, useConfig } from 'ordering-components-external'
+import { useUtils, useLanguage } from 'ordering-components-external'
 
-import { convertHoursToMinutes, shape, lightenDarkenColor } from '../../../../../utils'
-import { Select } from '../../styles/Select'
 import { MomentContent } from '../MomentContent'
-import CgSearch from '@meronex/icons/cg/CgSearch'
 import { SearchProducts } from '../SearchProducts'
 import { SearchProducts as SearchProductsStarbucks } from '../../../../six/src/components/BusinessProductsListing/SearchProducts'
 import {
@@ -21,22 +16,10 @@ import {
   BusinessContent,
   WrapperBusinessLogo,
   BusinessLogo,
-  BusinessInfo,
-  BusinessInfoItem,
-  BusinessInfoContainer,
-  BusinessInfoContent,
-  WrapperSearch,
-  BusinessDetail,
   BusinessMoreDetail,
-  TitleWrapper,
-  RibbonBox,
-  SearchIconWrapper,
   SearchComponentContainer,
-  SocialList,
-  IconWrapper,
   BusinessInfoWrapper,
-  WrapperFloatingSearch,
-  SearchWrapper
+  WrapperFloatingSearch
 } from './styles'
 import { BusinessPreorder } from '../BusinessPreorder'
 
@@ -44,6 +27,8 @@ import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import isBetween from 'dayjs/plugin/isBetween'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { BusinessInfoComponent } from './BusinessInfoComponent'
+import { SearchComponent } from './SearchComponent'
 
 dayjs.extend(timezone)
 dayjs.extend(isBetween)
@@ -63,36 +48,44 @@ export const BusinessBasicInformation = (props) => {
     handleChangeSortBy,
     categoryState,
     errorQuantityProducts,
-    isCustomerMode
+    isCustomerMode,
+    isCustomLayout
   } = props
   const { business, loading } = businessState
 
   const theme = useTheme()
-  const [orderState] = useOrder()
   const [, t] = useLanguage()
-  const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
+  const [{ optimizeImage }] = useUtils()
   const windowSize = useWindowSize()
   const [isBusinessReviews, setIsBusinessReviews] = useState(false)
   const [isPreOrder, setIsPreOrder] = useState(false)
   const [openSearchProducts, setOpenSearchProducts] = useState(false)
-  const [{ configs }] = useConfig()
-  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 
   const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-  const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
-  const hideTime = theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
-  const hideReviews = theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
-  const hideReviewsPopup = theme?.business_view?.components?.header?.components?.reviews?.hidden
-  const hideDistance = theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
-  const hideSort = theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
   const hideInfoIcon = theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
 
   const isInfoShrunken = theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
   const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
-  const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
   const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const layoutsWithOldSearch = ['starbucks', 'old', 'floating']
-  const hideSearch = layoutsWithOldSearch.includes(theme?.business_view?.components?.product_search?.components?.layout?.type)
+
+  const businessInfoComponentProps = {
+    isChew,
+    loading,
+    business,
+    isInfoShrunken,
+    isCustomerMode,
+    setIsPreOrder,
+    setIsBusinessReviews,
+    categoryState,
+    searchValue,
+    errorQuantityProducts,
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions,
+    isCustomLayout
+  }
+
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
     const _types = []
@@ -166,217 +159,6 @@ export const BusinessBasicInformation = (props) => {
     })
   }, [sortByValue])
 
-  const SearchComponent = () => {
-    return (
-      <WrapperSearch id='search-component'>
-        <SearchWrapper>
-          <SearchIconWrapper
-            onClick={() => setOpenSearchProducts(true)}
-          >
-            <CgSearch />
-          </SearchIconWrapper>
-          {!hideSort && (
-            <Select
-              notAsync
-              notReload
-              options={sortByOptions}
-              defaultValue={sortByValue}
-              onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
-            />
-          )}
-        </SearchWrapper>
-      </WrapperSearch>
-    )
-  }
-
-  const SocialNetWork = ({ url, icon }) => {
-    return (
-      <IconWrapper href={url} target='_blank' rel='noopener noreferrer'>
-        {icon}
-      </IconWrapper>
-    )
-  }
-
-  const BusinessInfoComponent = () => {
-    return (
-      <BusinessInfoContainer isChew={isChew} isFlexEnd={windowSize.width >= 768}>
-        <BusinessInfoContent>
-          <BusinessInfo className='info'>
-            <BusinessInfoItem isInfoShrunken={isInfoShrunken}>
-              {!loading ? (
-                <TitleWrapper>
-                  <h2 className='bold' id='business_name'>{business?.name}</h2>
-                  {business?.ribbon?.enabled && (
-                    <RibbonBox
-                      bgColor={business?.ribbon?.color}
-                      colorText={lightenDarkenColor(business?.ribbon?.color)}
-                      borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
-                      isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
-                      isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
-                    >
-                      {business?.ribbon?.text}
-                    </RibbonBox>
-                  )}
-                </TitleWrapper>
-              ) : (
-                <Skeleton width={isCustomerMode ? 100 : 150} height={isCustomerMode ? 35 : 'auto'} />
-              )}
-              {typeof hideCity !== 'undefined' && !hideCity && business?.city?.name && (
-                <>
-                  {!loading ? (
-                    <p className='type'>{business?.city?.name}</p>
-                  ) : (
-                    <Skeleton width={isCustomerMode ? 100 : 150} />
-                  )}
-                </>
-              )}
-              {!loading ? (
-                <SocialList>
-                  {business?.facebook_profile && (
-                    <SocialNetWork
-                      url={business?.facebook_profile}
-                      icon={<Facebook />}
-                    />
-                  )}
-                  {business?.instagram_profile && (
-                    <SocialNetWork
-                      url={business?.instagram_profile}
-                      icon={<Instagram />}
-                    />
-                  )}
-                  {business?.tiktok_profile && (
-                    <SocialNetWork
-                      url={business?.tiktok_profile}
-                      icon={<Tiktok />}
-                    />
-                  )}
-                  {business?.pinterest_profile && (
-                    <SocialNetWork
-                      url={business?.pinterest_profile}
-                      icon={<Pinterest />}
-                    />
-                  )}
-                  {business?.whatsapp_number && (
-                    <SocialNetWork
-                      url={business?.whatsapp_number}
-                      icon={<Whatsapp />}
-                    />
-                  )}
-                  {business?.snapchat_profile && (
-                    <SocialNetWork
-                      url={business?.snapchat_profile}
-                      icon={<Snapchat />}
-                    />
-                  )}
-                </SocialList>
-              ) : (
-                <SocialList>
-                  {[...Array(5).keys()].map(i => (
-                    <IconWrapper isSkeleton key={i}>
-                      <Skeleton width={27} height={27} />
-                    </IconWrapper>
-                  ))}
-                </SocialList>
-              )}
-              <BusinessDetail isSkeleton={loading}>
-                {orderState?.options.type === 1 && !hideDeliveryFee && (
-                  <>
-                    {!loading ? (
-                      <>
-                        <h5>
-                          <span>{t('DELIVERY_FEE', 'Delivery fee')}</span>
-                          {business && parsePrice(business?.delivery_price || 0)}
-                        </h5>
-                        <span className='dot'>•</span>
-                      </>
-                    ) : (
-                      <Skeleton width={isCustomerMode ? 70 : 50} />
-                    )}
-                  </>
-                )}
-                {!hideTime && (
-                  <>
-                    {!loading ? (
-                      <>
-                        {orderState?.options?.type === 1 ? (
-                          <>
-                            <h5>
-                              {convertHoursToMinutes(business?.delivery_time)}
-                            </h5>
-                            <span className='dot'>•</span>
-                          </>
-                        ) : (
-                          <>
-                            <h5>
-                              {convertHoursToMinutes(business?.pickup_time)}
-                            </h5>
-                            <span className='dot'>•</span>
-                          </>
-                        )}
-                      </>
-                    ) : (
-                      <Skeleton width={isCustomerMode ? 70 : 50} />
-                    )}
-                  </>
-                )}
-                {!hideDistance && (
-                  <>
-                    {!loading ? (
-                      <>
-                        <h5>
-                          {parseDistance(business?.distance || 0)}
-                        </h5>
-                        <span className='dot'>•</span>
-                      </>
-                    ) : (
-                      <Skeleton width={isCustomerMode ? 70 : 50} />
-                    )}
-                  </>
-                )}
-                {!hideReviews && (
-                  <>
-                    {!loading ? (
-                      <div className='review'>
-                        <StarFill className='start' />
-                        <p>{business?.reviews?.total}</p>
-                      </div>
-                    ) : (
-                      <Skeleton width={isCustomerMode ? 100 : 50} />
-                    )}
-                  </>
-                )}
-              </BusinessDetail>
-              {
-                !loading ? (
-                  <div className='preorder-Reviews'>
-                    {isPreOrderSetting && (
-                      <>
-                        <span onClick={() => setIsPreOrder(true)}>{t('PREORDER', 'Preorder')}</span>
-                        <span className='dot'>•</span>
-                      </>
-                    )}
-                    {business.reviews?.reviews && !hideReviewsPopup && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
-                  </div>
-                ) : (
-                  <Skeleton width={isCustomerMode ? 100 : 150} />
-                )
-              }
-            </BusinessInfoItem>
-          </BusinessInfo>
-        </BusinessInfoContent>
-        {!hideSearch &&
-          (categoryState?.products?.length !== 0 || searchValue) &&
-          !errorQuantityProducts &&
-          !isInfoShrunken &&
-          !business?.professionals?.length &&
-          // (categoryClicked || windowSize.width >= 993) &&
-          (
-            <SearchComponent />
-          )}
-      </BusinessInfoContainer>
-    )
-  }
-
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -401,7 +183,10 @@ export const BusinessBasicInformation = (props) => {
       )}
       <BusinessInfoWrapper>
         {(!isInfoShrunken && !isChew) && (
-          <BusinessInfoComponent />
+          <BusinessInfoComponent
+            {...businessInfoComponentProps}
+
+          />
         )}
         {(business?.header || business?.logo || loading || isInfoShrunken) && (
           <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open} isChew={isChew}>
@@ -416,13 +201,20 @@ export const BusinessBasicInformation = (props) => {
               </BusinessContent>
             )}
             {(isInfoShrunken || isChew) && (
-              <BusinessInfoComponent />
+              <BusinessInfoComponent
+                {...businessInfoComponentProps}
+              />
             )}
             {!loading && (
               <>
                 {isInfoShrunken && (
                   <SearchComponentContainer>
-                    <SearchComponent />
+                    <SearchComponent
+                      setOpenSearchProducts={setOpenSearchProducts}
+                      handleChangeSortBy={handleChangeSortBy}
+                      sortByValue={sortByValue}
+                      sortByOptions={sortByOptions}
+                    />
                   </SearchComponentContainer>
                 )}
                 {searchLayout === 'floating' && (

package/src/themes/five/src/components/BusinessBasicInformation/styles.js

@@ -249,7 +249,7 @@ export const WrapperSearch = styled.div`
     position: fixed;
     top: 0;
     right: 0;
-    z-index: 1002;
+    z-index: 10001;
     width: fit-content;
     margin-top: 0px;
     background-color: ${props => props.theme.colors.backgroundPage};
@@ -260,6 +260,7 @@ export const WrapperSearch = styled.div`
     &.fixed-search {
       left: 0;
       width: 100vw;
+      z-index: 1002;
     }
   }
 `
@@ -370,17 +371,26 @@ export const TitleWrapper = styled.div`
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    background: ${({ theme }) => theme?.colors?.white};
     &.fixed-name {
       z-index: 1002;
       position: fixed;
       top: 0;
-      width: calc(100vw - 190px);
       padding: 10px 0;
       font-size: 18px;
-      ${props => props.theme?.rtl ? css`
+      ${({ isCustomLayout }) => !isCustomLayout ? css`
+        width: calc(100vw - 190px);
+        ${props => props.theme?.rtl ? css`
         right: 50px;
-      ` : css`
+        ` : css`
         left: 50px;
+        `}
+      ` : css`
+      ${props => props.theme?.rtl ? css`
+          right: 10px;
+          ` : css`
+          left: 10px;
+        `}
       `}
     }
     @media (min-width: 768px) {