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>

import Observer from 'src/components/Shared/Observer/index.js';

<Observer
  threshold={0}
  onChange={({ isIntersecting }) =>
    console.log('isIntersecting', isIntersecting)
  }
>
  <h1>HI THERE 👋</h1>
</Observer>

Optional Props:

 threshold - it represents the height percentage where the element must be in current view
    number - default: 0 - possible: 0 - 1

 disabled: - it will prevent the observer from triggering
    boolean - dafault: false  - possible: true / false

 runOnce: - it will prevent the observer from triggering more than once
    boolean - dafault: false  - possible: true / false

 delay: - the time that will wait untill will fade in
    number - dafault: 0  - possible: amount in ms

 transition: - animation function that will be used for fadding in
    number - dafault: 1000ms  - possible: amount in ms

 animationTime: - the time that animation will take to complete
    number - dafault: cubic-bezier(0.64, 0.04, 0.35, 1)  - possible: any css transition