sanity-plugin-media 2.2.1 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -24,18 +24,22 @@
   "author": "Sanity.io <hello@sanity.io>",
   "exports": {
     ".": {
-      "types": "./lib/src/index.d.ts",
+      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.js",
-      "require": "./lib/index.js",
-      "default": "./lib/index.esm.js"
+      "require": "./dist/index.js",
+      "node": {
+        "module": "./dist/index.esm.js",
+        "import": "./dist/index.cjs.mjs"
+      },
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./lib/index.js",
-  "module": "./lib/index.esm.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
   "source": "./src/index.ts",
-  "types": "./lib/src/index.d.ts",
+  "types": "./dist/index.d.ts",
   "files": [
     "src",
     "lib",
@@ -43,15 +47,15 @@
     "sanity.json"
   ],
   "scripts": {
-    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
-    "build": "pkg-utils build",
-    "clean": "rimraf lib",
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "clean": "rimraf dist",
     "dev": "npm run watch",
+    "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
     "prepare": "husky install",
-    "prepublishOnly": "npm run build",
-    "watch": "pkg-utils watch"
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.1.1",
@@ -66,6 +70,7 @@
     "groq": "^3.0.0",
     "is-hotkey": "^0.2.0",
     "nanoid": "^3.3.3",
+    "npm-run-all": "^4.1.5",
     "pluralize": "^8.0.0",
     "react-dropzone": "^11.3.1",
     "react-file-icon": "^1.1.0",
@@ -81,11 +86,11 @@
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/client": "^4.0.1",
+    "@sanity/client": "^6.7.0",
     "@sanity/color": "^2.1.20",
     "@sanity/icons": "^2.0.0",
-    "@sanity/pkg-utils": "^2.0.0",
-    "@sanity/plugin-kit": "^2.1.16",
+    "@sanity/pkg-utils": "^2.4.8",
+    "@sanity/plugin-kit": "^3.1.10",
     "@sanity/semantic-release-preset": "^2.0.2",
     "@types/is-hotkey": "^0.1.7",
     "@types/pluralize": "^0.0.29",

package/src/components/AssetMetadata/index.tsx

@@ -63,32 +63,40 @@ const AssetMetadata = (props: Props) => {
         </Stack>
       </Box>
       {/* EXIF */}
-      {exif && (
-        <>
-          {/* Divider */}
-          <Box
-            marginY={4}
-            style={{
-              background: '#222',
-              height: '1px',
-              width: '100%'
-            }}
-          />
-          <Box>
-            <Stack space={3}>
-              {exif.ISO && <Row label="ISO" value={exif.ISO} />}
-              {exif.FNumber && <Row label="Aperture" value={`ƒ/${exif.FNumber}`} />}
-              {exif.FocalLength && <Row label="Focal length" value={`${exif.FocalLength}mm`} />}
-              {exif.ExposureTime && (
-                <Row label="Exposure time" value={`1/${1 / exif.ExposureTime}`} />
-              )}
-              {exif.DateTimeOriginal && (
-                <Row label="Original date" value={format(new Date(exif.DateTimeOriginal), 'PPp')} />
-              )}
-            </Stack>
-          </Box>
-        </>
-      )}
+      {exif &&
+        (exif.DateTimeOriginal ||
+          exif.FNumber ||
+          exif.FocalLength ||
+          exif.ExposureTime ||
+          exif.ISO) && (
+          <>
+            {/* Divider */}
+            <Box
+              marginY={4}
+              style={{
+                background: 'var(--card-border-color)',
+                height: '1px',
+                width: '100%'
+              }}
+            />
+            <Box>
+              <Stack space={3}>
+                {exif.ISO && <Row label="ISO" value={exif.ISO} />}
+                {exif.FNumber && <Row label="Aperture" value={`ƒ/${exif.FNumber}`} />}
+                {exif.FocalLength && <Row label="Focal length" value={`${exif.FocalLength}mm`} />}
+                {exif.ExposureTime && (
+                  <Row label="Exposure time" value={`1/${1 / exif.ExposureTime}`} />
+                )}
+                {exif.DateTimeOriginal && (
+                  <Row
+                    label="Original date"
+                    value={format(new Date(exif.DateTimeOriginal), 'PPp')}
+                  />
+                )}
+              </Stack>
+            </Box>
+          </>
+        )}
 
       {/* Asset actions */}
       <Box marginTop={5}>

package/src/components/Browser/index.tsx

@@ -4,7 +4,7 @@ import {Asset, Tag} from '@types'
 import groq from 'groq'
 import React, {useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
-import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
+import {useColorScheme, type AssetSourceComponentProps, type SanityDocument} from 'sanity'
 import {TAG_DOCUMENT_NAME} from '../../constants'
 import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -132,6 +132,7 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
 
 const Browser = (props: Props) => {
   const client = useVersionedClient()
+  const {scheme} = useColorScheme()
 
   return (
     <ReduxProvider
@@ -140,7 +141,7 @@ const Browser = (props: Props) => {
       document={props?.document}
       selectedAssets={props?.selectedAssets}
     >
-      <ThemeProvider scheme="dark" theme={studioTheme}>
+      <ThemeProvider scheme={scheme} theme={studioTheme}>
         <ToastProvider>
           <AssetBrowserDispatchProvider onSelect={props?.onSelect}>
             <GlobalStyle />

package/src/components/CardAsset/index.tsx

@@ -1,8 +1,18 @@
-import {hues} from '@sanity/color'
 import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons'
-import {Box, Checkbox, Container, Flex, Spinner, Text, Tooltip} from '@sanity/ui'
+import {
+  Box,
+  Checkbox,
+  Container,
+  Flex,
+  Spinner,
+  Text,
+  Theme,
+  ThemeColorSchemeKey,
+  Tooltip
+} from '@sanity/ui'
 import React, {memo, MouseEvent, RefObject} from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorScheme} from 'sanity'
 import styled, {css} from 'styled-components'
 import {PANEL_HEIGHT} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
@@ -14,6 +24,7 @@ import imageDprUrl from '../../utils/imageDprUrl'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   id: string
@@ -24,47 +35,49 @@ const CardWrapper = styled(Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
-  padding: 2px;
   position: relative;
   width: 100%;
 `
 
-const CardContainer = styled(Flex)<{picked?: boolean; updating?: boolean}>`
-  border: 1px solid transparent;
-  height: 100%;
-  pointer-events: ${props => (props.updating ? 'none' : 'auto')};
-  position: relative;
-  transition: all 300ms;
-  user-select: none;
-  width: 100%;
+const CardContainer = styled(Flex)<{picked?: boolean; theme: Theme; updating?: boolean}>(
+  ({picked, theme, updating}) => {
+    return css`
+      border: 1px solid transparent;
+      height: 100%;
+      pointer-events: ${updating ? 'none' : 'auto'};
+      position: relative;
+      transition: all 300ms;
+      user-select: none;
+      width: 100%;
 
-  border: ${props =>
-    props.picked
-      ? `1px solid ${props.theme.sanity.color.spot.orange} !important`
-      : '1px solid inherit'};
+      border: ${picked
+        ? `1px solid ${theme.sanity.color.spot.orange} !important`
+        : '1px solid inherit'};
 
-  ${props =>
-    !props.updating &&
-    css`
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          border: 1px solid ${hues.gray[500].hex};
+      ${!updating &&
+      css`
+        @media (hover: hover) and (pointer: fine) {
+          &:hover {
+            border: 1px solid var(--card-border-color);
+          }
         }
-      }
-    `}
-`
-
-const ContextActionContainer = styled(Flex)`
-  cursor: ${props => (props.selected ? 'default' : 'pointer')};
-  height: ${PANEL_HEIGHT}px;
-  transition: all 300ms;
+      `}
+    `
+  }
+)
 
-  @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background: ${hues.gray[950].hex};
+const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorSchemeKey}) => {
+  return css`
+    cursor: pointer;
+    height: ${PANEL_HEIGHT}px;
+    transition: all 300ms;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor(scheme, 'bg')};
+      }
     }
-  }
-`
+  `
+})
 
 const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
   return {
@@ -75,6 +88,8 @@ const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
 const CardAsset = (props: Props) => {
   const {id, selected} = props
 
+  const {scheme} = useColorScheme()
+
   // Refs
   const shiftPressed: RefObject<boolean> = useKeyPress('shift')
 
@@ -134,7 +149,7 @@ const CardAsset = (props: Props) => {
   const opacityPreview = selected || updating ? 0.25 : 1
 
   return (
-    <CardWrapper>
+    <CardWrapper padding={1}>
       <CardContainer direction="column" picked={picked} updating={item.updating}>
         {/* Image */}
         <Box
@@ -152,6 +167,7 @@ const CardAsset = (props: Props) => {
             {isImageAsset(asset) && (
               <Image
                 draggable={false}
+                scheme={scheme}
                 showCheckerboard={!isOpaque}
                 src={imageDprUrl(asset, {height: 250, width: 250})}
                 style={{
@@ -205,6 +221,7 @@ const CardAsset = (props: Props) => {
           align="center"
           onClick={handleContextActionClick}
           paddingX={1}
+          scheme={scheme}
           style={{opacity: opacityContainer}}
         >
           {onSelect ? (

package/src/components/CardUpload/index.tsx

@@ -1,15 +1,16 @@
-import {hues} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
 import {Box, Button, Flex, Text} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorScheme} from 'sanity'
 import styled from 'styled-components'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectUploadById, uploadsActions} from '../../modules/uploads'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   id: string
@@ -19,7 +20,6 @@ const CardWrapper = styled(Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
-  padding: 2px;
   position: relative;
   width: 100%;
 `
@@ -27,6 +27,8 @@ const CardWrapper = styled(Flex)`
 const CardUpload = (props: Props) => {
   const {id} = props
 
+  const {scheme} = useColorScheme()
+
   // Redux
   const dispatch = useDispatch()
   const item = useTypedSelector(state => selectUploadById(state, id))
@@ -59,12 +61,12 @@ const CardUpload = (props: Props) => {
   }
 
   return (
-    <CardWrapper>
+    <CardWrapper padding={1}>
       <Flex
         direction="column"
         flex={1}
         style={{
-          background: hues.gray[950].hex,
+          background: getSchemeColor(scheme, 'bg'),
           border: '1px solid transparent',
           height: '100%',
           position: 'relative'
@@ -73,7 +75,7 @@ const CardUpload = (props: Props) => {
         {/* Progress bar */}
         <div
           style={{
-            background: hues.gray[600].hex,
+            background: 'var(--card-fg-color)',
             bottom: 0,
             height: '1px',
             left: 0,
@@ -89,6 +91,7 @@ const CardUpload = (props: Props) => {
           {item.assetType === 'image' && item?.objectUrl && (
             <Image
               draggable={false}
+              scheme={scheme}
               src={item.objectUrl}
               style={{
                 opacity: 0.4

package/src/components/Controls/index.tsx

@@ -1,4 +1,3 @@
-import {hues} from '@sanity/color'
 import {Box, Button, Flex, Inline, useMediaIndex} from '@sanity/ui'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -40,7 +39,7 @@ const Controls = () => {
     <Box
       paddingY={2}
       style={{
-        borderBottom: `1px solid ${hues.gray?.[900].hex}`,
+        borderBottom: '1px solid var(--card-border-color)',
         zIndex: 2
       }}
     >

package/src/components/DialogAssetEdit/index.tsx

@@ -6,7 +6,7 @@ import groq from 'groq'
 import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
-import {WithReferringDocuments, useDocumentStore} from 'sanity'
+import {WithReferringDocuments, useColorScheme, useDocumentStore} from 'sanity'
 import {assetFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -40,6 +40,7 @@ const DialogAssetEdit = (props: Props) => {
   } = props
 
   const client = useVersionedClient()
+  const {scheme} = useColorScheme()
 
   const documentStore = useDocumentStore()
 
@@ -47,7 +48,7 @@ const DialogAssetEdit = (props: Props) => {
   const assetItem = useTypedSelector(state => selectAssetById(state, String(assetId))) // TODO: check casting
   const tags = useTypedSelector(selectTags)
 
-  const assetUpdatedPrev = useRef<string | null>(null)
+  const assetUpdatedPrev = useRef<string | undefined>(undefined)
 
   // Generate a snapshot of the current asset
   const [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset)
@@ -222,7 +223,7 @@ const DialogAssetEdit = (props: Props) => {
         <FormSubmitButton
           disabled={formUpdating || !isDirty || !isValid}
           isValid={isValid}
-          lastUpdated={currentAsset._updatedAt}
+          lastUpdated={currentAsset?._updatedAt}
           onClick={handleSubmit(onSubmit)}
         />
       </Flex>
@@ -242,7 +243,7 @@ const DialogAssetEdit = (props: Props) => {
       */}
       <Flex direction={['column-reverse', 'column-reverse', 'row-reverse']}>
         <Box flex={1} marginTop={[5, 5, 0]} padding={4}>
-          <WithReferringDocuments documentStore={documentStore} id={assetItem.asset._id}>
+          <WithReferringDocuments documentStore={documentStore} id={currentAsset._id}>
             {({isLoading, referringDocuments}) => {
               const uniqueReferringDocuments = getUniqueDocuments(referringDocuments)
               return (
@@ -338,7 +339,7 @@ const DialogAssetEdit = (props: Props) => {
                           error={errors?.description?.message}
                           label="Description"
                           name="description"
-                          rows={3}
+                          rows={5}
                           value={currentAsset?.description}
                         />
                       </Stack>
@@ -375,6 +376,7 @@ const DialogAssetEdit = (props: Props) => {
             {isImageAsset(currentAsset) && (
               <Image
                 draggable={false}
+                scheme={scheme}
                 showCheckerboard={!currentAsset?.metadata?.isOpaque}
                 src={imageDprUrl(currentAsset, {height: 600, width: 600})}
               />

package/src/components/FileIcon/index.tsx

@@ -1,8 +1,8 @@
-import {Box, Flex} from '@sanity/ui'
+import {Box, Flex, Theme} from '@sanity/ui'
 import React, {MouseEvent} from 'react'
 import {defaultStyles, FileIcon as ReactFileIcon} from 'react-file-icon'
 import type {DefaultExtensionType} from 'react-file-icon'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 
 type Props = {
   extension?: string
@@ -11,13 +11,15 @@ type Props = {
 }
 
 // Force react-file-icon styles
-const Container = styled(Box)`
-  text {
-    font-family: ${props => props.theme.sanity.fonts.text.family} !important;
-    font-size: 8px !important;
-    font-weight: 500 !important;
-  }
-`
+const Container = styled(Box)(({theme}: {theme: Theme}) => {
+  return css`
+    text {
+      font-family: ${theme.sanity.fonts.text.family} !important;
+      font-size: 8px !important;
+      font-weight: 500 !important;
+    }
+  `
+})
 
 const FileIcon = (props: Props) => {
   const {extension, onClick, width} = props

package/src/components/FormFieldInputTags/index.tsx

@@ -2,6 +2,7 @@ import {Box} from '@sanity/ui'
 import React from 'react'
 import {Controller} from 'react-hook-form'
 import CreatableSelect from 'react-select/creatable'
+import {useColorScheme} from 'sanity'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/creatable'
 import type {TagSelectOption} from '../../types'
@@ -37,6 +38,8 @@ const FormFieldInputTags = (props: Props) => {
     value
   } = props
 
+  const {scheme} = useColorScheme()
+
   // Redux
   const creating = useTypedSelector(state => state.tags.creating)
   const tagsFetching = useTypedSelector(state => state.tags.fetching)
@@ -82,7 +85,7 @@ const FormFieldInputTags = (props: Props) => {
               onCreateOption={onCreateTag}
               options={options}
               placeholder={tagsFetching ? 'Loading...' : placeholder}
-              styles={reactSelectStyles}
+              styles={reactSelectStyles(scheme)}
               value={controllerValue}
             />
           )

package/src/components/Image/index.tsx

@@ -1,16 +1,19 @@
-import {hues} from '@sanity/color'
+import {ThemeColorSchemeKey} from '@sanity/ui'
 import {MouseEvent} from 'react'
 import styled, {css} from 'styled-components'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   onClick?: (e: MouseEvent) => void
   showCheckerboard?: boolean
+  scheme?: ThemeColorSchemeKey
   src: string
   style?: any
 }
 
 const Image = styled.img<Props>`
-  --checkerboard-color: ${hues.gray[900].hex};
+  --checkerboard-color: ${props =>
+    props.scheme ? getSchemeColor(props.scheme, 'bg2') : 'inherit'};
 
   display: block;
   width: 100%;

package/src/components/OrderSelect/index.tsx

@@ -1,4 +1,4 @@
-import {SelectIcon, SortIcon} from '@sanity/icons'
+import {SortIcon} from '@sanity/icons'
 import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -21,8 +21,7 @@ const OrderSelect = () => {
         <Button
           fontSize={1}
           icon={SortIcon}
-          iconRight={SelectIcon}
-          mode="ghost"
+          mode="bleed"
           padding={3}
           text={getOrderTitle(order.field, order.direction)}
         />
@@ -32,10 +31,12 @@ const OrderSelect = () => {
         <Menu>
           {ORDER_OPTIONS?.map((item, index) => {
             if (item) {
+              const selected = order.field === item.field && order.direction === item.direction
               return (
                 <MenuItem
-                  disabled={order.field === item.field && order.direction === item.direction}
+                  disabled={selected}
                   fontSize={1}
+                  iconRight={selected}
                   key={index}
                   onClick={() =>
                     dispatch(
@@ -45,6 +46,9 @@ const OrderSelect = () => {
                     )
                   }
                   padding={2}
+                  selected={selected}
+                  space={4}
+                  style={{minWidth: '200px'}}
                   text={getOrderTitle(item.field, item.direction)}
                 />
               )

package/src/components/PickedBar/index.tsx

@@ -1,14 +1,17 @@
-import {hues} from '@sanity/color'
 import {Box, Button, Flex, Label} from '@sanity/ui'
 import pluralize from 'pluralize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
+import {useColorScheme} from 'sanity'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetsPicked} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 const PickedBar = () => {
+  const {scheme} = useColorScheme()
+
   // Redux
   const dispatch = useDispatch()
   const assetsPicked = useTypedSelector(selectAssetsPicked)
@@ -31,8 +34,8 @@ const PickedBar = () => {
       align="center"
       justify="flex-start"
       style={{
-        background: hues.gray?.[900].hex,
-        borderBottom: `1px solid ${hues.gray?.[900].hex}`,
+        background: getSchemeColor(scheme, 'bg'),
+        borderBottom: '1px solid var(--card-border-color)',
         height: `${PANEL_HEIGHT}px`,
         position: 'relative',
         width: '100%'

package/src/components/SearchFacet/index.tsx

@@ -1,24 +1,30 @@
 import {CloseIcon} from '@sanity/icons'
-import {Box, Flex, Label, Text} from '@sanity/ui'
+import {Box, Flex, Label, rem, Text, Theme, ThemeColorSchemeKey} from '@sanity/ui'
 import {SearchFacetInputProps, WithId} from '@types'
 import React, {ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
-import styled from 'styled-components'
+import {useColorScheme} from 'sanity'
+import styled, {css} from 'styled-components'
 import {searchActions} from '../../modules/search'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   children: ReactNode
   facet: WithId<SearchFacetInputProps>
 }
 
-const Container = styled(Box)`
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: ${props => props.theme.sanity.radius[2]}px;
-`
+const Container = styled(Box)(({scheme, theme}: {scheme: ThemeColorSchemeKey; theme: Theme}) => {
+  return css`
+    background: ${getSchemeColor(scheme, 'bg')};
+    border-radius: ${rem(theme.sanity.radius[2])};
+  `
+})
 
 const SearchFacet = (props: Props) => {
   const {children, facet} = props
 
+  const {scheme} = useColorScheme()
+
   // Redux
   const dispatch = useDispatch()
 
@@ -27,7 +33,7 @@ const SearchFacet = (props: Props) => {
   }
 
   return (
-    <Container padding={[2, 2, 1]}>
+    <Container padding={[2, 2, 1]} scheme={scheme}>
       <Flex align={['flex-start', 'flex-start', 'center']} direction={['column', 'column', 'row']}>
         {/* Title */}
         <Box paddingBottom={[3, 3, 0]} paddingLeft={1} paddingRight={2} paddingTop={[1, 1, 0]}>