How to use the @tds/core-responsive.media.until function in @tds/core-responsive

}))

const HeaderContainer = styled.div(({ direction }) => ({
  display: 'flex',
  flexDirection: direction,
  flex: '1 1 auto',
  width: '100%',
  alignItems: 'flex-start',
}))

const HeaderTitleContainer = styled.div({ width: '100%' })

const HeaderSubtextContainer = styled.div({ lineHeight: '1px' })

const TertiaryTextAlignmentContainer = styled.div({
  ...media.until('md').css({
    alignSelf: 'flex-end',
  }),
})

const ShowFromMd = styled.div({
  display: 'none',
  ...media.from('md').css({
    display: 'inline-block',
  }),
})

const ShowUntilMd = styled.div({
  display: 'inline-block',
  ...media.from('md').css({
    display: 'none',
  }),

({ reverseLevel, limitWidth }) => ({
    display: 'flex',
    flexWrap: 'wrap',
    margin: '0 auto',
    'div&': { padding: 0 },
    ...media.until('sm').css({
      flexDirection: reverseLevel[0] ? 'column-reverse' : 'column',
    }),
    ...media.from('sm').css({
      ...(limitWidth && { maxWidth: rem('sm') }),
      flexDirection: reverseLevel[1] ? 'column-reverse' : 'column',
    }),
    ...media.from('md').css({
      ...(limitWidth && { maxWidth: rem('md') }),
      flexDirection: reverseLevel[2] ? 'column-reverse' : 'column',
    }),
    ...media.from('lg').css({
      ...(limitWidth && { maxWidth: rem('lg') }),
      flexDirection: reverseLevel[3] ? 'column-reverse' : 'column',
    }),
    ...media.from('xl').css({
      ...(limitWidth && { maxWidth: rem('xl') }),

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import Heading from '@tds/core-heading'
import Box from '@tds/core-box'
import { safeRest } from '@tds/util-helpers'
import { media } from '@tds/core-responsive'
import ColoredTextProvider from '../../shared/components/ColoredTextProvider/ColoredTextProvider'

const Wrapper = styled.blockquote({
  borderLeft: '4px solid purple',
  ...media.until('md').css({
    paddingLeft: '2rem',
  }),
  ...media.from('md').css({
    paddingLeft: '3rem',
  }),
})

/**
 * The Blockquote component is used to highlight text as a `blockquote` html tag.
 *
 * @version ./package.json
 */
const Blockquote = ({ children, ...rest }) => (

{getCopy(copyDictionary, copy).heading}
                      
                       {
                          closeFootnote(e, { returnFocus: true })
                        }}
                        aria-label={getCopy(copyDictionary, copy).close}
                      >
                        
                      
                    
                  
                
              
            
            <div>
              
            </div>
          
          
            {data.number &amp;&amp; data.content &amp;&amp; (

))(({ hiddenLevel, gutter, horizontalAlignLevel }) => ({
  'div&': {
    paddingLeft: gutter ? '1rem' : 0,
    paddingRight: gutter ? '1rem' : 0,
  },
  ...media.until('sm').css({
    display: hiddenLevel[0] === 0 ? 'none' : 'block',
    textAlign: horizontalAlignLevel[0],
  }),
  ...media.from('sm').css({
    display: hiddenLevel[1] === 0 ? 'none' : 'block',
    textAlign: horizontalAlignLevel[1],
  }),
  ...media.from('md').css({
    display: hiddenLevel[2] === 0 ? 'none' : 'block',
    textAlign: horizontalAlignLevel[2],
  }),
  ...media.from('lg').css({
    display: hiddenLevel[3] === 0 ? 'none' : 'block',
    textAlign: horizontalAlignLevel[3],
  }),
  ...media.from('xl').css({

({ reverseLevel }) => ({
    width: '100%',
    'div&': {
      margin: '0 auto',
      flexShrink: 0,
      ...media.until('sm').css({
        flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
      }),
      ...media.from('sm').css({
        flexDirection: reverseLevel[1] ? 'row-reverse' : 'row',
      }),
      ...media.from('md').css({
        flexDirection: reverseLevel[2] ? 'row-reverse' : 'row',
      }),
      ...media.from('lg').css({
        flexDirection: reverseLevel[3] ? 'row-reverse' : 'row',
      }),
      ...media.from('xl').css({
        flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
      }),
    },
  })

padding: '0',
  borderRadius: '4px',
  ...media.from('md').css({
    background: 'none',
    width: 'auto',
    height: 'auto',
  }),
})

export const ButtonLabel = styled.span({
  display: 'none',
  ...media.from('md').css({ display: 'inline-block' }),
})

export const PaginationList = styled.ul({
  ...media.until('md').css({
    display: 'none',
  }),
  display: 'flex',
})

export const PaginationListMobile = styled.ul({
  ...media.from('md').css({
    display: 'none',
  }),
})

export const GeneralPaginationButton = styled.button({
  background: 'none',
  border: 'none',
  color: colorTelusPurple,
  padding: '0 5px',

position: 'absolute',
      bottom: `-${bubbleDimensions.bubbleTriangleWidth}`,

      borderWidth: bubbleDimensions.bubbleTriangleWidth,
      borderStyle: 'solid',
      borderColor: `transparent ${colorWhite} ${colorWhite} transparent`,

      backgroundColor: colorWhite,
      boxShadow: '2px 2px 3px 0 rgba(42, 42, 44, 0.4)',

      transform: 'rotate(45deg)',
      ...{ right: direction === 'left' ? bubbleDimensions.bubbleTrianglePosition : undefined },
      ...{ left: direction === 'right' ? bubbleDimensions.bubbleTrianglePosition : undefined },
    },

    ...media.until('sm').css({
      maxWidth: '80vw',
    }),

    ...media.from('sm').css({
      maxWidth: '50vw',
    }),

    ...media.from('md').css({
      maxWidth: '25vw',
    }),
  })
)