From 34cd4e3675114870eb45c3fb8ad24d7874c3a49e Mon Sep 17 00:00:00 2001
From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com>
Date: Thu, 18 Aug 2022 12:28:43 -0400
Subject: [PATCH] [js] Update all Yarn dependencies (2022-08-17) (#18343)

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: Mac Siri <krairit.siri@gmail.com>
---
 .../__tests__/MobileDrawer.test.jsx           |  16 +-
 .../crayons/Modal/__tests__/Modal.test.jsx    | 271 +++++++++---------
 .../__snapshots__/ColorPicker.test.jsx.snap   |   4 +-
 package.json                                  |  16 +-
 yarn.lock                                     | 103 ++++---
 5 files changed, 219 insertions(+), 191 deletions(-)

diff --git a/app/javascript/crayons/MobileDrawer/__tests__/MobileDrawer.test.jsx b/app/javascript/crayons/MobileDrawer/__tests__/MobileDrawer.test.jsx
index b38c55aa6..778ab65b3 100644
--- a/app/javascript/crayons/MobileDrawer/__tests__/MobileDrawer.test.jsx
+++ b/app/javascript/crayons/MobileDrawer/__tests__/MobileDrawer.test.jsx
@@ -6,6 +6,12 @@ import userEvent from '@testing-library/user-event';
 import { MobileDrawer } from '../MobileDrawer';
 
 describe('<MobileDrawer />', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it('should have no a11y violations', async () => {
     const { container } = render(
       <MobileDrawer title="Example MobileDrawer">
@@ -43,16 +49,16 @@ describe('<MobileDrawer />', () => {
     });
     await waitFor(() => expect(innerDrawerButton).toHaveFocus());
 
-    userEvent.tab();
+    await user.keyboard('{Tab}');
     expect(
       getByRole('button', { name: 'Inside drawer button 2' }),
     ).toHaveFocus();
 
-    userEvent.tab();
+    await user.keyboard('{Tab}');
     expect(innerDrawerButton).toHaveFocus();
   });
 
-  it('should close when Escape is pressed', () => {
+  it('should close when Escape is pressed', async () => {
     const onClose = jest.fn();
     render(
       <MobileDrawer title="Example MobileDrawer" onClose={onClose}>
@@ -60,7 +66,7 @@ describe('<MobileDrawer />', () => {
       </MobileDrawer>,
     );
 
-    userEvent.keyboard('{Escape}');
+    await user.keyboard('{Escape}');
     expect(onClose).toHaveBeenCalled();
   });
 
@@ -77,7 +83,7 @@ describe('<MobileDrawer />', () => {
       </div>,
     );
 
-    await userEvent.click(getByText('Outside content'));
+    await user.click(getByText('Outside content'));
     expect(onClose).toHaveBeenCalled();
   });
 });
diff --git a/app/javascript/crayons/Modal/__tests__/Modal.test.jsx b/app/javascript/crayons/Modal/__tests__/Modal.test.jsx
index ff7bb2375..561757494 100644
--- a/app/javascript/crayons/Modal/__tests__/Modal.test.jsx
+++ b/app/javascript/crayons/Modal/__tests__/Modal.test.jsx
@@ -5,153 +5,166 @@ import { render, waitFor } from '@testing-library/preact';
 import userEvent from '@testing-library/user-event';
 import { Modal } from '../Modal';
 
-it('should have no a11y violations', async () => {
-  const { container } = render(
-    <Modal title="This is a modal title">This is the modal body content</Modal>,
-  );
-  const results = await axe(container);
+describe('Modal', () => {
+  let user;
 
-  expect(results).toHaveNoViolations();
-});
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
 
-it('should trap focus inside the modal by default', async () => {
-  const { getByText, getByLabelText } = render(
-    <div>
-      <button>Outside modal button</button>
+  it('should have no a11y violations', async () => {
+    const { container } = render(
       <Modal title="This is a modal title">
-        <button>Modal content button</button>
-      </Modal>
-    </div>,
-  );
+        This is the modal body content
+      </Modal>,
+    );
+    const results = await axe(container);
 
-  const closeButton = getByLabelText('Close', { selector: 'button' });
-  await waitFor(() => expect(closeButton).toHaveFocus());
+    expect(results).toHaveNoViolations();
+  });
 
-  userEvent.tab();
-  expect(getByText('Modal content button')).toHaveFocus();
+  it('should trap focus inside the modal by default', async () => {
+    const { getByText, getByLabelText } = render(
+      <div>
+        <button>Outside modal button</button>
+        <Modal title="This is a modal title">
+          <button>Modal content button</button>
+        </Modal>
+      </div>,
+    );
 
-  userEvent.tab();
-  expect(closeButton).toHaveFocus();
-});
+    const closeButton = getByLabelText('Close', { selector: 'button' });
+    await waitFor(() => expect(closeButton).toHaveFocus());
 
-it('should trap focus in the custom selector if provided in props', async () => {
-  const { getByText } = render(
-    <div>
-      <button>Outside modal button</button>
-      <Modal title="This is a modal title" focusTrapSelector="#trap-focus-here">
-        <button>Outside focus trap button</button>
-        <div id="trap-focus-here">
-          <button>Inside focus trap button</button>
-        </div>
-      </Modal>
-    </div>,
-  );
+    await user.tab();
+    expect(getByText('Modal content button')).toHaveFocus();
 
-  const buttonInsideFocusTrap = getByText('Inside focus trap button');
-  await waitFor(() => expect(buttonInsideFocusTrap).toHaveFocus());
-});
+    await user.tab();
+    expect(closeButton).toHaveFocus();
+  });
 
-it('should close when the close button is clicked', async () => {
-  const onClose = jest.fn();
-  const { getByLabelText } = render(
-    <Modal title="This is a modal title" onClose={onClose}>
-      This is the modal body content
-    </Modal>,
-  );
+  it('should trap focus in the custom selector if provided in props', async () => {
+    const { getByText } = render(
+      <div>
+        <button>Outside modal button</button>
+        <Modal
+          title="This is a modal title"
+          focusTrapSelector="#trap-focus-here"
+        >
+          <button>Outside focus trap button</button>
+          <div id="trap-focus-here">
+            <button>Inside focus trap button</button>
+          </div>
+        </Modal>
+      </div>,
+    );
 
-  const closeButton = getByLabelText('Close', { selector: 'button' });
+    const buttonInsideFocusTrap = getByText('Inside focus trap button');
+    await waitFor(() => expect(buttonInsideFocusTrap).toHaveFocus());
+  });
 
-  closeButton.click();
-
-  expect(onClose).toHaveBeenCalledTimes(1);
-});
-
-it('should close when Escape is pressed', () => {
-  const onClose = jest.fn();
-  render(
-    <Modal title="This is a modal title" onClose={onClose}>
-      This is the modal body content
-    </Modal>,
-  );
-
-  userEvent.keyboard('{Escape}');
-  expect(onClose).toHaveBeenCalledTimes(1);
-});
-
-it("shouldn't close on outside click by default", async () => {
-  const onClose = jest.fn();
-  const { getByText } = render(
-    <div>
-      <p>Outside content</p>
+  it('should close when the close button is clicked', async () => {
+    const onClose = jest.fn();
+    const { getByLabelText } = render(
       <Modal title="This is a modal title" onClose={onClose}>
         This is the modal body content
-      </Modal>
-    </div>,
-  );
+      </Modal>,
+    );
 
-  await userEvent.click(getByText('Outside content'));
-  expect(onClose).not.toHaveBeenCalled();
-});
+    const closeButton = getByLabelText('Close', { selector: 'button' });
 
-it('should close on click outside, if enabled', async () => {
-  const onClose = jest.fn();
-  const { getByText } = render(
-    <div>
-      <p>Outside content</p>
+    closeButton.click();
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should close when Escape is pressed', async () => {
+    const onClose = jest.fn();
+    render(
+      <Modal title="This is a modal title" onClose={onClose}>
+        This is the modal body content
+      </Modal>,
+    );
+
+    await user.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("shouldn't close on outside click by default", async () => {
+    const onClose = jest.fn();
+    const { getByText } = render(
+      <div>
+        <p>Outside content</p>
+        <Modal title="This is a modal title" onClose={onClose}>
+          This is the modal body content
+        </Modal>
+      </div>,
+    );
+
+    await user.click(getByText('Outside content'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should close on click outside, if enabled', async () => {
+    const onClose = jest.fn();
+    const { getByText } = render(
+      <div>
+        <p>Outside content</p>
+        <Modal
+          title="This is a modal title"
+          onClose={onClose}
+          backdropDismissible
+        >
+          This is the modal body content
+        </Modal>
+      </div>,
+    );
+
+    await user.click(getByText('Outside content'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render with additional class names', async () => {
+    const { getByTestId } = render(
       <Modal
         title="This is a modal title"
-        onClose={onClose}
-        backdropDismissible
+        className="some-additional-class-name"
+        onClose={jest.fn()}
       >
         This is the modal body content
-      </Modal>
-    </div>,
-  );
+      </Modal>,
+    );
 
-  await userEvent.click(getByText('Outside content'));
-  expect(onClose).toHaveBeenCalledTimes(1);
-});
-
-it('should render with additional class names', async () => {
-  const { getByTestId } = render(
-    <Modal
-      title="This is a modal title"
-      className="some-additional-class-name"
-      onClose={jest.fn()}
-    >
-      This is the modal body content
-    </Modal>,
-  );
-
-  const modalContainer = getByTestId('modal-container');
-
-  expect(
-    modalContainer.classList.contains('some-additional-class-name'),
-  ).toEqual(true);
-});
-
-it('should render with a backdrop', async () => {
-  const { getByTestId } = render(
-    <Modal title="This is a modal title" backdrop onClose={jest.fn()}>
-      This is the modal body content
-    </Modal>,
-  );
-
-  const modalOverlay = getByTestId('modal-overlay');
-
-  expect(modalOverlay).not.toBeNull();
-});
-
-it('should render with a different size modal', async () => {
-  const { getByTestId } = render(
-    <Modal title="This is a modal title" size="large" onClose={jest.fn()}>
-      This is the modal body content
-    </Modal>,
-  );
-
-  const modalContainer = getByTestId('modal-container');
-
-  expect(modalContainer.classList.contains('crayons-modal--large')).toEqual(
-    true,
-  );
+    const modalContainer = getByTestId('modal-container');
+
+    expect(
+      modalContainer.classList.contains('some-additional-class-name'),
+    ).toEqual(true);
+  });
+
+  it('should render with a backdrop', async () => {
+    const { getByTestId } = render(
+      <Modal title="This is a modal title" backdrop onClose={jest.fn()}>
+        This is the modal body content
+      </Modal>,
+    );
+
+    const modalOverlay = getByTestId('modal-overlay');
+
+    expect(modalOverlay).not.toBeNull();
+  });
+
+  it('should render with a different size modal', async () => {
+    const { getByTestId } = render(
+      <Modal title="This is a modal title" size="large" onClose={jest.fn()}>
+        This is the modal body content
+      </Modal>,
+    );
+
+    const modalContainer = getByTestId('modal-container');
+
+    expect(modalContainer.classList.contains('crayons-modal--large')).toEqual(
+      true,
+    );
+  });
 });
diff --git a/app/javascript/crayons/formElements/ColorPicker/__tests__/__snapshots__/ColorPicker.test.jsx.snap b/app/javascript/crayons/formElements/ColorPicker/__tests__/__snapshots__/ColorPicker.test.jsx.snap
index 1e7d48afb..c1eb32881 100644
--- a/app/javascript/crayons/formElements/ColorPicker/__tests__/__snapshots__/ColorPicker.test.jsx.snap
+++ b/app/javascript/crayons/formElements/ColorPicker/__tests__/__snapshots__/ColorPicker.test.jsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ColorPicker /> should render 1`] = `"<div class=\\"c-color-picker relative w-100\\"><button type=\\"button\\" class=\\"c-btn c-btn c-color-picker__swatch absolute\\" id=\\"color-popover-btn-color-picker\\" style=\\"background-color: rgb(0, 0, 0);\\" aria-label=\\"Choose a color\\" aria-expanded=\\"false\\" aria-controls=\\"color-popover-color-picker\\" aria-haspopup=\\"true\\"></button><input aria-label=\\"Choose a color\\" id=\\"color-picker\\" class=\\"c-color-picker__input crayons-textfield\\" spellcheck=\\"false\\"><div id=\\"color-popover-color-picker\\" class=\\"c-color-picker__popover crayons-dropdown absolute p-0\\"><div class=\\"react-colorful\\"><div class=\\"react-colorful__saturation\\" style=\\"background-color: rgb(255, 0, 0);\\"><div aria-label=\\"Color\\" aria-valuetext=\\"Saturation 0%, Brightness 0%\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__saturation-pointer\\" style=\\"top: 100%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(0, 0, 0);\\"></div></div></div></div><div class=\\"react-colorful__hue react-colorful__last-control\\"><div aria-label=\\"Hue\\" aria-valuetext=\\"0\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__hue-pointer\\" style=\\"top: 50%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(255, 0, 0);\\"></div></div></div></div></div></div></div>"`;
+exports[`<ColorPicker /> should render 1`] = `"<div class=\\"c-color-picker relative w-100\\"><button type=\\"button\\" class=\\"c-btn c-btn c-color-picker__swatch absolute\\" id=\\"color-popover-btn-color-picker\\" style=\\"background-color: rgb(0, 0, 0);\\" aria-label=\\"Choose a color\\" aria-expanded=\\"false\\" aria-controls=\\"color-popover-color-picker\\" aria-haspopup=\\"true\\"></button><input aria-label=\\"Choose a color\\" id=\\"color-picker\\" class=\\"c-color-picker__input crayons-textfield\\" spellcheck=\\"false\\"><div id=\\"color-popover-color-picker\\" class=\\"c-color-picker__popover crayons-dropdown absolute p-0\\"><div class=\\"react-colorful\\"><div class=\\"react-colorful__saturation\\" style=\\"background-color: rgb(255, 0, 0);\\"><div aria-label=\\"Color\\" aria-valuetext=\\"Saturation 0%, Brightness 0%\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__saturation-pointer\\" style=\\"top: 100%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(0, 0, 0);\\"></div></div></div></div><div class=\\"react-colorful__hue react-colorful__last-control\\"><div aria-label=\\"Hue\\" aria-valuenow=\\"0\\" aria-valuemax=\\"360\\" aria-valuemin=\\"0\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__hue-pointer\\" style=\\"top: 50%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(255, 0, 0);\\"></div></div></div></div></div></div></div>"`;
 
-exports[`<ColorPicker /> should render with a default value 1`] = `"<div class=\\"c-color-picker relative w-100\\"><button type=\\"button\\" class=\\"c-btn c-btn c-color-picker__swatch absolute\\" id=\\"color-popover-btn-color-picker\\" style=\\"background-color: rgb(171, 171, 171);\\" aria-label=\\"Choose a color\\" aria-expanded=\\"false\\" aria-controls=\\"color-popover-color-picker\\" aria-haspopup=\\"true\\"></button><input aria-label=\\"Choose a color\\" id=\\"color-picker\\" class=\\"c-color-picker__input crayons-textfield\\" spellcheck=\\"false\\"><div id=\\"color-popover-color-picker\\" class=\\"c-color-picker__popover crayons-dropdown absolute p-0\\"><div class=\\"react-colorful\\"><div class=\\"react-colorful__saturation\\" style=\\"background-color: rgb(255, 0, 0);\\"><div aria-label=\\"Color\\" aria-valuetext=\\"Saturation 0%, Brightness 67%\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__saturation-pointer\\" style=\\"top: 32.99999999999999%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(171, 171, 171);\\"></div></div></div></div><div class=\\"react-colorful__hue react-colorful__last-control\\"><div aria-label=\\"Hue\\" aria-valuetext=\\"0\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__hue-pointer\\" style=\\"top: 50%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(255, 0, 0);\\"></div></div></div></div></div></div></div>"`;
+exports[`<ColorPicker /> should render with a default value 1`] = `"<div class=\\"c-color-picker relative w-100\\"><button type=\\"button\\" class=\\"c-btn c-btn c-color-picker__swatch absolute\\" id=\\"color-popover-btn-color-picker\\" style=\\"background-color: rgb(171, 171, 171);\\" aria-label=\\"Choose a color\\" aria-expanded=\\"false\\" aria-controls=\\"color-popover-color-picker\\" aria-haspopup=\\"true\\"></button><input aria-label=\\"Choose a color\\" id=\\"color-picker\\" class=\\"c-color-picker__input crayons-textfield\\" spellcheck=\\"false\\"><div id=\\"color-popover-color-picker\\" class=\\"c-color-picker__popover crayons-dropdown absolute p-0\\"><div class=\\"react-colorful\\"><div class=\\"react-colorful__saturation\\" style=\\"background-color: rgb(255, 0, 0);\\"><div aria-label=\\"Color\\" aria-valuetext=\\"Saturation 0%, Brightness 67%\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__saturation-pointer\\" style=\\"top: 32.99999999999999%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(171, 171, 171);\\"></div></div></div></div><div class=\\"react-colorful__hue react-colorful__last-control\\"><div aria-label=\\"Hue\\" aria-valuenow=\\"0\\" aria-valuemax=\\"360\\" aria-valuemin=\\"0\\" class=\\"react-colorful__interactive\\" tabindex=\\"0\\" role=\\"slider\\"><div class=\\"react-colorful__pointer react-colorful__hue-pointer\\" style=\\"top: 50%; left: 0%;\\"><div class=\\"react-colorful__pointer-fill\\" style=\\"background-color: rgb(255, 0, 0);\\"></div></div></div></div></div></div></div>"`;
diff --git a/package.json b/package.json
index 53e55da09..01cbf4313 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
   "homepage": "https://github.com/forem/forem#readme",
   "devDependencies": {
     "@babel/eslint-parser": "^7.18.9",
-    "@faker-js/faker": "^7.3.0",
+    "@faker-js/faker": "^7.4.0",
     "@knapsack-pro/cypress": "^5.1.0",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
@@ -52,18 +52,18 @@
     "@storybook/manager-webpack5": "^6.5.10",
     "@storybook/preact": "^6.5.10",
     "@testing-library/cypress": "^8.0.3",
-    "@testing-library/dom": "^8.16.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
-    "@testing-library/user-event": "^14.3.0",
+    "@testing-library/user-event": "^14.4.3",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
     "css-loader": "^5.2.7",
     "cssom": "^0.5.0",
-    "cypress": "^10.4.0",
+    "cypress": "^10.6.0",
     "cypress-failed-log": "^2.10.0",
     "cypress-file-upload": "^5.0.8",
     "cypress-pipe": "^2.0.0",
@@ -104,7 +104,7 @@
     "@babel/preset-env": "^7.18.10",
     "@etchteam/storybook-addon-css-variables-theme": "^1.2.1",
     "@github/time-elements": "3.1.2",
-    "@honeybadger-io/js": "^4.0.5",
+    "@honeybadger-io/js": "^4.1.0",
     "@honeybadger-io/webpack": "^1.5.1",
     "@hotwired/stimulus": "3.1.0",
     "@hotwired/stimulus-webpack-helpers": "1.0.1",
@@ -136,10 +136,10 @@
     "postcss-cssnext": "^3.1.0",
     "postcss-smart-import": "^0.7.6",
     "postscribe": "^2.0.8",
-    "preact": "^10.10.2",
+    "preact": "^10.10.3",
     "prop-types": "^15.8.1",
     "rails-erb-loader": "^5.5.2",
-    "react-colorful": "^5.5.1",
+    "react-colorful": "^5.6.0",
     "react-dates": "^21.8.0",
     "web-share-wrapper": "^0.2.2"
   }
diff --git a/yarn.lock b/yarn.lock
index 4d573597e..bbfe3a3b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@adobe/css-tools@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd"
+  integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==
+
 "@ampproject/remapping@^2.1.0":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.1.tgz#7922fb0817bf3166d8d9e258c57477e3fd1c3610"
@@ -1447,10 +1452,10 @@
     memoizerific "^1.11.3"
     util-deprecate "^1.0.2"
 
-"@faker-js/faker@^7.3.0":
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.3.0.tgz#a508df35ded585c4e071cb5d9d7c89623c837fae"
-  integrity sha512-1W0PZezq2rxlAssoWemi9gFRD8IQxvf0FPL5Km3TOmGHFG7ib0TbFBJ0yC7D/1NsxunjNTK6WjUXV8ao/mKZ5w==
+"@faker-js/faker@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.4.0.tgz#cac720d860a89d487b47e55e66a4fd114f1d3fe5"
+  integrity sha512-xDd3Tvkt2jgkx1LkuwwxpNBy/Oe+LkZBTwkgEFTiWpVSZgQ5sc/LenbHKRHbFl0dq/KFeeq/szyyPtpJRKY0fg==
 
 "@gar/promisify@^1.0.1":
   version "1.1.2"
@@ -1462,13 +1467,20 @@
   resolved "https://registry.yarnpkg.com/@github/time-elements/-/time-elements-3.1.2.tgz#cc36d7a34ff2033d7f0b216f1a724405b8fbc201"
   integrity sha512-YVtZVLBikP6I7na22kfB9PKIseISwX41MFJ7lPuNz1VVH2IR5cpRRU6F1X6kcchPChljuvMUR4OiwMWHOJQ8kQ==
 
-"@honeybadger-io/js@^4.0.5":
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/@honeybadger-io/js/-/js-4.0.5.tgz#b5751f8a7713799c744271087ace1f5a5821720e"
-  integrity sha512-HxFLGoNjnahzumvvyRNfUL7GfCJ4Cwbvr9X6dhBTK2OELMaQi/lEQM+clHxELWFuddaf3kwxvhl7SKdviUIZLA==
+"@honeybadger-io/core@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@honeybadger-io/core/-/core-4.1.0.tgz#abb01fed6e2efbb10b33ce4e30f1e3b92a0dc619"
+  integrity sha512-btbhQYd3HM9OK7f8YoKH8A3y9d6LhegJC+7erV5kGqEq07hLjvZkUc051USyLRl6cZYkLeAXjtksuzxtAbbypg==
   dependencies:
     stacktrace-parser "^0.1.10"
 
+"@honeybadger-io/js@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@honeybadger-io/js/-/js-4.1.0.tgz#ef408a6e45022a052db9e848de2fb83995ff5aa9"
+  integrity sha512-FPTNNb2sXd9BtF1PPbQwoTgO29RGaiY5WsIv4EGtnuGSwOXGMPxjNlKli42+CwayPX+4wLO+eTWizYu0fcEHLg==
+  dependencies:
+    "@honeybadger-io/core" "^4.1.0"
+
 "@honeybadger-io/webpack@^1.5.1":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@honeybadger-io/webpack/-/webpack-1.5.1.tgz#60829621fa8c766e1ea8fa4626e31ad1a1351e49"
@@ -2876,7 +2888,7 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@testing-library/dom@^8.1.0", "@testing-library/dom@^8.16.0":
+"@testing-library/dom@^8.1.0":
   version "8.16.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.16.0.tgz#d6fc50250aed17b1035ca1bd64655e342db3936a"
   integrity sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==
@@ -2890,16 +2902,30 @@
     lz-string "^1.4.4"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^5.16.4":
-  version "5.16.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz#938302d7b8b483963a3ae821f1c0808f872245cd"
-  integrity sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==
+"@testing-library/dom@^8.17.1":
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.17.1.tgz#2d7af4ff6dad8d837630fecd08835aee08320ad7"
+  integrity sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==
   dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
+"@testing-library/jest-dom@^5.16.5":
+  version "5.16.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
+  integrity sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==
+  dependencies:
+    "@adobe/css-tools" "^4.0.1"
     "@babel/runtime" "^7.9.2"
     "@types/testing-library__jest-dom" "^5.9.1"
     aria-query "^5.0.0"
     chalk "^3.0.0"
-    css "^3.0.0"
     css.escape "^1.5.1"
     dom-accessibility-api "^0.5.6"
     lodash "^4.17.15"
@@ -2917,10 +2943,10 @@
   dependencies:
     "@testing-library/dom" "^7.16.2"
 
-"@testing-library/user-event@^14.3.0":
-  version "14.3.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.3.0.tgz#0a6750b94b40e4739706d41e8efc2ccf64d2aad9"
-  integrity sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA==
+"@testing-library/user-event@^14.4.3":
+  version "14.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
 
 "@tootallnate/once@2":
   version "2.0.0"
@@ -5906,15 +5932,6 @@ css.escape@^1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
 
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -6062,10 +6079,10 @@ cypress-pipe@^2.0.0:
   resolved "https://registry.yarnpkg.com/cypress-pipe/-/cypress-pipe-2.0.0.tgz#577df7a70a8603d89a96dfe4092a605962181af8"
   integrity sha512-KW9s+bz4tFLucH3rBGfjW+Q12n7S4QpUSSyxiGrgPOfoHlbYWzAGB3H26MO0VTojqf9NVvfd5Kt0MH5XMgbfyg==
 
-cypress@^10.4.0:
-  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.4.0.tgz#bb5b3b6588ad49eff172fecf5778cc0da2980e4e"
-  integrity sha512-OM7F8MRE01SHQRVVzunid1ZK1m90XTxYnl+7uZfIrB4CYqUDCrZEeSyCXzIbsS6qcaijVCAhqDL60SxG8N6hew==
+cypress@^10.6.0:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.6.0.tgz#13f46867febf2c3715874ed5dce9c2e946b175fe"
+  integrity sha512-6sOpHjostp8gcLO34p6r/Ci342lBs8S5z9/eb3ZCQ22w2cIhMWGUoGKkosabPBfKcvRS9BE4UxybBtlIs8gTQA==
   dependencies:
     "@cypress/request" "^2.88.10"
     "@cypress/xvfb" "^1.2.4"
@@ -13204,10 +13221,10 @@ postscribe@^2.0.8:
   dependencies:
     prescribe ">=1.1.2"
 
-preact@^10.10.2:
-  version "10.10.2"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.10.2.tgz#3460d456d84c4701af33ac37e9bd3054271d5b1e"
-  integrity sha512-GUXSsfwq4NKhlLYY5ctfNE0IjFk7Xo4952yPI8yMkXdhzeQmQ+FahZITe7CeHXMPyKBVQ8SoCmGNIy9TSOdhgQ==
+preact@^10.10.3:
+  version "10.10.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.10.3.tgz#ea82c5dce85c8a85d541f0110507b2de195ed711"
+  integrity sha512-Gwwh0o531izatQQZu0yEX4mtfxVYsZJ4TT/o2VK3UZ/UuAWAWFnzsEfpZvad32vY3TKoRnSY2WqiDz2rH/viWQ==
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -13606,10 +13623,10 @@ react-colorful@^5.1.2:
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.0.tgz#8359f218984a927095477a190ab9927eaf865c0c"
   integrity sha512-BuzrlrM0ylg7coPkXOrRqlf2BgHLw5L44sybbr9Lg4xy7w9e5N7fGYbojOO0s8J0nvrM3PERN2rVFkvSa24lnQ==
 
-react-colorful@^5.5.1:
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"
-  integrity sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==
+react-colorful@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.0.tgz#1394165de401265d36a809a7ac87c910fad36837"
+  integrity sha512-2/sW7msvdPWYc6uKFteTOztlX8ujoKImv6k2TVSlqbGNbR3bsQMfTyHcca+kk8dDUe/bsfVkI3M2WOl1bKL+Lg==
 
 react-dates@^21.8.0:
   version "21.8.0"
@@ -14837,14 +14854,6 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@0.5.13:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"