import { colors } from "../path/to/src/constants/theme.js"; 
css => 
color: ${colors.primaryWhite};

<TextSwap
  step={this.state.step}
  textArray={[
    <>
      <h1>2.8x Loupes3.5x Loupes</h1>
      <p>
        These 2.8x magnifcation loupes (often referred to as 3x by
        many brands) offer extreme versatility and are perfectly
      </p>
    </>,
    <>
      <h1>2.8x Loupes3.5x Loupes</h1>
      <p>
        These 2.8x magnifcation loupes (often referred to as 3x by
        many brands) offer extreme versatility and are perfectly
      </p>
    </>,
    <>
      <h1>2.8x Loupes3.5x Loupes</h1>
      <p>
        These 2.8x magnifcation loupes (often referred to as 3x by
        many brands) offer extreme versatility and are perfectly
      </p>
    </>,
  ]}
/>

<Button type="primary">Hi there</Button>

<InfoBubble
  type="info"
  title="FIG. 1"
  text="Back pain can be worsened by a poorly measured
      working distance & neck pain by poor declination
      angles."
/>

<Bubble onClick={() => console.log("clicked")} noAnimation={false} />

import computeIsMobile from "path/to/src/js/isMobile.js";
const isMobile = computeIsMobile();

import { getScreenSize } from "path/to/src/js/isMobile.js";
const size = getScreenSize();
=> size = { width: .. , height: .. }

font-family: Yantramanav, sans-serif;

H1

H2

H3

H4

H5

H6

P

import { screens } from "../path/to/src/constants/theme.js";

css =>
  @media (max-width: ${screens.md}) {
    ...code here
  }
screens = {
  xs: '479px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
};

<SectionWrapper fluid={true/false}>Test content</SectionWrapper>