From 36541093328115a4cf54522852afe76fc9434de4 Mon Sep 17 00:00:00 2001
From: Dakota Walsh <101994734+dakota-portainer@users.noreply.github.com>
Date: Fri, 21 Apr 2023 16:52:05 +1200
Subject: [PATCH] fix(slider): update rc-slider [EE-5011] (#8611)

* fix(slider): update rc-slider [EE-5011]

* fix PasswordLengthSlider tooltip

* fix unnecessarily bulky className for SliderTooltip

* remove SliderTooltip inner div

* center slider handle value

* relative tooltip

* update z index

---------

Co-authored-by: testa113 <testa113>
---
 .../create/createApplication.html             |  4 +-
 .../SliderTooltip/SliderTooltip.module.css    | 30 +++++++
 .../Tip/SliderTooltip/SliderTooltip.tsx       | 42 ++++++++++
 .../components/Tip/SliderTooltip/index.ts     |  1 +
 .../form-components/Slider/Slider.module.css  | 56 +++++--------
 .../form-components/Slider/Slider.stories.tsx |  8 +-
 .../form-components/Slider/Slider.tsx         | 33 +++++---
 .../PasswordLengthSlider.tsx                  | 34 ++++----
 package.json                                  |  2 +-
 yarn.lock                                     | 84 +++++--------------
 10 files changed, 159 insertions(+), 135 deletions(-)
 create mode 100644 app/react/components/Tip/SliderTooltip/SliderTooltip.module.css
 create mode 100644 app/react/components/Tip/SliderTooltip/SliderTooltip.tsx
 create mode 100644 app/react/components/Tip/SliderTooltip/index.ts

diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index bb4d86988..4847d5b26 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -773,7 +773,7 @@
                       (!ctrl.state.resourcePoolHasQuota || (ctrl.state.resourcePoolHasQuota && !ctrl.resourceQuotaCapacityExceeded())) && ctrl.formValues.Containers.length <= 1
                     "
                   >
-                    <label for="memory-limit" class="col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
+                    <label for="memory-limit" class="space-right col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
                       Memory limit (MB)
                       <portainer-tooltip
                         message="'An instance of this application will reserve this amount of memory. If the instance memory usage exceeds the reservation, it might be subject to OOM.'"
@@ -816,7 +816,7 @@
                       (!ctrl.state.resourcePoolHasQuota || (ctrl.state.resourcePoolHasQuota && !ctrl.resourceQuotaCapacityExceeded())) && ctrl.formValues.Containers.length <= 1
                     "
                   >
-                    <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
+                    <label for="cpu-limit" class="space-right col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
                       CPU limit
                       <portainer-tooltip
                         message="'An instance of this application will reserve this amount of CPU. If the instance CPU usage exceeds the reservation, it might be subject to CPU throttling.'"
diff --git a/app/react/components/Tip/SliderTooltip/SliderTooltip.module.css b/app/react/components/Tip/SliderTooltip/SliderTooltip.module.css
new file mode 100644
index 000000000..fa0deccec
--- /dev/null
+++ b/app/react/components/Tip/SliderTooltip/SliderTooltip.module.css
@@ -0,0 +1,30 @@
+:global(portainer-tooltip) {
+  @apply inline-flex;
+}
+
+.tooltip {
+  background-color: var(--bg-tooltip-color) !important;
+  color: var(--text-tooltip-color) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  max-width: 400px;
+  min-width: 50px;
+  font-size: 1rem !important;
+  font-weight: 400;
+  text-align: left;
+  width: max-content;
+}
+
+.tooltip-container {
+  line-height: 18px;
+  padding: 8px 10px !important;
+  font-size: 12px !important;
+}
+
+.tooltip-centered .tooltip-container {
+  text-align: center;
+}
+
+.tooltip-message a {
+  color: var(--blue-15) !important;
+}
diff --git a/app/react/components/Tip/SliderTooltip/SliderTooltip.tsx b/app/react/components/Tip/SliderTooltip/SliderTooltip.tsx
new file mode 100644
index 000000000..4038fd313
--- /dev/null
+++ b/app/react/components/Tip/SliderTooltip/SliderTooltip.tsx
@@ -0,0 +1,42 @@
+import Tippy from '@tippyjs/react';
+import clsx from 'clsx';
+
+import 'tippy.js/dist/tippy.css';
+
+import styles from './SliderTooltip.module.css';
+
+export interface Props {
+  value: string;
+  child: React.ReactElement;
+  delay: number;
+  zIndex?: number;
+}
+
+export function SliderTooltip({ value, child, delay, zIndex = 50 }: Props) {
+  return (
+    <Tippy
+      appendTo="parent"
+      zIndex={zIndex} // make the z index lower than the dialog
+      className={clsx(styles.tooltipCentered, styles.tooltip)}
+      content={messageHTML(value)}
+      placement="top"
+      showOnCreate
+      hideOnClick={false}
+      trigger="manual"
+      delay={delay}
+      arrow
+      allowHTML
+    >
+      {child}
+    </Tippy>
+  );
+}
+
+function messageHTML(value: string) {
+  let message = value;
+  if (message === '0') {
+    message = 'unlimited';
+  }
+
+  return <div className={styles.tooltipContainer}>{message}</div>;
+}
diff --git a/app/react/components/Tip/SliderTooltip/index.ts b/app/react/components/Tip/SliderTooltip/index.ts
new file mode 100644
index 000000000..12e70a164
--- /dev/null
+++ b/app/react/components/Tip/SliderTooltip/index.ts
@@ -0,0 +1 @@
+export { SliderTooltip } from './SliderTooltip';
diff --git a/app/react/components/form-components/Slider/Slider.module.css b/app/react/components/form-components/Slider/Slider.module.css
index 6e453bb08..81e2c68f0 100644
--- a/app/react/components/form-components/Slider/Slider.module.css
+++ b/app/react/components/form-components/Slider/Slider.module.css
@@ -1,58 +1,40 @@
 .root {
-  margin: 0 25px;
-}
-
-.slider {
   padding-top: 50px;
 }
 
-.slider :global .rc-slider-handle {
+.root :global .rc-slider .rc-slider-handle-dragging {
+  @apply border-2 border-blue-8;
+}
+
+.root :global .rc-slider-dot {
+  display: none;
+}
+
+.root :global .rc-slider-handle {
   @apply border-2 border-blue-8;
   width: 24px;
   height: 24px;
   margin-top: -8px;
   border-radius: 16px;
-  cursor: pointer;
+  opacity: 1;
   background-color: #ffffff;
 }
 
-.slider :global .rc-slider-track {
+.root :global .rc-slider-track {
   @apply bg-blue-8;
+  height: 8px;
 }
 
-.slider :global .rc-slider-handle:after {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  width: 9px;
-  height: 9px;
-  background: #ffffff;
-  border-radius: 5px;
-  content: '';
+.root :global .rc-slider-rail {
+  height: 8px;
 }
 
-.slider :global .rc-slider-mark-text {
+.root :global .rc-slider-mark {
+  top: -28px;
+}
+
+.root :global .rc-slider-mark-text {
   font-size: 14px;
   color: var(--text-body-color);
-}
-
-.slider :global .rc-slider-tooltip-arrow {
-  bottom: 2px;
-  border-top-color: var(--bg-tooltip-color);
-}
-
-.slider :global .rc-slider-tooltip-placement-top {
-  padding: 6px 0px;
-}
-
-.slider :global .rc-slider-tooltip-inner {
-  font-size: 14px;
-  color: var(--text-tooltip-color);
-  height: fit-content;
-  background-color: var(--bg-tooltip-color);
-  box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%), 0 2px 10px 0 rgb(34 36 38 / 15%);
-  padding: 8px 12px;
-  text-align: center;
   user-select: none;
-  cursor: pointer;
 }
diff --git a/app/react/components/form-components/Slider/Slider.stories.tsx b/app/react/components/form-components/Slider/Slider.stories.tsx
index 1cd7da5bc..df6203142 100644
--- a/app/react/components/form-components/Slider/Slider.stories.tsx
+++ b/app/react/components/form-components/Slider/Slider.stories.tsx
@@ -28,7 +28,13 @@ function Template({
       max={max}
       step={step}
       value={sliderValue}
-      onChange={setSliderValue}
+      onChange={(value) => {
+        if (Array.isArray(value)) {
+          setSliderValue(value[0]);
+        } else {
+          setSliderValue(value);
+        }
+      }}
       dataCy={dataCy}
       visibleTooltip={visibleTooltip}
     />
diff --git a/app/react/components/form-components/Slider/Slider.tsx b/app/react/components/form-components/Slider/Slider.tsx
index a07d55409..ddc966fb1 100644
--- a/app/react/components/form-components/Slider/Slider.tsx
+++ b/app/react/components/form-components/Slider/Slider.tsx
@@ -1,5 +1,8 @@
+import { useCallback } from 'react';
 import RcSlider from 'rc-slider';
 
+import { SliderTooltip } from '@@/Tip/SliderTooltip';
+
 import styles from './Slider.module.css';
 import 'rc-slider/assets/index.css';
 
@@ -8,7 +11,7 @@ export interface Props {
   max: number;
   step: number;
   value: number;
-  onChange: (value: number) => void;
+  onChange: (value: number | number[]) => void;
   // true if you want to always show the tooltip
   dataCy: string;
   visibleTooltip?: boolean;
@@ -23,29 +26,33 @@ export function Slider({
   dataCy,
   visibleTooltip: visible,
 }: Props) {
-  const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
-  // if the tooltip is always visible, hide the marks when tooltip value gets close to the edges
   const marks = {
     [min]: visible && value / max < 0.1 ? '' : translateMinValue(min),
     [max]: visible && value / max > 0.9 ? '' : max.toString(),
   };
 
+  const sliderTooltip = useCallback(
+    (node, handleProps) => (
+      <SliderTooltip
+        value={translateMinValue(handleProps.value)}
+        child={node}
+        delay={0}
+      />
+    ),
+    []
+  );
+
   return (
     <div className={styles.root}>
-      <SliderWithTooltip
-        tipFormatter={translateMinValue}
+      <RcSlider
+        handleRender={sliderTooltip}
         min={min}
         max={max}
-        step={step}
         marks={marks}
-        defaultValue={value}
-        onAfterChange={onChange}
-        className={styles.slider}
-        tipProps={{ visible }}
-        railStyle={{ height: 8 }}
-        trackStyle={{ height: 8 }}
-        dotStyle={{ visibility: 'hidden' }}
+        step={step}
         data-cy={dataCy}
+        value={value}
+        onChange={onChange}
       />
     </div>
   );
diff --git a/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx b/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
index c4053f8de..13d8818e7 100644
--- a/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
+++ b/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
@@ -1,7 +1,10 @@
+import { useCallback } from 'react';
 import RcSlider from 'rc-slider';
 import clsx from 'clsx';
 import { Lock, XCircle, CheckCircle } from 'lucide-react';
 
+import { SliderTooltip } from '@@/Tip/SliderTooltip';
+
 import 'rc-slider/assets/index.css';
 
 import { Badge } from '../Badge';
@@ -13,7 +16,7 @@ export interface Props {
   max: number;
   step: number;
   value: number;
-  onChange(value: number): void;
+  onChange(value: number | number[]): void;
 }
 
 type Strength = 'weak' | 'good' | 'strong' | 'veryStrong';
@@ -44,8 +47,6 @@ const sliderProperties: Record<
   },
 };
 
-const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
-
 export function PasswordLengthSlider({
   min,
   max,
@@ -85,31 +86,32 @@ export function PasswordLengthSlider({
     }
   }
 
-  function handleChange(sliderValue: number) {
+  function handleChange(sliderValue: number | number[]) {
     onChange(sliderValue);
   }
 
+  const sliderTooltip = useCallback(
+    (node, handleProps) => (
+      <SliderTooltip
+        value={`${handleProps.value} characters`}
+        child={node}
+        delay={800}
+      />
+    ),
+    []
+  );
+
   return (
     <div className={clsx(styles.root, styles[sliderProps.strength])}>
       <div className="col-sm-4">
-        <SliderWithTooltip
-          tipFormatter={(value) => `${value} characters`}
+        <RcSlider
+          handleRender={sliderTooltip}
           min={min}
           max={max}
           step={step}
           defaultValue={12}
           value={value}
           onChange={handleChange}
-          handleStyle={{
-            height: 25,
-            width: 25,
-            borderWidth: 1.85,
-            borderColor: sliderProps.color,
-            top: 1.5,
-            boxShadow: 'none',
-          }}
-          railStyle={{ height: 10 }}
-          trackStyle={{ backgroundColor: sliderProps.color, height: 10 }}
         />
       </div>
 
diff --git a/package.json b/package.json
index 82a3d600d..d8436ab2f 100644
--- a/package.json
+++ b/package.json
@@ -136,7 +136,7 @@
     "mustache": "^4.2.0",
     "ng-file-upload": "~12.2.13",
     "parse-duration": "^1.0.2",
-    "rc-slider": "^9.7.5",
+    "rc-slider": "^10.0.0",
     "react": "^17.0.2",
     "react-datetime-picker": "^4.2.0",
     "react-dom": "^17.0.2",
diff --git a/yarn.lock b/yarn.lock
index 9ac79504b..e99a33c5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2139,7 +2139,7 @@
     core-js-pure "^3.19.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
   integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
@@ -2167,6 +2167,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.18.3":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.18.6":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
@@ -7392,7 +7399,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.x, classnames@^2.2.1, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
+classnames@^2.2.5, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -8668,11 +8675,6 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.11.tgz#79d5846c4f90eba3e617d9031e921de9324f84ed"
   integrity sha512-7X6GvzjYf4yTdRKuCVScV+aA9Fvh5r8WzWrXBH9w82ZWB/eYDMGCnazoC/YAqAzUJWHzLOnZqr46K3iEyUhUvw==
 
-dom-align@^1.7.0:
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.2.tgz#0f8164ebd0c9c21b0c790310493cd855892acd4b"
-  integrity sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg==
-
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -15693,65 +15695,22 @@ raw-loader@^4.0.2:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-rc-align@^4.0.0:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.11.tgz#8198c62db266bc1b8ef05e56c13275bf72628a5e"
-  integrity sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "2.x"
-    dom-align "^1.7.0"
-    lodash "^4.17.21"
-    rc-util "^5.3.0"
-    resize-observer-polyfill "^1.5.1"
-
-rc-motion@^2.0.0:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.4.4.tgz#e995d5fa24fc93065c24f714857cf2677d655bb0"
-  integrity sha512-ms7n1+/TZQBS0Ydd2Q5P4+wJTSOrhIrwNxLXCZpR7Fa3/oac7Yi803HDALc2hLAKaCTQtw9LmQeB58zcwOsqlQ==
-  dependencies:
-    "@babel/runtime" "^7.11.1"
-    classnames "^2.2.1"
-    rc-util "^5.2.1"
-
-rc-slider@^9.7.5:
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-9.7.5.tgz#193141c68e99b1dc3b746daeb6bf852946f5b7f4"
-  integrity sha512-LV/MWcXFjco1epPbdw1JlLXlTgmWpB9/Y/P2yinf8Pg3wElHxA9uajN21lJiWtZjf5SCUekfSP6QMJfDo4t1hg==
+rc-slider@^10.0.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.1.1.tgz#5e82036e60b61021aba3ea0e353744dd7c74e104"
+  integrity sha512-gn8oXazZISEhnmRinI89Z/JD/joAaM35jp+gDtIVSTD/JJMCCBqThqLk1SVJmvtfeiEF/kKaFY0+qt4SDHFUDw==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.5"
-    rc-tooltip "^5.0.1"
-    rc-util "^5.16.1"
-    shallowequal "^1.1.0"
+    rc-util "^5.27.0"
 
-rc-tooltip@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-5.1.1.tgz#94178ed162d0252bc4993b725f5dc2ac0fccf154"
-  integrity sha512-alt8eGMJulio6+4/uDm7nvV+rJq9bsfxFDCI0ljPdbuoygUscbsMYb6EQgwib/uqsXQUvzk+S7A59uYHmEgmDA==
+rc-util@^5.27.0:
+  version "5.28.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.28.0.tgz#9e5e441d5875b8bf0ba56c2f295042a28dcff580"
+  integrity sha512-KYDjhGodswVj29v0TRciKTqRPgumIFvFDndbCD227pitQ+0Cei196rxk+OXb/blu6V8zdTRK5RjCJn+WmHLvBA==
   dependencies:
-    "@babel/runtime" "^7.11.2"
-    rc-trigger "^5.0.0"
-
-rc-trigger@^5.0.0:
-  version "5.2.10"
-  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.2.10.tgz#8a0057a940b1b9027eaa33beec8a6ecd85cce2b1"
-  integrity sha512-FkUf4H9BOFDaIwu42fvRycXMAvkttph9AlbCZXssZDVzz2L+QZ0ERvfB/4nX3ZFPh1Zd+uVGr1DEDeXxq4J1TA==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    classnames "^2.2.6"
-    rc-align "^4.0.0"
-    rc-motion "^2.0.0"
-    rc-util "^5.5.0"
-
-rc-util@^5.16.1, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0:
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.17.0.tgz#6b0788038075c3d5c215541539573a4a03827070"
-  integrity sha512-HWuTIKzBeZQQ7IBqdokE0wMp/xx39/KfUJ0gcquBigoldDCrf3YBcWFHrrQlJG7sI82Wg8mwp1uAKV3zMGfAgg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+    "@babel/runtime" "^7.18.3"
     react-is "^16.12.0"
-    shallowequal "^1.1.0"
 
 react-calendar@^4.0.0:
   version "4.0.0"
@@ -16450,11 +16409,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"