├── .github
    └── ISSUE_TEMPLATE
    │   └── bug-or-a-feature-request.md
├── .gitignore
├── .nvmrc
├── .vscode
    └── settings.json
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── cypress.config.ts
├── cypress
    ├── e2e
    │   └── animate-height.cy.js
    └── support
    │   └── e2e.js
├── docs
    ├── auto-height.tsx
    ├── docs.css
    ├── docs.js
    ├── docs.js.map
    ├── docs.tsx
    └── index.html
├── package-lock.json
├── package.json
├── server-render-test.js
├── src
    └── index.tsx
├── test.js
├── test
    ├── index.html
    ├── test.css
    └── test.tsx
├── tsconfig-base.json
├── tsconfig-cjs.json
├── tsconfig-demo.json
└── tsconfig.json


/.github/ISSUE_TEMPLATE/bug-or-a-feature-request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug or a Feature Request
 3 | about: Create a report to help us improve AnimateHeight
 4 | 
 5 | ---
 6 | 
 7 | <!--- Provide a general summary of the issue in the Title above -->
 8 | 
 9 | **Code example**
10 | <!--- Please create a live example of the unexpected behavior on https://codesandbox.io/ -->
11 | 
12 | **Expected behavior**
13 | <!--- If describing a bug, tell us what happens instead of the expected behavior -->
14 | <!--- If suggesting a change/improvement, explain the difference from current behavior -->
15 | 
16 | **Possible Solution**
17 | <!--- Not obligatory, but suggest a fix/reason for the bug, -->
18 | <!--- or ideas how to implement the addition or change -->
19 | 
20 | **Steps to Reproduce (for bugs)**
21 | <!--- Provide a link to a live example, or an unambiguous set of steps to -->
22 | <!--- reproduce this bug. Include code to reproduce, if relevant -->
23 | 1.
24 | 2.
25 | 3.
26 | 4.
27 | 
28 | **Screenshots**
29 | <!-- If applicable, add screenshots to help explain your problem. -->
30 | 
31 | **Your Environment**
32 |  - Version used: 
33 |  - OS: 
34 |  - Browser 
35 |  - Version
36 | 
37 | **Additional context**
38 | <!--- How has this issue affected you? What are you trying to accomplish? -->
39 | <!--- Providing context helps us come up with a solution that is most useful in the real world -->
40 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
2 | node_modules
3 | *.log*
4 | _nogit
5 | lib
6 | dist
7 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v20.4.0
2 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.formatOnSave": true,
3 |   "cSpell.words": []
4 | }
5 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | ### v3.2.3
  4 | 
  5 | 10.11.2023.
  6 | 
  7 | **Added**
  8 | 
  9 | - Added prop to disable `display: none` when height is set to zero [#16](https://github.com/Stanko/react-animate-height/issues/16).
 10 | 
 11 | ---
 12 | 
 13 | ### v3.2.1, v3.2.2
 14 | 
 15 | 11.07.2022.
 16 | 
 17 | **Fixed**
 18 | 
 19 | - Added `"type": "module"` to the package.json [#143](https://github.com/Stanko/react-animate-height/issues/143) and hopefully fixed all import/require shenanigans.
 20 | 
 21 | ---
 22 | 
 23 | ### v3.2.0
 24 | 
 25 | 10.07.2022.
 26 | 
 27 | **Added**
 28 | 
 29 | - Added "ref" and "contentRef" props.
 30 | - Added `<AutoHeight>` example.
 31 | 
 32 | **Fixed**
 33 | 
 34 | - Removed two `package.json` files to resolve issue with Webpack Module Federation [#140](https://github.com/Stanko/react-animate-height/issues/140)
 35 | 
 36 | ---
 37 | 
 38 | ### v3.1.2
 39 | 
 40 | 05.07.2022.
 41 | 
 42 | **Fixed**
 43 | 
 44 | - Added version to two `package.json` files to resolve issue with Webpack Module Federation [#140](https://github.com/Stanko/react-animate-height/issues/140)
 45 | 
 46 | ---
 47 | 
 48 | ### v3.1.1
 49 | 
 50 | 21.02.2022.
 51 | 
 52 | **Fixed**
 53 | 
 54 | - Replaced `__rest` shim to avoid rollup warnings [#136](https://github.com/Stanko/react-animate-height/issues/136)
 55 | 
 56 | ---
 57 | 
 58 | ### v3.1.0
 59 | 
 60 | 15.11.2022.
 61 | 
 62 | **Changed**
 63 | 
 64 | - Dropped `classnames` dependency, thanks Davey [#135](https://github.com/Stanko/react-animate-height/issues/135)
 65 | 
 66 | ---
 67 | 
 68 | ### v3.0.5
 69 | 
 70 | 15.11.2022.
 71 | 
 72 | **Changed**
 73 | 
 74 | - TypeScript definitions are now exported.
 75 | 
 76 | ---
 77 | 
 78 | ### v3.0.4
 79 | 
 80 | 19.06.2022.
 81 | 
 82 | **Fixed**
 83 | 
 84 | - Fixed [#129](https://github.com/Stanko/react-animate-height/issues/129) by swapping ESM module target from `esnext` to `ES2015` (aka `es6`).
 85 | 
 86 | ---
 87 | 
 88 | ### v3.0.0-v3.0.3
 89 | 
 90 | 31.05.2022.
 91 | 
 92 | **Changed**
 93 | 
 94 | - Rewritten to hooks
 95 | - Switched to TypeScript
 96 | - Callback names changed
 97 |   - `onAnimationStart` -> `onHeightAnimationStart`
 98 |   - `onAnimationEnd` -> `onHeightAnimationEnd`
 99 | - Switched back to a short timeout instead of requestAnimationFrame for starting the animation
100 | 
101 | ---
102 | 
103 | ### v2.1.1, v2.1.2
104 | 
105 | 12.04.2022.
106 | 
107 | **Added**
108 | 
109 | - Added check for `prefers-reduced-motion` and disabled animations if it is set to `true` - [#124](https://github.com/Stanko/react-animate-height/issues/124)
110 | 
111 | ---
112 | 
113 | ### v2.1.0
114 | 
115 | 12.04.2022.
116 | 
117 | **Fixed**
118 | 
119 | - Fixed component not working with React 18 and StrictMode - [#123](https://github.com/Stanko/react-animate-height/issues/123)
120 | 
121 | ---
122 | 
123 | ### v2.0.23
124 | 
125 | 01.08.2020.
126 | 
127 | **Added**
128 | 
129 | - Added "id" and "aria-hidden" props.
130 | - Added section about accessibility in the readme.
131 | 
132 | ---
133 | 
134 | ### v2.0.22
135 | 
136 | 15.07.2020.
137 | 
138 | **Added**
139 | 
140 | - Added "engines" to `package.json` - [#91](https://github.com/Stanko/react-animate-height/issues/91)
141 | 
142 | ---
143 | 
144 | ### v2.0.21
145 | 
146 | 18.04.2020.
147 | 
148 | **Updated**
149 | 
150 | - Updated the readme with the specific flex box usecase - [#89](https://github.com/Stanko/react-animate-height/issues/89)
151 | 
152 | ---
153 | 
154 | ### v2.0.18, v2.0.19 and v2.0.20
155 | 
156 | 23.12.2019. and 17.01.2020.
157 | 
158 | **Fixed**
159 | 
160 | - Fixed TS types - [#88](https://github.com/Stanko/react-animate-height/issues/88)
161 | 
162 | ---
163 | 
164 | ### v2.0.17
165 | 
166 | 09.11.2019.
167 | 
168 | **Fixed**
169 | 
170 | - Fixed TS types to include `HTMLAttributes<HTMLDivElement>` [#86](https://github.com/Stanko/react-animate-height/issues/86)
171 | 
172 | ---
173 | 
174 | ### v2.0.16
175 | 
176 | 08.10.2019.
177 | 
178 | **Fixed**
179 | 
180 | - Request animation frame is now cleared on unmount
181 | 
182 | ---
183 | 
184 | ### v2.0.14-v2.0.15
185 | 
186 | 18.06.2019.
187 | 
188 | **Fixed**
189 | 
190 | - Reverted back changes, which led to a broken build.
191 | 
192 | ---
193 | 
194 | ### v2.0.10-v2.0.13
195 | 
196 | 17.06.2019.
197 | 
198 | **Fixed**
199 | 
200 | - Package now works as a ESM module [#73](https://github.com/Stanko/react-animate-height/issues/73).
201 | 
202 | ---
203 | 
204 | ### v2.0.9
205 | 
206 | 16.05.2019.
207 | 
208 | **Fixed**
209 | 
210 | - Improved prop types for `height` prop.
211 | 
212 | ---
213 | 
214 | ### v2.0.8
215 | 
216 | 16.03.2019.
217 | 
218 | **Fixed**
219 | 
220 | - Fixed type definitions [#68](https://github.com/Stanko/react-animate-height/issues/68).
221 | 
222 | ---
223 | 
224 | ### v2.0.7
225 | 
226 | 12.11.2018.
227 | 
228 | **Added**
229 | 
230 | - Added param to `onAnimationStart` and `onAnimationEnd` callbacks, it is a object containing `newHeight` value in pixels.
231 | 
232 | ---
233 | 
234 | ### v2.0.6
235 | 
236 | 03.10.2018.
237 | 
238 | **Changed**
239 | 
240 | - Removed `@types/react` from `optionalDependencies` [#62](https://github.com/Stanko/react-animate-height/issues/62).
241 | 
242 | ---
243 | 
244 | ### v2.0.5
245 | 
246 | 26.09.2018.
247 | 
248 | **Fixed**
249 | 
250 | - Fixed [#61](https://github.com/Stanko/react-animate-height/issues/61) - omitted `onAnimationStart` and `onAnimationEnd` from being passed to the DOM element directly.
251 | 
252 | ---
253 | 
254 | ### v2.0.4
255 | 
256 | 15.08.2018.
257 | 
258 | **Refactored**
259 | 
260 | - Added `isPercentage` helper function.
261 | 
262 | ---
263 | 
264 | ### v2.0.3
265 | 
266 | 12.07.2018.
267 | 
268 | **Fixed**
269 | 
270 | - Fixed small bug introduced with 2.0.0 - In `componentDidMount`, `this.state` was used instead of `prevState`
271 | - Content is not being hidden if set height is `auto`
272 | 
273 | ---
274 | 
275 | ### v2.0.2
276 | 
277 | 11.07.2018.
278 | 
279 | **Fixed**
280 | 
281 | - Fixed type script definitions file
282 | 
283 | ---
284 | 
285 | ### v2.0.0 and v2.0.1
286 | 
287 | 20.05.2018.
288 | 
289 | **Changed**
290 | 
291 | - Replaced `componentWillReceiveProps` by `componentDidUpdate` to address changes introduces with React v16.3
292 | 
293 | ---
294 | 
295 | ### v1.0.4
296 | 
297 | 20.05.2018.
298 | 
299 | **Changed**
300 | 
301 | - Enabled react v16.3+ in peer dependencies until react-animate-height v2 is out
302 | 
303 | ---
304 | 
305 | ### v1.0.3
306 | 
307 | 20.05.2018.
308 | 
309 | **Changed**
310 | 
311 | - Moved helpers outside of component to make component lighter
312 | - Updated few dependencies
313 | 
314 | ---
315 | 
316 | ### v1.0.2
317 | 
318 | 21.04.2018.
319 | 
320 | **Added**
321 | 
322 | - Added `delay` prop, kudos to @quagliero [#51](https://github.com/Stanko/react-animate-height/pull/51)
323 | - Changelog
324 | 
325 | ---
326 | 
327 | ### v1.0.1
328 | 
329 | 30.03.2018.
330 | 
331 | **Fixed**
332 | 
333 | - `animateOpacity` prop was passed directly to the `div` element, omitted it
334 | 
335 | ---
336 | 
337 | ### v1.0.0
338 | 
339 | 30.03.2018.
340 | 
341 | **Added**
342 | 
343 | - `animateOpacity` prop which fades content in or out depending on animation direction
344 | 
345 | **Changed**
346 | 
347 | - Removed unused vendor prefixes for `translate`
348 | 
349 | ---
350 | 
351 | For changes prior version 1.0.0 please check the [commit list](https://github.com/Stanko/react-animate-height/commits/master).
352 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 - today Stanko Tadić
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Animate Height
  2 | 
  3 | [![npm version](https://img.shields.io/npm/v/react-animate-height.svg?style=flat-square)](https://www.npmjs.com/package/react-animate-height)
  4 | [![npm downloads](https://img.shields.io/npm/dm/react-animate-height.svg?style=flat-square)](https://www.npmjs.com/package/react-animate-height)
  5 | 
  6 | No dependencies React component for animating height using CSS transitions.
  7 | Slide an element up and down or animate it to any specific height.
  8 | Content's opacity can be optionally animated as well (check `animateOpacity` prop bellow).
  9 | 
 10 | CSS classes are applied in specific animation states, check `animationStateClasses` prop.
 11 | 
 12 | [Changelog](CHANGELOG.md)
 13 | 
 14 | ### Version 3
 15 | 
 16 | This is version 3.x branch, rewritten to hooks, which means you'll need React version 16.8 or newer.
 17 | 
 18 | For version 2.x, check [v2 branch](https://github.com/Stanko/react-animate-height/tree/v2)
 19 | 
 20 | #### Breaking changes:
 21 | 
 22 | - Callback names changed (to avoid clashing with the native ones):
 23 |   - `onAnimationStart` -> `onHeightAnimationStart`
 24 |   - `onAnimationEnd` -> `onHeightAnimationEnd`
 25 | 
 26 | ## Demo
 27 | 
 28 | Live demo: [muffinman.io/react-animate-height](https://muffinman.io/react-animate-height/)
 29 | 
 30 | Because multiple people asked how to animate list items, I created this [simple example](https://codesandbox.io/s/react-animated-list-example-made-using-react-animate-height-je9q1) for that as well.
 31 | 
 32 | To build the examples locally, run:
 33 | 
 34 | ```
 35 | npm install
 36 | npm start
 37 | ```
 38 | 
 39 | Then open [`http://127.0.0.1:8000/`](http://127.0.0.1:8000/) in your browser of choice browser.
 40 | 
 41 | Or play with this [sandbox](https://codesandbox.io/s/react-animate-height-v3-basic-example-ix6c5v).
 42 | 
 43 | ## Quick start
 44 | 
 45 | Get it from npm
 46 | 
 47 | ```
 48 | $ npm install --save react-animate-height
 49 | ```
 50 | 
 51 | Import and use it in your React app.
 52 | 
 53 | ```jsx
 54 | import React, { useState } from 'react';
 55 | import AnimateHeight from 'react-animate-height';
 56 | 
 57 | const Example = () => {
 58 |   const [height, setHeight] = useState(0);
 59 | 
 60 |   return (
 61 |     <div>
 62 |       <button
 63 |         aria-expanded={height !== 0}
 64 |         aria-controls="example-panel"
 65 |         onClick={() => setHeight(height === 0 ? 'auto' : 0)}
 66 |       >
 67 |         {height === 0 ? 'Open' : 'Close'}
 68 |       </button>
 69 | 
 70 |       <AnimateHeight
 71 |         id="example-panel"
 72 |         duration={500}
 73 |         height={height} // see props documentation below
 74 |       >
 75 |         <h1>Your content goes here</h1>
 76 |         <p>Put as many React or HTML components here.</p>
 77 |       </AnimateHeight>
 78 |     </div>
 79 |   );
 80 | };
 81 | ```
 82 | 
 83 | ### Props
 84 | 
 85 | - **height**: numeric or percentage value (ie. `'50%'`) or `'auto'`, required
 86 | 
 87 |   When changed, element height will be animated to that height.<br/>
 88 |   To slide up use <code>0</code>, for slide down use <code>'auto'</code>
 89 | 
 90 | - **duration**: integer, default: `500`
 91 | 
 92 |   Duration of the animation in milliseconds
 93 | 
 94 | - **delay**: integer, default: `0`
 95 | 
 96 |   Animation delay in milliseconds
 97 | 
 98 | - **easing**: string, default: `'ease'`
 99 | 
100 |   CSS easing function to be applied to the animation
101 | 
102 | - **id**: string
103 | 
104 |   HTML `id` attribute.
105 | 
106 | - **className**: string
107 | 
108 |   CSS class to be applied to the element
109 | 
110 |   **Please note that you shouldn't apply properties that are messing with the layout (like `display`, `height`...), as these might break height calculations**
111 | 
112 | - **ref**: `React.MutableRefObject<HTMLDivElement | null>`
113 | 
114 |   Reference to the main div element.
115 | 
116 |   ```tsx
117 |     const wrapperDiv = useRef<HTMLDivElement | null>(null);
118 | 
119 |     <AnimateHeight ref={wrapperDiv}>
120 |   ```
121 | 
122 | - **contentRef**: `React.MutableRefObject<HTMLDivElement | null>`
123 | 
124 |   Reference to the content div element.
125 | 
126 |   ```tsx
127 |     const contentDiv = useRef<HTMLDivElement | null>(null);
128 | 
129 |     <AnimateHeight contentRef={contentDiv}>
130 |   ```
131 | 
132 | - **style**: object
133 | 
134 |   CSS style object, it will be merged with inline styles of the component
135 | 
136 |   **Please note that you shouldn't apply properties that are messing with the layout (`display`, `height` are omitted from the type already), as these might break height calculations**
137 | 
138 | - **contentClassName**: string
139 | 
140 |   CSS class to be applied to content wrapper element
141 | 
142 |   **Please note that you shouldn't apply properties that are messing with the layout (like `display`, `height`...), as these might break height calculations**
143 | 
144 | - **animationStateClasses**: object
145 | 
146 |   Object containing CSS class names for animation states, default:
147 | 
148 |   ```
149 |   {
150 |     animating:                  'rah-animating',
151 |     animatingUp:                'rah-animating--up',
152 |     animatingDown:              'rah-animating--down',
153 |     static:                     'rah-static',
154 |     animatingToHeightZero:      'rah-animating--to-height-zero',
155 |     animatingToHeightAuto:      'rah-animating--to-height-auto',
156 |     animatingToHeightSpecific:  'rah-animating--to-height-specific',
157 |     staticHeightZero:           'rah-static--height-zero',
158 |     staticHeightAuto:           'rah-static--height-auto',
159 |     staticHeightSpecific:       'rah-static--height-specific',
160 |   }
161 |   ```
162 | 
163 |   Please note that this one will be merged with the default object and cached when component is created,
164 |   so changing it afterwards will have no effect.
165 | 
166 | - **onHeightAnimationStart**: function
167 | 
168 |   Callback which will be called when animation starts.
169 | 
170 |   This first argument passed to this callback is an object containing `newHeight`, the pixel value of the height at which the animation will end.
171 | 
172 | - **onHeightAnimationEnd**: function
173 | 
174 |   Callback which will be called when animation ends.
175 | 
176 |   This first argument passed to this callback is an object containing `newHeight`, the pixel value of the height at which the animation ended.
177 | 
178 | - **applyInlineTransitions**: boolean, default: `true`
179 | 
180 |   If this flag is set to `false` only CSS classes will be applied to the element and inline
181 |   transition styles will not be present.
182 | 
183 | - **animateOpacity**: boolean, default: `false`
184 | 
185 |   If set to `true` content will fade-in (and fade-out) while height is animated.
186 | 
187 | - **aria-hidden**: boolean
188 | 
189 |   By default, library will set `aria-hidden` to `true` when height is zero. If you wish to override it, you can pass the prop yourself.
190 | 
191 | - **disableDisplayNone**: boolean, default: `false`
192 | 
193 |   By default, library will set `display: none` when height is zero. This prop allows you to disable that behavior and handle it yourself. It is useful when using [auto height](#user-content-animate-height-on-content-change), check [this issue](https://github.com/Stanko/react-animate-height/issues/16) for more info. Please be careful not to break accessibility when using this prop.
194 | 
195 | Additional props will be passed to the wrapper div, to make adding attrs like `aria-*` easier.
196 | 
197 | ## Accessibility
198 | 
199 | Library will hide the content using `display: hidden` when height props is 0. It will also apply `aria-hidden="true"` in the same case, but you can override it by passing `aria-hidden` prop yourself.
200 | 
201 | When using a button to toggle height, make sure you add `aria-expanded` and `aria-controls` to make everything accessible. Here's an example:
202 | 
203 | ```jsx
204 | <button
205 |   aria-expanded={ height !== 0 }
206 |   aria-controls="example-panel" // it has to match the id passed to AnimateHeight
207 |   onClick={ toggleHeight } // your click handler that toggles height
208 |   // ... all other props
209 | >
210 |   Toggle
211 | </button>
212 | 
213 | <AnimateHeight id="example-panel">
214 |   Content
215 | </AnimateHeight>
216 | ```
217 | 
218 | ### Reduced motion
219 | 
220 | Component checks for `prefers-reduced-motion` on start and disables animations if it is set to true. Please note that component doesn't listen for potential changes of `prefers-reduced-motion` option.
221 | 
222 | ## Animate height on content change
223 | 
224 | It is not built in, but you can use `AnimateHeight` and [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to automatically animate height on content change. I created a small example for you here:
225 | 
226 | - [Source code](./docs/auto-height.tsx)
227 | - [Demo](https://muffinman.io/react-animate-height/#demo-3)
228 | 
229 | ## Gotchas
230 | 
231 | ### Collapsing margins
232 | 
233 | While it is animating, component has `overflow: hidden`. When the animation is finished and height is set to "auto", `overflow: hidden` is removed. At that moment, any margins you have on the content inside `AnimateHeight` will collapse, causing content to "jump". To avoid this, just use padding inside the `AnimateHeight` instead of margins.
234 | 
235 | ### Bounded flexboxes
236 | 
237 | If `AnimateHeight` is a flex child and it's parent has a fixed height, animation won't work.
238 | To fix this, you just need to add the following CSS rule to the `AnimateHeight` instance.
239 | 
240 | ```css
241 | flex-shrink: 0;
242 | ```
243 | 
244 | You can do it by passing a `className` or directly in the `style` prop
245 | 
246 | ```jsx
247 | <AnimateHeight style={{flexShrink: 0}}>
248 | ```
249 | 
250 | Check the [issue #89](https://github.com/Stanko/react-animate-height/issues/89) for the example and more details.
251 | 
252 | ## License
253 | 
254 | [MIT](https://github.com/Stanko/react-animate-height/blob/master/LICENSE)
255 | 


--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'cypress';
2 | 
3 | export default defineConfig({
4 |   video: false,
5 |   screenshotOnRunFailure: false,
6 |   e2e: {},
7 | });
8 | 


--------------------------------------------------------------------------------
/cypress/e2e/animate-height.cy.js:
--------------------------------------------------------------------------------
  1 | const ANIMATION_STARTED_TIME = 100;
  2 | const ANIMATION_FINISHED_TIME = 500;
  3 | 
  4 | describe('React AnimateHeight', function () {
  5 |   Cypress.on('window:before:load', (win) => {
  6 |     cy.spy(win.console, 'warn');
  7 |   });
  8 | 
  9 |   it('Animates content to correct height and applies accessibility properties', function () {
 10 |     cy.visit('http://localhost:8080');
 11 | 
 12 |     cy.window().then((win) => {
 13 |       let element;
 14 |       let nativeElement;
 15 |       let contentElement;
 16 | 
 17 |       // Animate to auto
 18 |       function toAuto() {
 19 |         cy.get('#test-1-auto').click();
 20 | 
 21 |         cy.wait(ANIMATION_STARTED_TIME).then(() => {
 22 |           contentElement = cy.get('#test-1 > div');
 23 |           contentElement.invoke('css', 'height').then((contentHeight) => {
 24 |             element = cy.get('#test-1');
 25 |             element.should('have.css', 'height', contentHeight);
 26 |           });
 27 |         });
 28 | 
 29 |         cy.wait(ANIMATION_FINISHED_TIME).then(() => {
 30 |           contentElement = cy.get('#test-1 > div');
 31 |           contentElement.invoke('css', 'height').then((contentHeight) => {
 32 |             cy.expect(nativeElement.style.height).to.equal('auto');
 33 |             cy.expect(nativeElement.getAttribute('aria-hidden')).to.equal(
 34 |               'false'
 35 |             );
 36 | 
 37 |             element = cy.get('#test-1');
 38 |             element.should('have.css', 'height', contentHeight);
 39 | 
 40 |             contentElement.should('have.css', 'display', 'block');
 41 |           });
 42 |         });
 43 |       }
 44 | 
 45 |       // Animate to zero
 46 |       function toZero() {
 47 |         cy.get('#test-1-0').click();
 48 | 
 49 |         cy.wait(ANIMATION_STARTED_TIME).then(() => {
 50 |           element = cy.get('#test-1');
 51 |           element.should('have.css', 'height', '0px');
 52 |         });
 53 | 
 54 |         cy.wait(ANIMATION_FINISHED_TIME).then(() => {
 55 |           cy.expect(nativeElement.style.height).to.equal('0px');
 56 | 
 57 |           cy.expect(nativeElement.getAttribute('aria-hidden')).to.equal('true');
 58 | 
 59 |           element = cy.get('#test-1');
 60 |           element.should('have.css', 'height', '0px');
 61 | 
 62 |           contentElement = cy.get('#test-1 > div');
 63 |           contentElement.should('have.css', 'display', 'none');
 64 |         });
 65 |       }
 66 | 
 67 |       // Animate to specific
 68 |       function toSpecific() {
 69 |         cy.get('#test-1-100').click();
 70 | 
 71 |         cy.wait(ANIMATION_STARTED_TIME).then(() => {
 72 |           element = cy.get('#test-1');
 73 |           element.should('have.css', 'height', '100px');
 74 |         });
 75 | 
 76 |         cy.wait(ANIMATION_FINISHED_TIME).then(() => {
 77 |           cy.expect(nativeElement.style.height).to.equal('100px');
 78 | 
 79 |           cy.expect(nativeElement.getAttribute('aria-hidden')).to.equal(
 80 |             'false'
 81 |           );
 82 | 
 83 |           element = cy.get('#test-1');
 84 |           element.should('have.css', 'height', '100px');
 85 | 
 86 |           contentElement = cy.get('#test-1 > div');
 87 |           contentElement.should('have.css', 'display', 'block');
 88 |         });
 89 |       }
 90 | 
 91 |       // Animate to percentage height
 92 |       function toPercentage() {
 93 |         cy.get('#test-1-50percent').click();
 94 | 
 95 |         cy.wait(ANIMATION_STARTED_TIME).then(() => {
 96 |           element = cy.get('#test-1');
 97 |           element.should('have.css', 'height', '250px');
 98 |         });
 99 | 
100 |         cy.wait(ANIMATION_FINISHED_TIME).then(() => {
101 |           cy.expect(nativeElement.style.height).to.equal('50%');
102 | 
103 |           cy.expect(nativeElement.getAttribute('aria-hidden')).to.equal(
104 |             'false'
105 |           );
106 | 
107 |           element = cy.get('#test-1');
108 |           element.should('have.css', 'height', '250px');
109 | 
110 |           contentElement = cy.get('#test-1 > div');
111 |           contentElement.should('have.css', 'display', 'block');
112 |         });
113 |       }
114 | 
115 |       cy.get('#test-1').then((cyElement) => {
116 |         nativeElement = cyElement[0];
117 | 
118 |         element = cy.get('#test-1');
119 |         element.should('have.css', 'height', '0px');
120 | 
121 |         contentElement = cy.get('#test-1 > div');
122 | 
123 |         toAuto();
124 |         toZero();
125 |         toSpecific();
126 |         toZero();
127 |         toPercentage();
128 |         toZero();
129 |       });
130 |     });
131 |   });
132 | 
133 |   it('Applies CSS classes', function () {
134 |     cy.visit('http://localhost:8080');
135 | 
136 |     cy.window().then((win) => {
137 |       let element;
138 | 
139 |       // Animate to auto
140 |       function toAuto() {
141 |         cy.get('#test-1-auto').click();
142 | 
143 |         cy.wait(ANIMATION_STARTED_TIME).then(() => {
144 |           element = cy.get('#test-1');
145 | 
146 |           element.should('have.class', 'rah-animating');
147 |         });
148 | 
149 |         cy.wait(ANIMATION_FINISHED_TIME).then(() => {
150 |           element = cy.get('#test-1');
151 | 
152 |           element.should('have.class', 'rah-static');
153 |           element.should('have.class', 'rah-static--height-auto');
154 |         });
155 |       }
156 | 
157 |       // Animate to zero
158 |       function toZero() {
159 |         cy.get('#test-1-0').click();
160 | 
161 |         cy.wait(ANIMATION_STARTED_TIME).then(() => {
162 |           element = cy.get('#test-1');
163 | 
164 |           element.should('have.class', 'rah-animating');
165 |           element.should('have.class', 'rah-animating--up');
166 |         });
167 | 
168 |         cy.wait(ANIMATION_FINISHED_TIME).then(() => {
169 |           element = cy.get('#test-1');
170 | 
171 |           element.should('have.class', 'rah-static');
172 |         });
173 |       }
174 | 
175 |       // Animate to specific
176 |       function toSpecific(from) {
177 |         cy.get('#test-1-100').click();
178 | 
179 |         cy.wait(ANIMATION_STARTED_TIME).then(() => {
180 |           element = cy.get('#test-1');
181 | 
182 |           element.should('have.class', 'rah-animating');
183 |           element.should(
184 |             'have.class',
185 |             `rah-animating--${from === 'auto' ? 'up' : 'down'}`
186 |           );
187 |           element.should('have.class', 'rah-animating--to-height-specific');
188 |         });
189 | 
190 |         cy.wait(ANIMATION_FINISHED_TIME).then(() => {
191 |           element = cy.get('#test-1');
192 | 
193 |           element.should('have.class', 'rah-static');
194 |           element.should('have.class', 'rah-static--height-specific');
195 |         });
196 |       }
197 | 
198 |       toAuto();
199 |       toZero();
200 |       toSpecific(0);
201 |       toZero();
202 |       toAuto();
203 |       toSpecific('auto');
204 |     });
205 |   });
206 | 
207 |   it('Executes callbacks', function () {
208 |     cy.visit('http://localhost:8080');
209 |     cy.window().then((win) => {
210 |       // Enable callbacks
211 |       cy.get('#test-1-toggle-callbacks').click();
212 | 
213 |       // To auto
214 |       cy.get('#test-1-auto').click();
215 | 
216 |       cy.wait(ANIMATION_STARTED_TIME).then(() => {
217 |         cy.expect(win.console.warn).to.have.callCount(1);
218 |       });
219 | 
220 |       cy.wait(ANIMATION_FINISHED_TIME).then(() => {
221 |         cy.expect(win.console.warn).to.have.callCount(2);
222 |       });
223 | 
224 |       // To zero
225 |       cy.get('#test-1-0').click();
226 | 
227 |       cy.wait(ANIMATION_STARTED_TIME).then(() => {
228 |         cy.expect(win.console.warn).to.have.callCount(3);
229 |       });
230 | 
231 |       cy.wait(ANIMATION_FINISHED_TIME).then(() => {
232 |         cy.expect(win.console.warn).to.have.callCount(4);
233 | 
234 |         // Disable callbacks
235 |         cy.get('#test-1-toggle-callbacks').click();
236 |       });
237 |     });
238 |   });
239 | });
240 | 


--------------------------------------------------------------------------------
/cypress/support/e2e.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | 
18 | // Alternatively you can use CommonJS syntax:
19 | // require('./commands')
20 | 


--------------------------------------------------------------------------------
/docs/auto-height.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useState, useEffect } from 'react';
 2 | import AnimateHeight, { Height } from '../src/index';
 3 | 
 4 | const AutoHeight = ({ children, ...props }) => {
 5 |   const [height, setHeight] = useState<Height>('auto');
 6 |   const contentDiv = useRef<HTMLDivElement | null>(null);
 7 | 
 8 |   useEffect(() => {
 9 |     const element = contentDiv.current as HTMLDivElement;
10 | 
11 |     const resizeObserver = new ResizeObserver(() => {
12 |       setHeight(element.clientHeight);
13 |     });
14 | 
15 |     resizeObserver.observe(element);
16 | 
17 |     return () => resizeObserver.disconnect();
18 |   }, []);
19 | 
20 |   return (
21 |     <AnimateHeight
22 |       {...props}
23 |       height={height}
24 |       contentClassName="auto-content"
25 |       contentRef={contentDiv}
26 |       disableDisplayNone
27 |     >
28 |       {children}
29 |     </AnimateHeight>
30 |   );
31 | };
32 | 
33 | export default AutoHeight;
34 | 


--------------------------------------------------------------------------------
/docs/docs.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background: #fdfdfd;
  3 | }
  4 | 
  5 | a,
  6 | a:active,
  7 | a:visited,
  8 | a:focus {
  9 |   color: #e9463f;
 10 |   border-bottom: 1px solid transparent;
 11 | }
 12 | 
 13 | a:hover {
 14 |   color: #111;
 15 |   border-bottom-color: #111;
 16 | }
 17 | 
 18 | h2 {
 19 |   margin-top: 1.5em;
 20 |   color: #e9463f;
 21 | }
 22 | 
 23 | h3,
 24 | h4 {
 25 |   margin: 4em 0 1em;
 26 |   font-weight: 500;
 27 |   color: #333;
 28 | }
 29 | 
 30 | .header {
 31 |   border-bottom: 1px solid #ddd;
 32 |   margin-bottom: 20px;
 33 |   background: #fff;
 34 |   padding: 20px 0;
 35 | }
 36 | 
 37 | .content {
 38 |   position: relative;
 39 |   margin: 0 auto;
 40 |   padding: 0 20px;
 41 |   max-width: 840px;
 42 | }
 43 | 
 44 | .buttons button {
 45 |   margin-right: 5px;
 46 |   transition: all 0.1s;
 47 |   background: #111;
 48 |   cursor: pointer;
 49 | }
 50 | 
 51 | .buttons button:hover {
 52 |   background: darken(#e9463f, 20);
 53 | }
 54 | 
 55 | .buttons button:focus {
 56 |   outline: none;
 57 | }
 58 | 
 59 | .buttons button:focus-visible {
 60 |   outline: 1px solid #333;
 61 |   outline-offset: 2px;
 62 | }
 63 | 
 64 | .demo-content {
 65 |   padding: 20px 20px 0;
 66 |   background: #fff;
 67 | }
 68 | 
 69 | .demo {
 70 |   outline: 2px solid #ddd;
 71 | }
 72 | 
 73 | .demo-3-content {
 74 |   padding: 20px;
 75 | }
 76 | 
 77 | .demo-3-image {
 78 |   display: block;
 79 | }
 80 | 
 81 | .demo-4 {
 82 |   margin-bottom: 100px;
 83 | }
 84 | 
 85 | .demo-4-wrapper {
 86 |   height: 500px;
 87 | }
 88 | 
 89 | .btn-selected {
 90 |   position: relative;
 91 | }
 92 | 
 93 | .btn-selected::before {
 94 |   content: '▼';
 95 |   color: black;
 96 |   position: absolute;
 97 |   bottom: 90%;
 98 |   left: 50%;
 99 |   transform: translateX(-50%);
100 | }
101 | 


--------------------------------------------------------------------------------
/docs/docs.tsx:
--------------------------------------------------------------------------------
  1 | import React, { StrictMode, useState, useRef } from 'react';
  2 | import { createRoot } from 'react-dom/client';
  3 | 
  4 | import AnimateHeight, { Height } from '../src/index';
  5 | import AutoHeight from './auto-height';
  6 | 
  7 | const DemoContent = ({ index }) => {
  8 |   return (
  9 |     <div className="demo-content">
 10 |       <p>
 11 |         It looked serious, but we in California, like everywhere else, were not
 12 |         alarmed. We were sure that the bacteriologists would find a way to
 13 |         overcome this new germ, just as they had overcome other germs in the
 14 |         past. But the trouble was the astonishing quickness with which this germ
 15 |         destroyed human beings, and the fact that it inevitably killed any human
 16 |         body it entered. No one ever recovered. There was the old Asiatic
 17 |         cholera, when you might eat dinner with a well man in the evening, and
 18 |         the next morning, if you got up early enough, you would see him being
 19 |         hauled by your window in the death-cart. But this new plague was quicker
 20 |         than that&mdash;much quicker.
 21 |       </p>
 22 |       <input
 23 |         className="form-control"
 24 |         type="text"
 25 |         placeholder="Focus test"
 26 |         onFocus={() => console.log(`Input ${index} focused`)}
 27 |       />
 28 |       <p>
 29 |         From the moment of the first signs of it, a man would be dead in an
 30 |         hour. Some lasted for several hours. Many died within ten or fifteen
 31 |         minutes of the appearance of the first signs.
 32 |       </p>
 33 |       <p>
 34 |         The heart began to beat faster and the heat of the body to increase.
 35 |         Then came the scarlet rash, spreading like wildfire over the face and
 36 |         body. Most persons never noticed the increase in heat and heart-beat,
 37 |         and the first they knew was when the scarlet rash came out. Usually,
 38 |         they had convulsions at the time of the appearance of the rash. But
 39 |         these convulsions did not last long and were not very severe. If one
 40 |         lived through them, he became perfectly quiet, and only did he feel a
 41 |         numbness swiftly creeping up his body from the feet. The heels became
 42 |         numb first, then the legs, and hips, and when the numbness reached as
 43 |         high as his heart he died. They did not rave or sleep. Their minds
 44 |         always remained cool and calm up to the moment their heart numbed and
 45 |         stopped. And another strange thing was the rapidity of decomposition. No
 46 |         sooner was a person dead than the body seemed to fall to pieces, to fly
 47 |         apart, to melt away even as you looked at it. That was one of the
 48 |         reasons the plague spread so rapidly. All the billions of germs in a
 49 |         corpse were so immediately released.
 50 |       </p>
 51 |     </div>
 52 |   );
 53 | };
 54 | 
 55 | const Example = () => {
 56 |   const [height1, setHeight1] = useState<Height>(0);
 57 |   const [height2, setHeight2] = useState<Height>('auto');
 58 |   const [height3, setHeight3] = useState<Height>('auto');
 59 |   const [delay, setDelay] = useState<number>(0);
 60 |   const wrapper = useRef<HTMLDivElement | null>(null);
 61 |   const content = useRef<HTMLDivElement | null>(null);
 62 |   const [randomImage, setRandomImage] = useState(
 63 |     'https://picsum.photos/600/600'
 64 |   );
 65 | 
 66 |   const options: Height[] = [0, 100, 200, 300, 'auto'];
 67 |   const delays: number[] = [0, 300, 600, 1000];
 68 | 
 69 |   return (
 70 |     <div>
 71 |       {/* ---------- DEMO 1 ---------- */}
 72 |       <h3 id="demo-1">Starting height = 0</h3>
 73 |       <p>
 74 |         Current Height: <b>{height1 !== null ? height1 : 'null'}</b>
 75 |       </p>
 76 |       <p className="">Set height to:</p>
 77 |       <div className="buttons">
 78 |         {options.map((option) => {
 79 |           const isActive = height1 === option;
 80 |           return (
 81 |             <button
 82 |               key={option}
 83 |               className={`btn btn-sm ${isActive ? 'btn-selected' : ''}`}
 84 |               onClick={() => setHeight1(option)}
 85 |             >
 86 |               {option}
 87 |             </button>
 88 |           );
 89 |         })}
 90 |       </div>
 91 |       <AnimateHeight
 92 |         height={height1}
 93 |         className="demo demo-1"
 94 |         ref={wrapper}
 95 |         contentRef={content}
 96 |       >
 97 |         <DemoContent index={1} />
 98 |       </AnimateHeight>
 99 | 
100 |       {/* ---------- DEMO 2 ---------- */}
101 |       <h3 id="demo-2">Starting height = auto</h3>
102 |       <p>
103 |         For this example, duration is set to 500ms. If you open up the console,
104 |         you&apos;ll see <code>onHeightAnimationEnd</code> and
105 |         <code>onHeightAnimationStart</code> callbacks. Also,{' '}
106 |         <code>animateOpacity</code> is set to true.
107 |       </p>
108 |       <p>
109 |         Current Height: <b>{height1 !== null ? height2 : 'null'}</b>
110 |       </p>
111 |       <p className="">Set height to:</p>
112 |       <div className="buttons">
113 |         {options.map((option) => {
114 |           const isActive = height2 === option;
115 |           return (
116 |             <button
117 |               key={option}
118 |               className={`btn btn-sm ${isActive ? 'btn-selected' : ''}`}
119 |               onClick={() => setHeight2(option)}
120 |             >
121 |               {option}
122 |             </button>
123 |           );
124 |         })}
125 |       </div>
126 |       <AnimateHeight
127 |         height={height2}
128 |         duration={500}
129 |         onHeightAnimationEnd={(newHeight) => {
130 |           console.log(
131 |             'AnimateHeight - animation ended, new height: ',
132 |             newHeight
133 |           );
134 |         }}
135 |         onHeightAnimationStart={(newHeight) => {
136 |           console.log(
137 |             'AnimateHeight - animation started, new height: ',
138 |             newHeight
139 |           );
140 |         }}
141 |         className="demo demo-2"
142 |         animateOpacity
143 |       >
144 |         <DemoContent index={2} />
145 |       </AnimateHeight>
146 | 
147 |       {/* ---------- DEMO 3 ---------- */}
148 |       <h3 id="demo-3">Auto height</h3>
149 |       <p>
150 |         If you want <code>AnimateHeight</code> to automatically adapt on content
151 |         change, you can use{' '}
152 |         <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">
153 |           ResizeObserver
154 |         </a>
155 |         . You can find the code for this example{' '}
156 |         <a href="https://github.com/Stanko/react-animate-height/blob/v3/docs/auto-height.tsx">
157 |           here
158 |         </a>
159 |         .
160 |       </p>
161 |       <div className="buttons">
162 |         <button
163 |           className="btn btn-sm"
164 |           onClick={() => {
165 |             setRandomImage(
166 |               `https://picsum.photos/600/${Math.round(
167 |                 200 + Math.random() * 400
168 |               )}`
169 |             );
170 |           }}
171 |         >
172 |           Change content
173 |         </button>
174 |       </div>
175 |       <AutoHeight className="demo">
176 |         <div className="demo-3-content">
177 |           <img className="demo-3-image" src={randomImage} alt="" />
178 |         </div>
179 |       </AutoHeight>
180 | 
181 |       {/* ---------- DEMO 4 ---------- */}
182 |       <h3 id="demo-4">With transition delay</h3>
183 |       <p>
184 |         Here you can see <code>delay</code> prop in action. Parent&apos;s div
185 |         height is set to 500px.
186 |       </p>
187 |       <p>
188 |         Current Height: <b>{height3}</b>
189 |         <br />
190 |         Current Delay: <b>{delay}</b>
191 |       </p>
192 |       <p>Set delay to:</p>
193 |       <div className="buttons">
194 |         {delays.map((option) => {
195 |           return (
196 |             <button
197 |               key={option}
198 |               className={`btn btn-sm ${delay === option ? 'btn-selected' : ''}`}
199 |               onClick={() => setDelay(option)}
200 |             >
201 |               {option}
202 |             </button>
203 |           );
204 |         })}
205 |       </div>
206 |       <p className="">Set height to:</p>
207 |       <div className="buttons">
208 |         {options.map((option) => {
209 |           const isActive = height3 === option;
210 |           return (
211 |             <button
212 |               key={option}
213 |               className={`btn btn-sm ${isActive ? 'btn-selected' : ''}`}
214 |               onClick={() => setHeight3(option)}
215 |             >
216 |               {option}
217 |             </button>
218 |           );
219 |         })}
220 |         <br />
221 |         <button
222 |           className={`btn btn-sm ${height3 === '50%' ? 'btn-selected' : ''}`}
223 |           onClick={() => setHeight3('50%')}
224 |         >
225 |           50% of the parent's height
226 |         </button>
227 |         <button
228 |           className={`btn btn-sm ${height3 === '100%' ? 'btn-selected' : ''}`}
229 |           onClick={() => setHeight3('100%')}
230 |         >
231 |           100% of the parent's height
232 |         </button>
233 |       </div>
234 |       <div className="demo-4-wrapper">
235 |         <AnimateHeight
236 |           height={height3}
237 |           delay={delay}
238 |           duration={500}
239 |           className="demo demo-4"
240 |           onHeightAnimationEnd={(newHeight) => {
241 |             console.log(
242 |               'AnimateHeight - animation ended, new height: ',
243 |               newHeight
244 |             );
245 |           }}
246 |           onHeightAnimationStart={(newHeight) => {
247 |             console.log(
248 |               'AnimateHeight - animation started, new height: ',
249 |               newHeight
250 |             );
251 |           }}
252 |         >
253 |           <DemoContent index={3} />
254 |         </AnimateHeight>
255 |       </div>
256 |     </div>
257 |   );
258 | };
259 | 
260 | const container = document.getElementById('demo') as Element;
261 | const root = createRoot(container);
262 | 
263 | root.render(
264 |   <StrictMode>
265 |     <Example />
266 |   </StrictMode>
267 | );
268 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport"
 7 |     content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 8 | 
 9 |   <title>React Animate Height</title>
10 | 
11 |   <link rel="stylesheet" href="https://muffinman.io/skyblue/css/skyblue.css">
12 | 
13 |   <link rel="stylesheet" href="/react-animate-height/docs.css">
14 | 
15 |   <!-- Icons -->
16 |   <link href="https://muffinman.io/favicon/red/icon-32.ico" rel="icon" sizes="any" />
17 |   <link href="https://muffinman.io/favicon/red/icon.svg" rel="icon" type="image/svg+xml" />
18 |   <link href="https://muffinman.io/favicon/red/icon-180.png" rel="apple-touch-icon" />
19 |   <link href="https://muffinman.io/favicon/red/manifest.webmanifest" rel="manifest" />
20 | </head>
21 | 
22 | <body>
23 |   <div class='header'>
24 |     <div class='content'>
25 |       <a href='https://muffinman.io' class='margin-right-20'>My blog</a>
26 |       <a href='https://github.com/Stanko/react-animate-height' class='margin-right-20'>GitHub</a>
27 |       <a href='https://www.npmjs.com/package/react-animate-height'>npm</a>
28 |     </div>
29 |   </div>
30 | 
31 |   <div class="content">
32 |     <h1>React Animate Height</h1>
33 | 
34 |     <p>
35 |       Lightweight React component for animating height using CSS transitions.
36 |       Slide up/down the element, and to any specific height.
37 |       Check the <a href="#demo">demo below</a>.
38 |     </p>
39 |     <p>CSS classes are applied in specific animation states, check <code>animationStateClasses</code> prop.</p>
40 |     <p>
41 |       Detailed documentation is available on
42 |       <a href='https://github.com/Stanko/react-animate-height'>GitHub</a>.
43 |     </p>
44 | 
45 |     <h2>Usage</h2>
46 |     <p>Import the component, and use it to wrap content whose height you want to animate.</p>
47 |     <pre>
48 | import AnimateHeight from 'react-animate-height';
49 | 
50 | &lt;AnimateHeight
51 |   duration={ 500 }
52 |   height={ 'auto' }
53 | &gt;
54 |   &lt;h1&gt;Your content goes here&lt;/h1&gt;
55 |   &lt;p&gt;Put as many React or HTML components here.&lt;/p&gt;
56 | &lt;/AnimateHeight&gt;
57 | </pre>
58 | 
59 |   </div>
60 |   <div id="demo" class="content"></div>
61 | 
62 |   <script src="/react-animate-height/docs.js"></script>
63 | </body>
64 | 
65 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "name": "react-animate-height",
   3 |   "version": "3.2.3",
   4 |   "lockfileVersion": 3,
   5 |   "requires": true,
   6 |   "packages": {
   7 |     "": {
   8 |       "name": "react-animate-height",
   9 |       "version": "3.2.3",
  10 |       "license": "MIT",
  11 |       "devDependencies": {
  12 |         "@types/node": "^20.4.1",
  13 |         "@types/react": "^18.2.14",
  14 |         "@types/react-dom": "^18.2.6",
  15 |         "cypress": "^12.17.0",
  16 |         "esbuild": "^0.18.11",
  17 |         "react": "^18.2.0",
  18 |         "react-dom": "^18.2.0",
  19 |         "typescript": "^5.1.6"
  20 |       },
  21 |       "engines": {
  22 |         "node": ">= 12.0.0"
  23 |       },
  24 |       "peerDependencies": {
  25 |         "react": ">=16.8.0",
  26 |         "react-dom": ">=16.8.0"
  27 |       }
  28 |     },
  29 |     "node_modules/@colors/colors": {
  30 |       "version": "1.5.0",
  31 |       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
  32 |       "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
  33 |       "dev": true,
  34 |       "optional": true,
  35 |       "engines": {
  36 |         "node": ">=0.1.90"
  37 |       }
  38 |     },
  39 |     "node_modules/@cypress/request": {
  40 |       "version": "2.88.10",
  41 |       "resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.10.tgz",
  42 |       "integrity": "sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==",
  43 |       "dev": true,
  44 |       "dependencies": {
  45 |         "aws-sign2": "~0.7.0",
  46 |         "aws4": "^1.8.0",
  47 |         "caseless": "~0.12.0",
  48 |         "combined-stream": "~1.0.6",
  49 |         "extend": "~3.0.2",
  50 |         "forever-agent": "~0.6.1",
  51 |         "form-data": "~2.3.2",
  52 |         "http-signature": "~1.3.6",
  53 |         "is-typedarray": "~1.0.0",
  54 |         "isstream": "~0.1.2",
  55 |         "json-stringify-safe": "~5.0.1",
  56 |         "mime-types": "~2.1.19",
  57 |         "performance-now": "^2.1.0",
  58 |         "qs": "~6.5.2",
  59 |         "safe-buffer": "^5.1.2",
  60 |         "tough-cookie": "~2.5.0",
  61 |         "tunnel-agent": "^0.6.0",
  62 |         "uuid": "^8.3.2"
  63 |       },
  64 |       "engines": {
  65 |         "node": ">= 6"
  66 |       }
  67 |     },
  68 |     "node_modules/@cypress/xvfb": {
  69 |       "version": "1.2.4",
  70 |       "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
  71 |       "integrity": "sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==",
  72 |       "dev": true,
  73 |       "dependencies": {
  74 |         "debug": "^3.1.0",
  75 |         "lodash.once": "^4.1.1"
  76 |       }
  77 |     },
  78 |     "node_modules/@cypress/xvfb/node_modules/debug": {
  79 |       "version": "3.2.7",
  80 |       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
  81 |       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
  82 |       "dev": true,
  83 |       "dependencies": {
  84 |         "ms": "^2.1.1"
  85 |       }
  86 |     },
  87 |     "node_modules/@esbuild/android-arm": {
  88 |       "version": "0.18.11",
  89 |       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.11.tgz",
  90 |       "integrity": "sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==",
  91 |       "cpu": [
  92 |         "arm"
  93 |       ],
  94 |       "dev": true,
  95 |       "optional": true,
  96 |       "os": [
  97 |         "android"
  98 |       ],
  99 |       "engines": {
 100 |         "node": ">=12"
 101 |       }
 102 |     },
 103 |     "node_modules/@esbuild/android-arm64": {
 104 |       "version": "0.18.11",
 105 |       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.11.tgz",
 106 |       "integrity": "sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==",
 107 |       "cpu": [
 108 |         "arm64"
 109 |       ],
 110 |       "dev": true,
 111 |       "optional": true,
 112 |       "os": [
 113 |         "android"
 114 |       ],
 115 |       "engines": {
 116 |         "node": ">=12"
 117 |       }
 118 |     },
 119 |     "node_modules/@esbuild/android-x64": {
 120 |       "version": "0.18.11",
 121 |       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.11.tgz",
 122 |       "integrity": "sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==",
 123 |       "cpu": [
 124 |         "x64"
 125 |       ],
 126 |       "dev": true,
 127 |       "optional": true,
 128 |       "os": [
 129 |         "android"
 130 |       ],
 131 |       "engines": {
 132 |         "node": ">=12"
 133 |       }
 134 |     },
 135 |     "node_modules/@esbuild/darwin-arm64": {
 136 |       "version": "0.18.11",
 137 |       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.11.tgz",
 138 |       "integrity": "sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==",
 139 |       "cpu": [
 140 |         "arm64"
 141 |       ],
 142 |       "dev": true,
 143 |       "optional": true,
 144 |       "os": [
 145 |         "darwin"
 146 |       ],
 147 |       "engines": {
 148 |         "node": ">=12"
 149 |       }
 150 |     },
 151 |     "node_modules/@esbuild/darwin-x64": {
 152 |       "version": "0.18.11",
 153 |       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.11.tgz",
 154 |       "integrity": "sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==",
 155 |       "cpu": [
 156 |         "x64"
 157 |       ],
 158 |       "dev": true,
 159 |       "optional": true,
 160 |       "os": [
 161 |         "darwin"
 162 |       ],
 163 |       "engines": {
 164 |         "node": ">=12"
 165 |       }
 166 |     },
 167 |     "node_modules/@esbuild/freebsd-arm64": {
 168 |       "version": "0.18.11",
 169 |       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.11.tgz",
 170 |       "integrity": "sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==",
 171 |       "cpu": [
 172 |         "arm64"
 173 |       ],
 174 |       "dev": true,
 175 |       "optional": true,
 176 |       "os": [
 177 |         "freebsd"
 178 |       ],
 179 |       "engines": {
 180 |         "node": ">=12"
 181 |       }
 182 |     },
 183 |     "node_modules/@esbuild/freebsd-x64": {
 184 |       "version": "0.18.11",
 185 |       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.11.tgz",
 186 |       "integrity": "sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==",
 187 |       "cpu": [
 188 |         "x64"
 189 |       ],
 190 |       "dev": true,
 191 |       "optional": true,
 192 |       "os": [
 193 |         "freebsd"
 194 |       ],
 195 |       "engines": {
 196 |         "node": ">=12"
 197 |       }
 198 |     },
 199 |     "node_modules/@esbuild/linux-arm": {
 200 |       "version": "0.18.11",
 201 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.11.tgz",
 202 |       "integrity": "sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==",
 203 |       "cpu": [
 204 |         "arm"
 205 |       ],
 206 |       "dev": true,
 207 |       "optional": true,
 208 |       "os": [
 209 |         "linux"
 210 |       ],
 211 |       "engines": {
 212 |         "node": ">=12"
 213 |       }
 214 |     },
 215 |     "node_modules/@esbuild/linux-arm64": {
 216 |       "version": "0.18.11",
 217 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.11.tgz",
 218 |       "integrity": "sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==",
 219 |       "cpu": [
 220 |         "arm64"
 221 |       ],
 222 |       "dev": true,
 223 |       "optional": true,
 224 |       "os": [
 225 |         "linux"
 226 |       ],
 227 |       "engines": {
 228 |         "node": ">=12"
 229 |       }
 230 |     },
 231 |     "node_modules/@esbuild/linux-ia32": {
 232 |       "version": "0.18.11",
 233 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.11.tgz",
 234 |       "integrity": "sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==",
 235 |       "cpu": [
 236 |         "ia32"
 237 |       ],
 238 |       "dev": true,
 239 |       "optional": true,
 240 |       "os": [
 241 |         "linux"
 242 |       ],
 243 |       "engines": {
 244 |         "node": ">=12"
 245 |       }
 246 |     },
 247 |     "node_modules/@esbuild/linux-loong64": {
 248 |       "version": "0.18.11",
 249 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.11.tgz",
 250 |       "integrity": "sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==",
 251 |       "cpu": [
 252 |         "loong64"
 253 |       ],
 254 |       "dev": true,
 255 |       "optional": true,
 256 |       "os": [
 257 |         "linux"
 258 |       ],
 259 |       "engines": {
 260 |         "node": ">=12"
 261 |       }
 262 |     },
 263 |     "node_modules/@esbuild/linux-mips64el": {
 264 |       "version": "0.18.11",
 265 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.11.tgz",
 266 |       "integrity": "sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==",
 267 |       "cpu": [
 268 |         "mips64el"
 269 |       ],
 270 |       "dev": true,
 271 |       "optional": true,
 272 |       "os": [
 273 |         "linux"
 274 |       ],
 275 |       "engines": {
 276 |         "node": ">=12"
 277 |       }
 278 |     },
 279 |     "node_modules/@esbuild/linux-ppc64": {
 280 |       "version": "0.18.11",
 281 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.11.tgz",
 282 |       "integrity": "sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==",
 283 |       "cpu": [
 284 |         "ppc64"
 285 |       ],
 286 |       "dev": true,
 287 |       "optional": true,
 288 |       "os": [
 289 |         "linux"
 290 |       ],
 291 |       "engines": {
 292 |         "node": ">=12"
 293 |       }
 294 |     },
 295 |     "node_modules/@esbuild/linux-riscv64": {
 296 |       "version": "0.18.11",
 297 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.11.tgz",
 298 |       "integrity": "sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==",
 299 |       "cpu": [
 300 |         "riscv64"
 301 |       ],
 302 |       "dev": true,
 303 |       "optional": true,
 304 |       "os": [
 305 |         "linux"
 306 |       ],
 307 |       "engines": {
 308 |         "node": ">=12"
 309 |       }
 310 |     },
 311 |     "node_modules/@esbuild/linux-s390x": {
 312 |       "version": "0.18.11",
 313 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.11.tgz",
 314 |       "integrity": "sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==",
 315 |       "cpu": [
 316 |         "s390x"
 317 |       ],
 318 |       "dev": true,
 319 |       "optional": true,
 320 |       "os": [
 321 |         "linux"
 322 |       ],
 323 |       "engines": {
 324 |         "node": ">=12"
 325 |       }
 326 |     },
 327 |     "node_modules/@esbuild/linux-x64": {
 328 |       "version": "0.18.11",
 329 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.11.tgz",
 330 |       "integrity": "sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==",
 331 |       "cpu": [
 332 |         "x64"
 333 |       ],
 334 |       "dev": true,
 335 |       "optional": true,
 336 |       "os": [
 337 |         "linux"
 338 |       ],
 339 |       "engines": {
 340 |         "node": ">=12"
 341 |       }
 342 |     },
 343 |     "node_modules/@esbuild/netbsd-x64": {
 344 |       "version": "0.18.11",
 345 |       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.11.tgz",
 346 |       "integrity": "sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==",
 347 |       "cpu": [
 348 |         "x64"
 349 |       ],
 350 |       "dev": true,
 351 |       "optional": true,
 352 |       "os": [
 353 |         "netbsd"
 354 |       ],
 355 |       "engines": {
 356 |         "node": ">=12"
 357 |       }
 358 |     },
 359 |     "node_modules/@esbuild/openbsd-x64": {
 360 |       "version": "0.18.11",
 361 |       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.11.tgz",
 362 |       "integrity": "sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==",
 363 |       "cpu": [
 364 |         "x64"
 365 |       ],
 366 |       "dev": true,
 367 |       "optional": true,
 368 |       "os": [
 369 |         "openbsd"
 370 |       ],
 371 |       "engines": {
 372 |         "node": ">=12"
 373 |       }
 374 |     },
 375 |     "node_modules/@esbuild/sunos-x64": {
 376 |       "version": "0.18.11",
 377 |       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.11.tgz",
 378 |       "integrity": "sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==",
 379 |       "cpu": [
 380 |         "x64"
 381 |       ],
 382 |       "dev": true,
 383 |       "optional": true,
 384 |       "os": [
 385 |         "sunos"
 386 |       ],
 387 |       "engines": {
 388 |         "node": ">=12"
 389 |       }
 390 |     },
 391 |     "node_modules/@esbuild/win32-arm64": {
 392 |       "version": "0.18.11",
 393 |       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.11.tgz",
 394 |       "integrity": "sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==",
 395 |       "cpu": [
 396 |         "arm64"
 397 |       ],
 398 |       "dev": true,
 399 |       "optional": true,
 400 |       "os": [
 401 |         "win32"
 402 |       ],
 403 |       "engines": {
 404 |         "node": ">=12"
 405 |       }
 406 |     },
 407 |     "node_modules/@esbuild/win32-ia32": {
 408 |       "version": "0.18.11",
 409 |       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.11.tgz",
 410 |       "integrity": "sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==",
 411 |       "cpu": [
 412 |         "ia32"
 413 |       ],
 414 |       "dev": true,
 415 |       "optional": true,
 416 |       "os": [
 417 |         "win32"
 418 |       ],
 419 |       "engines": {
 420 |         "node": ">=12"
 421 |       }
 422 |     },
 423 |     "node_modules/@esbuild/win32-x64": {
 424 |       "version": "0.18.11",
 425 |       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.11.tgz",
 426 |       "integrity": "sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==",
 427 |       "cpu": [
 428 |         "x64"
 429 |       ],
 430 |       "dev": true,
 431 |       "optional": true,
 432 |       "os": [
 433 |         "win32"
 434 |       ],
 435 |       "engines": {
 436 |         "node": ">=12"
 437 |       }
 438 |     },
 439 |     "node_modules/@types/node": {
 440 |       "version": "20.4.1",
 441 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.1.tgz",
 442 |       "integrity": "sha512-JIzsAvJeA/5iY6Y/OxZbv1lUcc8dNSE77lb2gnBH+/PJ3lFR1Ccvgwl5JWnHAkNHcRsT0TbpVOsiMKZ1F/yyJg==",
 443 |       "dev": true
 444 |     },
 445 |     "node_modules/@types/prop-types": {
 446 |       "version": "15.7.5",
 447 |       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
 448 |       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
 449 |       "dev": true
 450 |     },
 451 |     "node_modules/@types/react": {
 452 |       "version": "18.2.14",
 453 |       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz",
 454 |       "integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==",
 455 |       "dev": true,
 456 |       "dependencies": {
 457 |         "@types/prop-types": "*",
 458 |         "@types/scheduler": "*",
 459 |         "csstype": "^3.0.2"
 460 |       }
 461 |     },
 462 |     "node_modules/@types/react-dom": {
 463 |       "version": "18.2.6",
 464 |       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.6.tgz",
 465 |       "integrity": "sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==",
 466 |       "dev": true,
 467 |       "dependencies": {
 468 |         "@types/react": "*"
 469 |       }
 470 |     },
 471 |     "node_modules/@types/scheduler": {
 472 |       "version": "0.16.2",
 473 |       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
 474 |       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
 475 |       "dev": true
 476 |     },
 477 |     "node_modules/@types/sinonjs__fake-timers": {
 478 |       "version": "8.1.1",
 479 |       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
 480 |       "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
 481 |       "dev": true
 482 |     },
 483 |     "node_modules/@types/sizzle": {
 484 |       "version": "2.3.3",
 485 |       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
 486 |       "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
 487 |       "dev": true
 488 |     },
 489 |     "node_modules/@types/yauzl": {
 490 |       "version": "2.10.0",
 491 |       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
 492 |       "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
 493 |       "dev": true,
 494 |       "optional": true,
 495 |       "dependencies": {
 496 |         "@types/node": "*"
 497 |       }
 498 |     },
 499 |     "node_modules/aggregate-error": {
 500 |       "version": "3.1.0",
 501 |       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
 502 |       "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
 503 |       "dev": true,
 504 |       "dependencies": {
 505 |         "clean-stack": "^2.0.0",
 506 |         "indent-string": "^4.0.0"
 507 |       },
 508 |       "engines": {
 509 |         "node": ">=8"
 510 |       }
 511 |     },
 512 |     "node_modules/ansi-colors": {
 513 |       "version": "4.1.3",
 514 |       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
 515 |       "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
 516 |       "dev": true,
 517 |       "engines": {
 518 |         "node": ">=6"
 519 |       }
 520 |     },
 521 |     "node_modules/ansi-escapes": {
 522 |       "version": "4.3.2",
 523 |       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
 524 |       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
 525 |       "dev": true,
 526 |       "dependencies": {
 527 |         "type-fest": "^0.21.3"
 528 |       },
 529 |       "engines": {
 530 |         "node": ">=8"
 531 |       },
 532 |       "funding": {
 533 |         "url": "https://github.com/sponsors/sindresorhus"
 534 |       }
 535 |     },
 536 |     "node_modules/ansi-regex": {
 537 |       "version": "5.0.1",
 538 |       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
 539 |       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
 540 |       "dev": true,
 541 |       "engines": {
 542 |         "node": ">=8"
 543 |       }
 544 |     },
 545 |     "node_modules/ansi-styles": {
 546 |       "version": "4.3.0",
 547 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 548 |       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 549 |       "dev": true,
 550 |       "dependencies": {
 551 |         "color-convert": "^2.0.1"
 552 |       },
 553 |       "engines": {
 554 |         "node": ">=8"
 555 |       },
 556 |       "funding": {
 557 |         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
 558 |       }
 559 |     },
 560 |     "node_modules/arch": {
 561 |       "version": "2.2.0",
 562 |       "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
 563 |       "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
 564 |       "dev": true,
 565 |       "funding": [
 566 |         {
 567 |           "type": "github",
 568 |           "url": "https://github.com/sponsors/feross"
 569 |         },
 570 |         {
 571 |           "type": "patreon",
 572 |           "url": "https://www.patreon.com/feross"
 573 |         },
 574 |         {
 575 |           "type": "consulting",
 576 |           "url": "https://feross.org/support"
 577 |         }
 578 |       ]
 579 |     },
 580 |     "node_modules/asn1": {
 581 |       "version": "0.2.6",
 582 |       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
 583 |       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
 584 |       "dev": true,
 585 |       "dependencies": {
 586 |         "safer-buffer": "~2.1.0"
 587 |       }
 588 |     },
 589 |     "node_modules/assert-plus": {
 590 |       "version": "1.0.0",
 591 |       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
 592 |       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
 593 |       "dev": true,
 594 |       "engines": {
 595 |         "node": ">=0.8"
 596 |       }
 597 |     },
 598 |     "node_modules/astral-regex": {
 599 |       "version": "2.0.0",
 600 |       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
 601 |       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
 602 |       "dev": true,
 603 |       "engines": {
 604 |         "node": ">=8"
 605 |       }
 606 |     },
 607 |     "node_modules/async": {
 608 |       "version": "3.2.3",
 609 |       "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
 610 |       "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
 611 |       "dev": true
 612 |     },
 613 |     "node_modules/asynckit": {
 614 |       "version": "0.4.0",
 615 |       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
 616 |       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
 617 |       "dev": true
 618 |     },
 619 |     "node_modules/at-least-node": {
 620 |       "version": "1.0.0",
 621 |       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
 622 |       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
 623 |       "dev": true,
 624 |       "engines": {
 625 |         "node": ">= 4.0.0"
 626 |       }
 627 |     },
 628 |     "node_modules/aws-sign2": {
 629 |       "version": "0.7.0",
 630 |       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
 631 |       "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
 632 |       "dev": true,
 633 |       "engines": {
 634 |         "node": "*"
 635 |       }
 636 |     },
 637 |     "node_modules/aws4": {
 638 |       "version": "1.11.0",
 639 |       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
 640 |       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
 641 |       "dev": true
 642 |     },
 643 |     "node_modules/balanced-match": {
 644 |       "version": "1.0.2",
 645 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 646 |       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 647 |       "dev": true
 648 |     },
 649 |     "node_modules/base64-js": {
 650 |       "version": "1.5.1",
 651 |       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
 652 |       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
 653 |       "dev": true,
 654 |       "funding": [
 655 |         {
 656 |           "type": "github",
 657 |           "url": "https://github.com/sponsors/feross"
 658 |         },
 659 |         {
 660 |           "type": "patreon",
 661 |           "url": "https://www.patreon.com/feross"
 662 |         },
 663 |         {
 664 |           "type": "consulting",
 665 |           "url": "https://feross.org/support"
 666 |         }
 667 |       ]
 668 |     },
 669 |     "node_modules/bcrypt-pbkdf": {
 670 |       "version": "1.0.2",
 671 |       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
 672 |       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
 673 |       "dev": true,
 674 |       "dependencies": {
 675 |         "tweetnacl": "^0.14.3"
 676 |       }
 677 |     },
 678 |     "node_modules/blob-util": {
 679 |       "version": "2.0.2",
 680 |       "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
 681 |       "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==",
 682 |       "dev": true
 683 |     },
 684 |     "node_modules/bluebird": {
 685 |       "version": "3.7.2",
 686 |       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
 687 |       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
 688 |       "dev": true
 689 |     },
 690 |     "node_modules/brace-expansion": {
 691 |       "version": "1.1.11",
 692 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 693 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 694 |       "dev": true,
 695 |       "dependencies": {
 696 |         "balanced-match": "^1.0.0",
 697 |         "concat-map": "0.0.1"
 698 |       }
 699 |     },
 700 |     "node_modules/buffer": {
 701 |       "version": "5.7.1",
 702 |       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
 703 |       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
 704 |       "dev": true,
 705 |       "funding": [
 706 |         {
 707 |           "type": "github",
 708 |           "url": "https://github.com/sponsors/feross"
 709 |         },
 710 |         {
 711 |           "type": "patreon",
 712 |           "url": "https://www.patreon.com/feross"
 713 |         },
 714 |         {
 715 |           "type": "consulting",
 716 |           "url": "https://feross.org/support"
 717 |         }
 718 |       ],
 719 |       "dependencies": {
 720 |         "base64-js": "^1.3.1",
 721 |         "ieee754": "^1.1.13"
 722 |       }
 723 |     },
 724 |     "node_modules/buffer-crc32": {
 725 |       "version": "0.2.13",
 726 |       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
 727 |       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
 728 |       "dev": true,
 729 |       "engines": {
 730 |         "node": "*"
 731 |       }
 732 |     },
 733 |     "node_modules/cachedir": {
 734 |       "version": "2.3.0",
 735 |       "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.3.0.tgz",
 736 |       "integrity": "sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==",
 737 |       "dev": true,
 738 |       "engines": {
 739 |         "node": ">=6"
 740 |       }
 741 |     },
 742 |     "node_modules/caseless": {
 743 |       "version": "0.12.0",
 744 |       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
 745 |       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
 746 |       "dev": true
 747 |     },
 748 |     "node_modules/chalk": {
 749 |       "version": "4.1.2",
 750 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
 751 |       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 752 |       "dev": true,
 753 |       "dependencies": {
 754 |         "ansi-styles": "^4.1.0",
 755 |         "supports-color": "^7.1.0"
 756 |       },
 757 |       "engines": {
 758 |         "node": ">=10"
 759 |       },
 760 |       "funding": {
 761 |         "url": "https://github.com/chalk/chalk?sponsor=1"
 762 |       }
 763 |     },
 764 |     "node_modules/chalk/node_modules/supports-color": {
 765 |       "version": "7.2.0",
 766 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 767 |       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 768 |       "dev": true,
 769 |       "dependencies": {
 770 |         "has-flag": "^4.0.0"
 771 |       },
 772 |       "engines": {
 773 |         "node": ">=8"
 774 |       }
 775 |     },
 776 |     "node_modules/check-more-types": {
 777 |       "version": "2.24.0",
 778 |       "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
 779 |       "integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
 780 |       "dev": true,
 781 |       "engines": {
 782 |         "node": ">= 0.8.0"
 783 |       }
 784 |     },
 785 |     "node_modules/ci-info": {
 786 |       "version": "3.3.1",
 787 |       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz",
 788 |       "integrity": "sha512-SXgeMX9VwDe7iFFaEWkA5AstuER9YKqy4EhHqr4DVqkwmD9rpVimkMKWHdjn30Ja45txyjhSn63lVX69eVCckg==",
 789 |       "dev": true
 790 |     },
 791 |     "node_modules/clean-stack": {
 792 |       "version": "2.2.0",
 793 |       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
 794 |       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
 795 |       "dev": true,
 796 |       "engines": {
 797 |         "node": ">=6"
 798 |       }
 799 |     },
 800 |     "node_modules/cli-cursor": {
 801 |       "version": "3.1.0",
 802 |       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
 803 |       "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
 804 |       "dev": true,
 805 |       "dependencies": {
 806 |         "restore-cursor": "^3.1.0"
 807 |       },
 808 |       "engines": {
 809 |         "node": ">=8"
 810 |       }
 811 |     },
 812 |     "node_modules/cli-table3": {
 813 |       "version": "0.6.2",
 814 |       "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.2.tgz",
 815 |       "integrity": "sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw==",
 816 |       "dev": true,
 817 |       "dependencies": {
 818 |         "string-width": "^4.2.0"
 819 |       },
 820 |       "engines": {
 821 |         "node": "10.* || >= 12.*"
 822 |       },
 823 |       "optionalDependencies": {
 824 |         "@colors/colors": "1.5.0"
 825 |       }
 826 |     },
 827 |     "node_modules/cli-truncate": {
 828 |       "version": "2.1.0",
 829 |       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
 830 |       "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
 831 |       "dev": true,
 832 |       "dependencies": {
 833 |         "slice-ansi": "^3.0.0",
 834 |         "string-width": "^4.2.0"
 835 |       },
 836 |       "engines": {
 837 |         "node": ">=8"
 838 |       },
 839 |       "funding": {
 840 |         "url": "https://github.com/sponsors/sindresorhus"
 841 |       }
 842 |     },
 843 |     "node_modules/color-convert": {
 844 |       "version": "2.0.1",
 845 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 846 |       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 847 |       "dev": true,
 848 |       "dependencies": {
 849 |         "color-name": "~1.1.4"
 850 |       },
 851 |       "engines": {
 852 |         "node": ">=7.0.0"
 853 |       }
 854 |     },
 855 |     "node_modules/color-name": {
 856 |       "version": "1.1.4",
 857 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 858 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 859 |       "dev": true
 860 |     },
 861 |     "node_modules/colorette": {
 862 |       "version": "2.0.16",
 863 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
 864 |       "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
 865 |       "dev": true
 866 |     },
 867 |     "node_modules/combined-stream": {
 868 |       "version": "1.0.8",
 869 |       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 870 |       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
 871 |       "dev": true,
 872 |       "dependencies": {
 873 |         "delayed-stream": "~1.0.0"
 874 |       },
 875 |       "engines": {
 876 |         "node": ">= 0.8"
 877 |       }
 878 |     },
 879 |     "node_modules/commander": {
 880 |       "version": "6.2.1",
 881 |       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
 882 |       "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
 883 |       "dev": true,
 884 |       "engines": {
 885 |         "node": ">= 6"
 886 |       }
 887 |     },
 888 |     "node_modules/common-tags": {
 889 |       "version": "1.8.2",
 890 |       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
 891 |       "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
 892 |       "dev": true,
 893 |       "engines": {
 894 |         "node": ">=4.0.0"
 895 |       }
 896 |     },
 897 |     "node_modules/concat-map": {
 898 |       "version": "0.0.1",
 899 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 900 |       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 901 |       "dev": true
 902 |     },
 903 |     "node_modules/core-util-is": {
 904 |       "version": "1.0.2",
 905 |       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
 906 |       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
 907 |       "dev": true
 908 |     },
 909 |     "node_modules/cross-spawn": {
 910 |       "version": "7.0.3",
 911 |       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
 912 |       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
 913 |       "dev": true,
 914 |       "dependencies": {
 915 |         "path-key": "^3.1.0",
 916 |         "shebang-command": "^2.0.0",
 917 |         "which": "^2.0.1"
 918 |       },
 919 |       "engines": {
 920 |         "node": ">= 8"
 921 |       }
 922 |     },
 923 |     "node_modules/csstype": {
 924 |       "version": "3.1.0",
 925 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
 926 |       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
 927 |       "dev": true
 928 |     },
 929 |     "node_modules/cypress": {
 930 |       "version": "12.17.0",
 931 |       "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.0.tgz",
 932 |       "integrity": "sha512-nq0ug8Zrjq/2khHU1PTNxg+3/n1oqtmAFCxwQhS6QzkQ4mR6RLitX+cGIOuIMfnEbDAtVub0hZh661FOA16JxA==",
 933 |       "dev": true,
 934 |       "hasInstallScript": true,
 935 |       "dependencies": {
 936 |         "@cypress/request": "^2.88.10",
 937 |         "@cypress/xvfb": "^1.2.4",
 938 |         "@types/node": "^14.14.31",
 939 |         "@types/sinonjs__fake-timers": "8.1.1",
 940 |         "@types/sizzle": "^2.3.2",
 941 |         "arch": "^2.2.0",
 942 |         "blob-util": "^2.0.2",
 943 |         "bluebird": "^3.7.2",
 944 |         "buffer": "^5.6.0",
 945 |         "cachedir": "^2.3.0",
 946 |         "chalk": "^4.1.0",
 947 |         "check-more-types": "^2.24.0",
 948 |         "cli-cursor": "^3.1.0",
 949 |         "cli-table3": "~0.6.1",
 950 |         "commander": "^6.2.1",
 951 |         "common-tags": "^1.8.0",
 952 |         "dayjs": "^1.10.4",
 953 |         "debug": "^4.3.4",
 954 |         "enquirer": "^2.3.6",
 955 |         "eventemitter2": "6.4.7",
 956 |         "execa": "4.1.0",
 957 |         "executable": "^4.1.1",
 958 |         "extract-zip": "2.0.1",
 959 |         "figures": "^3.2.0",
 960 |         "fs-extra": "^9.1.0",
 961 |         "getos": "^3.2.1",
 962 |         "is-ci": "^3.0.0",
 963 |         "is-installed-globally": "~0.4.0",
 964 |         "lazy-ass": "^1.6.0",
 965 |         "listr2": "^3.8.3",
 966 |         "lodash": "^4.17.21",
 967 |         "log-symbols": "^4.0.0",
 968 |         "minimist": "^1.2.8",
 969 |         "ospath": "^1.2.2",
 970 |         "pretty-bytes": "^5.6.0",
 971 |         "proxy-from-env": "1.0.0",
 972 |         "request-progress": "^3.0.0",
 973 |         "semver": "^7.5.3",
 974 |         "supports-color": "^8.1.1",
 975 |         "tmp": "~0.2.1",
 976 |         "untildify": "^4.0.0",
 977 |         "yauzl": "^2.10.0"
 978 |       },
 979 |       "bin": {
 980 |         "cypress": "bin/cypress"
 981 |       },
 982 |       "engines": {
 983 |         "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
 984 |       }
 985 |     },
 986 |     "node_modules/cypress/node_modules/@types/node": {
 987 |       "version": "14.18.33",
 988 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.33.tgz",
 989 |       "integrity": "sha512-qelS/Ra6sacc4loe/3MSjXNL1dNQ/GjxNHVzuChwMfmk7HuycRLVQN2qNY3XahK+fZc5E2szqQSKUyAF0E+2bg==",
 990 |       "dev": true
 991 |     },
 992 |     "node_modules/dashdash": {
 993 |       "version": "1.14.1",
 994 |       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
 995 |       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
 996 |       "dev": true,
 997 |       "dependencies": {
 998 |         "assert-plus": "^1.0.0"
 999 |       },
1000 |       "engines": {
1001 |         "node": ">=0.10"
1002 |       }
1003 |     },
1004 |     "node_modules/dayjs": {
1005 |       "version": "1.11.2",
1006 |       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
1007 |       "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==",
1008 |       "dev": true
1009 |     },
1010 |     "node_modules/debug": {
1011 |       "version": "4.3.4",
1012 |       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
1013 |       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
1014 |       "dev": true,
1015 |       "dependencies": {
1016 |         "ms": "2.1.2"
1017 |       },
1018 |       "engines": {
1019 |         "node": ">=6.0"
1020 |       },
1021 |       "peerDependenciesMeta": {
1022 |         "supports-color": {
1023 |           "optional": true
1024 |         }
1025 |       }
1026 |     },
1027 |     "node_modules/delayed-stream": {
1028 |       "version": "1.0.0",
1029 |       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
1030 |       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
1031 |       "dev": true,
1032 |       "engines": {
1033 |         "node": ">=0.4.0"
1034 |       }
1035 |     },
1036 |     "node_modules/ecc-jsbn": {
1037 |       "version": "0.1.2",
1038 |       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
1039 |       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
1040 |       "dev": true,
1041 |       "dependencies": {
1042 |         "jsbn": "~0.1.0",
1043 |         "safer-buffer": "^2.1.0"
1044 |       }
1045 |     },
1046 |     "node_modules/emoji-regex": {
1047 |       "version": "8.0.0",
1048 |       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
1049 |       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
1050 |       "dev": true
1051 |     },
1052 |     "node_modules/end-of-stream": {
1053 |       "version": "1.4.4",
1054 |       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
1055 |       "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
1056 |       "dev": true,
1057 |       "dependencies": {
1058 |         "once": "^1.4.0"
1059 |       }
1060 |     },
1061 |     "node_modules/enquirer": {
1062 |       "version": "2.3.6",
1063 |       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
1064 |       "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
1065 |       "dev": true,
1066 |       "dependencies": {
1067 |         "ansi-colors": "^4.1.1"
1068 |       },
1069 |       "engines": {
1070 |         "node": ">=8.6"
1071 |       }
1072 |     },
1073 |     "node_modules/esbuild": {
1074 |       "version": "0.18.11",
1075 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.11.tgz",
1076 |       "integrity": "sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==",
1077 |       "dev": true,
1078 |       "hasInstallScript": true,
1079 |       "bin": {
1080 |         "esbuild": "bin/esbuild"
1081 |       },
1082 |       "engines": {
1083 |         "node": ">=12"
1084 |       },
1085 |       "optionalDependencies": {
1086 |         "@esbuild/android-arm": "0.18.11",
1087 |         "@esbuild/android-arm64": "0.18.11",
1088 |         "@esbuild/android-x64": "0.18.11",
1089 |         "@esbuild/darwin-arm64": "0.18.11",
1090 |         "@esbuild/darwin-x64": "0.18.11",
1091 |         "@esbuild/freebsd-arm64": "0.18.11",
1092 |         "@esbuild/freebsd-x64": "0.18.11",
1093 |         "@esbuild/linux-arm": "0.18.11",
1094 |         "@esbuild/linux-arm64": "0.18.11",
1095 |         "@esbuild/linux-ia32": "0.18.11",
1096 |         "@esbuild/linux-loong64": "0.18.11",
1097 |         "@esbuild/linux-mips64el": "0.18.11",
1098 |         "@esbuild/linux-ppc64": "0.18.11",
1099 |         "@esbuild/linux-riscv64": "0.18.11",
1100 |         "@esbuild/linux-s390x": "0.18.11",
1101 |         "@esbuild/linux-x64": "0.18.11",
1102 |         "@esbuild/netbsd-x64": "0.18.11",
1103 |         "@esbuild/openbsd-x64": "0.18.11",
1104 |         "@esbuild/sunos-x64": "0.18.11",
1105 |         "@esbuild/win32-arm64": "0.18.11",
1106 |         "@esbuild/win32-ia32": "0.18.11",
1107 |         "@esbuild/win32-x64": "0.18.11"
1108 |       }
1109 |     },
1110 |     "node_modules/escape-string-regexp": {
1111 |       "version": "1.0.5",
1112 |       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
1113 |       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
1114 |       "dev": true,
1115 |       "engines": {
1116 |         "node": ">=0.8.0"
1117 |       }
1118 |     },
1119 |     "node_modules/eventemitter2": {
1120 |       "version": "6.4.7",
1121 |       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
1122 |       "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
1123 |       "dev": true
1124 |     },
1125 |     "node_modules/execa": {
1126 |       "version": "4.1.0",
1127 |       "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
1128 |       "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
1129 |       "dev": true,
1130 |       "dependencies": {
1131 |         "cross-spawn": "^7.0.0",
1132 |         "get-stream": "^5.0.0",
1133 |         "human-signals": "^1.1.1",
1134 |         "is-stream": "^2.0.0",
1135 |         "merge-stream": "^2.0.0",
1136 |         "npm-run-path": "^4.0.0",
1137 |         "onetime": "^5.1.0",
1138 |         "signal-exit": "^3.0.2",
1139 |         "strip-final-newline": "^2.0.0"
1140 |       },
1141 |       "engines": {
1142 |         "node": ">=10"
1143 |       },
1144 |       "funding": {
1145 |         "url": "https://github.com/sindresorhus/execa?sponsor=1"
1146 |       }
1147 |     },
1148 |     "node_modules/executable": {
1149 |       "version": "4.1.1",
1150 |       "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
1151 |       "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
1152 |       "dev": true,
1153 |       "dependencies": {
1154 |         "pify": "^2.2.0"
1155 |       },
1156 |       "engines": {
1157 |         "node": ">=4"
1158 |       }
1159 |     },
1160 |     "node_modules/extend": {
1161 |       "version": "3.0.2",
1162 |       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
1163 |       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
1164 |       "dev": true
1165 |     },
1166 |     "node_modules/extract-zip": {
1167 |       "version": "2.0.1",
1168 |       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
1169 |       "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
1170 |       "dev": true,
1171 |       "dependencies": {
1172 |         "debug": "^4.1.1",
1173 |         "get-stream": "^5.1.0",
1174 |         "yauzl": "^2.10.0"
1175 |       },
1176 |       "bin": {
1177 |         "extract-zip": "cli.js"
1178 |       },
1179 |       "engines": {
1180 |         "node": ">= 10.17.0"
1181 |       },
1182 |       "optionalDependencies": {
1183 |         "@types/yauzl": "^2.9.1"
1184 |       }
1185 |     },
1186 |     "node_modules/extsprintf": {
1187 |       "version": "1.3.0",
1188 |       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
1189 |       "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
1190 |       "dev": true,
1191 |       "engines": [
1192 |         "node >=0.6.0"
1193 |       ]
1194 |     },
1195 |     "node_modules/fd-slicer": {
1196 |       "version": "1.1.0",
1197 |       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
1198 |       "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
1199 |       "dev": true,
1200 |       "dependencies": {
1201 |         "pend": "~1.2.0"
1202 |       }
1203 |     },
1204 |     "node_modules/figures": {
1205 |       "version": "3.2.0",
1206 |       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
1207 |       "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
1208 |       "dev": true,
1209 |       "dependencies": {
1210 |         "escape-string-regexp": "^1.0.5"
1211 |       },
1212 |       "engines": {
1213 |         "node": ">=8"
1214 |       },
1215 |       "funding": {
1216 |         "url": "https://github.com/sponsors/sindresorhus"
1217 |       }
1218 |     },
1219 |     "node_modules/forever-agent": {
1220 |       "version": "0.6.1",
1221 |       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
1222 |       "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
1223 |       "dev": true,
1224 |       "engines": {
1225 |         "node": "*"
1226 |       }
1227 |     },
1228 |     "node_modules/form-data": {
1229 |       "version": "2.3.3",
1230 |       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
1231 |       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
1232 |       "dev": true,
1233 |       "dependencies": {
1234 |         "asynckit": "^0.4.0",
1235 |         "combined-stream": "^1.0.6",
1236 |         "mime-types": "^2.1.12"
1237 |       },
1238 |       "engines": {
1239 |         "node": ">= 0.12"
1240 |       }
1241 |     },
1242 |     "node_modules/fs-extra": {
1243 |       "version": "9.1.0",
1244 |       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
1245 |       "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
1246 |       "dev": true,
1247 |       "dependencies": {
1248 |         "at-least-node": "^1.0.0",
1249 |         "graceful-fs": "^4.2.0",
1250 |         "jsonfile": "^6.0.1",
1251 |         "universalify": "^2.0.0"
1252 |       },
1253 |       "engines": {
1254 |         "node": ">=10"
1255 |       }
1256 |     },
1257 |     "node_modules/fs.realpath": {
1258 |       "version": "1.0.0",
1259 |       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
1260 |       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
1261 |       "dev": true
1262 |     },
1263 |     "node_modules/get-stream": {
1264 |       "version": "5.2.0",
1265 |       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
1266 |       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
1267 |       "dev": true,
1268 |       "dependencies": {
1269 |         "pump": "^3.0.0"
1270 |       },
1271 |       "engines": {
1272 |         "node": ">=8"
1273 |       },
1274 |       "funding": {
1275 |         "url": "https://github.com/sponsors/sindresorhus"
1276 |       }
1277 |     },
1278 |     "node_modules/getos": {
1279 |       "version": "3.2.1",
1280 |       "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
1281 |       "integrity": "sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==",
1282 |       "dev": true,
1283 |       "dependencies": {
1284 |         "async": "^3.2.0"
1285 |       }
1286 |     },
1287 |     "node_modules/getpass": {
1288 |       "version": "0.1.7",
1289 |       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
1290 |       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
1291 |       "dev": true,
1292 |       "dependencies": {
1293 |         "assert-plus": "^1.0.0"
1294 |       }
1295 |     },
1296 |     "node_modules/glob": {
1297 |       "version": "7.2.3",
1298 |       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
1299 |       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
1300 |       "dev": true,
1301 |       "dependencies": {
1302 |         "fs.realpath": "^1.0.0",
1303 |         "inflight": "^1.0.4",
1304 |         "inherits": "2",
1305 |         "minimatch": "^3.1.1",
1306 |         "once": "^1.3.0",
1307 |         "path-is-absolute": "^1.0.0"
1308 |       },
1309 |       "engines": {
1310 |         "node": "*"
1311 |       },
1312 |       "funding": {
1313 |         "url": "https://github.com/sponsors/isaacs"
1314 |       }
1315 |     },
1316 |     "node_modules/global-dirs": {
1317 |       "version": "3.0.0",
1318 |       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz",
1319 |       "integrity": "sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==",
1320 |       "dev": true,
1321 |       "dependencies": {
1322 |         "ini": "2.0.0"
1323 |       },
1324 |       "engines": {
1325 |         "node": ">=10"
1326 |       },
1327 |       "funding": {
1328 |         "url": "https://github.com/sponsors/sindresorhus"
1329 |       }
1330 |     },
1331 |     "node_modules/graceful-fs": {
1332 |       "version": "4.2.10",
1333 |       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
1334 |       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
1335 |       "dev": true
1336 |     },
1337 |     "node_modules/has-flag": {
1338 |       "version": "4.0.0",
1339 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
1340 |       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
1341 |       "dev": true,
1342 |       "engines": {
1343 |         "node": ">=8"
1344 |       }
1345 |     },
1346 |     "node_modules/http-signature": {
1347 |       "version": "1.3.6",
1348 |       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
1349 |       "integrity": "sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==",
1350 |       "dev": true,
1351 |       "dependencies": {
1352 |         "assert-plus": "^1.0.0",
1353 |         "jsprim": "^2.0.2",
1354 |         "sshpk": "^1.14.1"
1355 |       },
1356 |       "engines": {
1357 |         "node": ">=0.10"
1358 |       }
1359 |     },
1360 |     "node_modules/human-signals": {
1361 |       "version": "1.1.1",
1362 |       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
1363 |       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
1364 |       "dev": true,
1365 |       "engines": {
1366 |         "node": ">=8.12.0"
1367 |       }
1368 |     },
1369 |     "node_modules/ieee754": {
1370 |       "version": "1.2.1",
1371 |       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
1372 |       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
1373 |       "dev": true,
1374 |       "funding": [
1375 |         {
1376 |           "type": "github",
1377 |           "url": "https://github.com/sponsors/feross"
1378 |         },
1379 |         {
1380 |           "type": "patreon",
1381 |           "url": "https://www.patreon.com/feross"
1382 |         },
1383 |         {
1384 |           "type": "consulting",
1385 |           "url": "https://feross.org/support"
1386 |         }
1387 |       ]
1388 |     },
1389 |     "node_modules/indent-string": {
1390 |       "version": "4.0.0",
1391 |       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
1392 |       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
1393 |       "dev": true,
1394 |       "engines": {
1395 |         "node": ">=8"
1396 |       }
1397 |     },
1398 |     "node_modules/inflight": {
1399 |       "version": "1.0.6",
1400 |       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
1401 |       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
1402 |       "dev": true,
1403 |       "dependencies": {
1404 |         "once": "^1.3.0",
1405 |         "wrappy": "1"
1406 |       }
1407 |     },
1408 |     "node_modules/inherits": {
1409 |       "version": "2.0.4",
1410 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
1411 |       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
1412 |       "dev": true
1413 |     },
1414 |     "node_modules/ini": {
1415 |       "version": "2.0.0",
1416 |       "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
1417 |       "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
1418 |       "dev": true,
1419 |       "engines": {
1420 |         "node": ">=10"
1421 |       }
1422 |     },
1423 |     "node_modules/is-ci": {
1424 |       "version": "3.0.1",
1425 |       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
1426 |       "integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
1427 |       "dev": true,
1428 |       "dependencies": {
1429 |         "ci-info": "^3.2.0"
1430 |       },
1431 |       "bin": {
1432 |         "is-ci": "bin.js"
1433 |       }
1434 |     },
1435 |     "node_modules/is-fullwidth-code-point": {
1436 |       "version": "3.0.0",
1437 |       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
1438 |       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
1439 |       "dev": true,
1440 |       "engines": {
1441 |         "node": ">=8"
1442 |       }
1443 |     },
1444 |     "node_modules/is-installed-globally": {
1445 |       "version": "0.4.0",
1446 |       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
1447 |       "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
1448 |       "dev": true,
1449 |       "dependencies": {
1450 |         "global-dirs": "^3.0.0",
1451 |         "is-path-inside": "^3.0.2"
1452 |       },
1453 |       "engines": {
1454 |         "node": ">=10"
1455 |       },
1456 |       "funding": {
1457 |         "url": "https://github.com/sponsors/sindresorhus"
1458 |       }
1459 |     },
1460 |     "node_modules/is-path-inside": {
1461 |       "version": "3.0.3",
1462 |       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
1463 |       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
1464 |       "dev": true,
1465 |       "engines": {
1466 |         "node": ">=8"
1467 |       }
1468 |     },
1469 |     "node_modules/is-stream": {
1470 |       "version": "2.0.1",
1471 |       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
1472 |       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
1473 |       "dev": true,
1474 |       "engines": {
1475 |         "node": ">=8"
1476 |       },
1477 |       "funding": {
1478 |         "url": "https://github.com/sponsors/sindresorhus"
1479 |       }
1480 |     },
1481 |     "node_modules/is-typedarray": {
1482 |       "version": "1.0.0",
1483 |       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
1484 |       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
1485 |       "dev": true
1486 |     },
1487 |     "node_modules/is-unicode-supported": {
1488 |       "version": "0.1.0",
1489 |       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
1490 |       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
1491 |       "dev": true,
1492 |       "engines": {
1493 |         "node": ">=10"
1494 |       },
1495 |       "funding": {
1496 |         "url": "https://github.com/sponsors/sindresorhus"
1497 |       }
1498 |     },
1499 |     "node_modules/isexe": {
1500 |       "version": "2.0.0",
1501 |       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
1502 |       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
1503 |       "dev": true
1504 |     },
1505 |     "node_modules/isstream": {
1506 |       "version": "0.1.2",
1507 |       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
1508 |       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
1509 |       "dev": true
1510 |     },
1511 |     "node_modules/js-tokens": {
1512 |       "version": "4.0.0",
1513 |       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
1514 |       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
1515 |       "dev": true
1516 |     },
1517 |     "node_modules/jsbn": {
1518 |       "version": "0.1.1",
1519 |       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
1520 |       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
1521 |       "dev": true
1522 |     },
1523 |     "node_modules/json-schema": {
1524 |       "version": "0.4.0",
1525 |       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
1526 |       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
1527 |       "dev": true
1528 |     },
1529 |     "node_modules/json-stringify-safe": {
1530 |       "version": "5.0.1",
1531 |       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
1532 |       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
1533 |       "dev": true
1534 |     },
1535 |     "node_modules/jsonfile": {
1536 |       "version": "6.1.0",
1537 |       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
1538 |       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
1539 |       "dev": true,
1540 |       "dependencies": {
1541 |         "universalify": "^2.0.0"
1542 |       },
1543 |       "optionalDependencies": {
1544 |         "graceful-fs": "^4.1.6"
1545 |       }
1546 |     },
1547 |     "node_modules/jsprim": {
1548 |       "version": "2.0.2",
1549 |       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
1550 |       "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
1551 |       "dev": true,
1552 |       "engines": [
1553 |         "node >=0.6.0"
1554 |       ],
1555 |       "dependencies": {
1556 |         "assert-plus": "1.0.0",
1557 |         "extsprintf": "1.3.0",
1558 |         "json-schema": "0.4.0",
1559 |         "verror": "1.10.0"
1560 |       }
1561 |     },
1562 |     "node_modules/lazy-ass": {
1563 |       "version": "1.6.0",
1564 |       "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
1565 |       "integrity": "sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==",
1566 |       "dev": true,
1567 |       "engines": {
1568 |         "node": "> 0.8"
1569 |       }
1570 |     },
1571 |     "node_modules/listr2": {
1572 |       "version": "3.14.0",
1573 |       "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
1574 |       "integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
1575 |       "dev": true,
1576 |       "dependencies": {
1577 |         "cli-truncate": "^2.1.0",
1578 |         "colorette": "^2.0.16",
1579 |         "log-update": "^4.0.0",
1580 |         "p-map": "^4.0.0",
1581 |         "rfdc": "^1.3.0",
1582 |         "rxjs": "^7.5.1",
1583 |         "through": "^2.3.8",
1584 |         "wrap-ansi": "^7.0.0"
1585 |       },
1586 |       "engines": {
1587 |         "node": ">=10.0.0"
1588 |       },
1589 |       "peerDependencies": {
1590 |         "enquirer": ">= 2.3.0 < 3"
1591 |       },
1592 |       "peerDependenciesMeta": {
1593 |         "enquirer": {
1594 |           "optional": true
1595 |         }
1596 |       }
1597 |     },
1598 |     "node_modules/lodash": {
1599 |       "version": "4.17.21",
1600 |       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
1601 |       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
1602 |       "dev": true
1603 |     },
1604 |     "node_modules/lodash.once": {
1605 |       "version": "4.1.1",
1606 |       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
1607 |       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
1608 |       "dev": true
1609 |     },
1610 |     "node_modules/log-symbols": {
1611 |       "version": "4.1.0",
1612 |       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
1613 |       "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
1614 |       "dev": true,
1615 |       "dependencies": {
1616 |         "chalk": "^4.1.0",
1617 |         "is-unicode-supported": "^0.1.0"
1618 |       },
1619 |       "engines": {
1620 |         "node": ">=10"
1621 |       },
1622 |       "funding": {
1623 |         "url": "https://github.com/sponsors/sindresorhus"
1624 |       }
1625 |     },
1626 |     "node_modules/log-update": {
1627 |       "version": "4.0.0",
1628 |       "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
1629 |       "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
1630 |       "dev": true,
1631 |       "dependencies": {
1632 |         "ansi-escapes": "^4.3.0",
1633 |         "cli-cursor": "^3.1.0",
1634 |         "slice-ansi": "^4.0.0",
1635 |         "wrap-ansi": "^6.2.0"
1636 |       },
1637 |       "engines": {
1638 |         "node": ">=10"
1639 |       },
1640 |       "funding": {
1641 |         "url": "https://github.com/sponsors/sindresorhus"
1642 |       }
1643 |     },
1644 |     "node_modules/log-update/node_modules/slice-ansi": {
1645 |       "version": "4.0.0",
1646 |       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
1647 |       "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
1648 |       "dev": true,
1649 |       "dependencies": {
1650 |         "ansi-styles": "^4.0.0",
1651 |         "astral-regex": "^2.0.0",
1652 |         "is-fullwidth-code-point": "^3.0.0"
1653 |       },
1654 |       "engines": {
1655 |         "node": ">=10"
1656 |       },
1657 |       "funding": {
1658 |         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
1659 |       }
1660 |     },
1661 |     "node_modules/log-update/node_modules/wrap-ansi": {
1662 |       "version": "6.2.0",
1663 |       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
1664 |       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
1665 |       "dev": true,
1666 |       "dependencies": {
1667 |         "ansi-styles": "^4.0.0",
1668 |         "string-width": "^4.1.0",
1669 |         "strip-ansi": "^6.0.0"
1670 |       },
1671 |       "engines": {
1672 |         "node": ">=8"
1673 |       }
1674 |     },
1675 |     "node_modules/loose-envify": {
1676 |       "version": "1.4.0",
1677 |       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
1678 |       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
1679 |       "dev": true,
1680 |       "dependencies": {
1681 |         "js-tokens": "^3.0.0 || ^4.0.0"
1682 |       },
1683 |       "bin": {
1684 |         "loose-envify": "cli.js"
1685 |       }
1686 |     },
1687 |     "node_modules/lru-cache": {
1688 |       "version": "6.0.0",
1689 |       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
1690 |       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
1691 |       "dev": true,
1692 |       "dependencies": {
1693 |         "yallist": "^4.0.0"
1694 |       },
1695 |       "engines": {
1696 |         "node": ">=10"
1697 |       }
1698 |     },
1699 |     "node_modules/merge-stream": {
1700 |       "version": "2.0.0",
1701 |       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
1702 |       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
1703 |       "dev": true
1704 |     },
1705 |     "node_modules/mime-db": {
1706 |       "version": "1.52.0",
1707 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
1708 |       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
1709 |       "dev": true,
1710 |       "engines": {
1711 |         "node": ">= 0.6"
1712 |       }
1713 |     },
1714 |     "node_modules/mime-types": {
1715 |       "version": "2.1.35",
1716 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
1717 |       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
1718 |       "dev": true,
1719 |       "dependencies": {
1720 |         "mime-db": "1.52.0"
1721 |       },
1722 |       "engines": {
1723 |         "node": ">= 0.6"
1724 |       }
1725 |     },
1726 |     "node_modules/mimic-fn": {
1727 |       "version": "2.1.0",
1728 |       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
1729 |       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
1730 |       "dev": true,
1731 |       "engines": {
1732 |         "node": ">=6"
1733 |       }
1734 |     },
1735 |     "node_modules/minimatch": {
1736 |       "version": "3.1.2",
1737 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
1738 |       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
1739 |       "dev": true,
1740 |       "dependencies": {
1741 |         "brace-expansion": "^1.1.7"
1742 |       },
1743 |       "engines": {
1744 |         "node": "*"
1745 |       }
1746 |     },
1747 |     "node_modules/minimist": {
1748 |       "version": "1.2.8",
1749 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
1750 |       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
1751 |       "dev": true,
1752 |       "funding": {
1753 |         "url": "https://github.com/sponsors/ljharb"
1754 |       }
1755 |     },
1756 |     "node_modules/ms": {
1757 |       "version": "2.1.2",
1758 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
1759 |       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
1760 |       "dev": true
1761 |     },
1762 |     "node_modules/npm-run-path": {
1763 |       "version": "4.0.1",
1764 |       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
1765 |       "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
1766 |       "dev": true,
1767 |       "dependencies": {
1768 |         "path-key": "^3.0.0"
1769 |       },
1770 |       "engines": {
1771 |         "node": ">=8"
1772 |       }
1773 |     },
1774 |     "node_modules/once": {
1775 |       "version": "1.4.0",
1776 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
1777 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
1778 |       "dev": true,
1779 |       "dependencies": {
1780 |         "wrappy": "1"
1781 |       }
1782 |     },
1783 |     "node_modules/onetime": {
1784 |       "version": "5.1.2",
1785 |       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
1786 |       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
1787 |       "dev": true,
1788 |       "dependencies": {
1789 |         "mimic-fn": "^2.1.0"
1790 |       },
1791 |       "engines": {
1792 |         "node": ">=6"
1793 |       },
1794 |       "funding": {
1795 |         "url": "https://github.com/sponsors/sindresorhus"
1796 |       }
1797 |     },
1798 |     "node_modules/ospath": {
1799 |       "version": "1.2.2",
1800 |       "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
1801 |       "integrity": "sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=",
1802 |       "dev": true
1803 |     },
1804 |     "node_modules/p-map": {
1805 |       "version": "4.0.0",
1806 |       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
1807 |       "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
1808 |       "dev": true,
1809 |       "dependencies": {
1810 |         "aggregate-error": "^3.0.0"
1811 |       },
1812 |       "engines": {
1813 |         "node": ">=10"
1814 |       },
1815 |       "funding": {
1816 |         "url": "https://github.com/sponsors/sindresorhus"
1817 |       }
1818 |     },
1819 |     "node_modules/path-is-absolute": {
1820 |       "version": "1.0.1",
1821 |       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
1822 |       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
1823 |       "dev": true,
1824 |       "engines": {
1825 |         "node": ">=0.10.0"
1826 |       }
1827 |     },
1828 |     "node_modules/path-key": {
1829 |       "version": "3.1.1",
1830 |       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
1831 |       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
1832 |       "dev": true,
1833 |       "engines": {
1834 |         "node": ">=8"
1835 |       }
1836 |     },
1837 |     "node_modules/pend": {
1838 |       "version": "1.2.0",
1839 |       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
1840 |       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
1841 |       "dev": true
1842 |     },
1843 |     "node_modules/performance-now": {
1844 |       "version": "2.1.0",
1845 |       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
1846 |       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
1847 |       "dev": true
1848 |     },
1849 |     "node_modules/pify": {
1850 |       "version": "2.3.0",
1851 |       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
1852 |       "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
1853 |       "dev": true,
1854 |       "engines": {
1855 |         "node": ">=0.10.0"
1856 |       }
1857 |     },
1858 |     "node_modules/pretty-bytes": {
1859 |       "version": "5.6.0",
1860 |       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
1861 |       "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
1862 |       "dev": true,
1863 |       "engines": {
1864 |         "node": ">=6"
1865 |       },
1866 |       "funding": {
1867 |         "url": "https://github.com/sponsors/sindresorhus"
1868 |       }
1869 |     },
1870 |     "node_modules/proxy-from-env": {
1871 |       "version": "1.0.0",
1872 |       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
1873 |       "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
1874 |       "dev": true
1875 |     },
1876 |     "node_modules/psl": {
1877 |       "version": "1.8.0",
1878 |       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
1879 |       "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
1880 |       "dev": true
1881 |     },
1882 |     "node_modules/pump": {
1883 |       "version": "3.0.0",
1884 |       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
1885 |       "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
1886 |       "dev": true,
1887 |       "dependencies": {
1888 |         "end-of-stream": "^1.1.0",
1889 |         "once": "^1.3.1"
1890 |       }
1891 |     },
1892 |     "node_modules/punycode": {
1893 |       "version": "2.1.1",
1894 |       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
1895 |       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
1896 |       "dev": true,
1897 |       "engines": {
1898 |         "node": ">=6"
1899 |       }
1900 |     },
1901 |     "node_modules/qs": {
1902 |       "version": "6.5.3",
1903 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
1904 |       "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
1905 |       "dev": true,
1906 |       "engines": {
1907 |         "node": ">=0.6"
1908 |       }
1909 |     },
1910 |     "node_modules/react": {
1911 |       "version": "18.2.0",
1912 |       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
1913 |       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
1914 |       "dev": true,
1915 |       "dependencies": {
1916 |         "loose-envify": "^1.1.0"
1917 |       },
1918 |       "engines": {
1919 |         "node": ">=0.10.0"
1920 |       }
1921 |     },
1922 |     "node_modules/react-dom": {
1923 |       "version": "18.2.0",
1924 |       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
1925 |       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
1926 |       "dev": true,
1927 |       "dependencies": {
1928 |         "loose-envify": "^1.1.0",
1929 |         "scheduler": "^0.23.0"
1930 |       },
1931 |       "peerDependencies": {
1932 |         "react": "^18.2.0"
1933 |       }
1934 |     },
1935 |     "node_modules/request-progress": {
1936 |       "version": "3.0.0",
1937 |       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
1938 |       "integrity": "sha1-TKdUCBx/7GP1BeT6qCWqBs1mnb4=",
1939 |       "dev": true,
1940 |       "dependencies": {
1941 |         "throttleit": "^1.0.0"
1942 |       }
1943 |     },
1944 |     "node_modules/restore-cursor": {
1945 |       "version": "3.1.0",
1946 |       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
1947 |       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
1948 |       "dev": true,
1949 |       "dependencies": {
1950 |         "onetime": "^5.1.0",
1951 |         "signal-exit": "^3.0.2"
1952 |       },
1953 |       "engines": {
1954 |         "node": ">=8"
1955 |       }
1956 |     },
1957 |     "node_modules/rfdc": {
1958 |       "version": "1.3.0",
1959 |       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
1960 |       "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
1961 |       "dev": true
1962 |     },
1963 |     "node_modules/rimraf": {
1964 |       "version": "3.0.2",
1965 |       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
1966 |       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
1967 |       "dev": true,
1968 |       "dependencies": {
1969 |         "glob": "^7.1.3"
1970 |       },
1971 |       "bin": {
1972 |         "rimraf": "bin.js"
1973 |       },
1974 |       "funding": {
1975 |         "url": "https://github.com/sponsors/isaacs"
1976 |       }
1977 |     },
1978 |     "node_modules/rxjs": {
1979 |       "version": "7.5.5",
1980 |       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz",
1981 |       "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==",
1982 |       "dev": true,
1983 |       "dependencies": {
1984 |         "tslib": "^2.1.0"
1985 |       }
1986 |     },
1987 |     "node_modules/safe-buffer": {
1988 |       "version": "5.2.1",
1989 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
1990 |       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
1991 |       "dev": true,
1992 |       "funding": [
1993 |         {
1994 |           "type": "github",
1995 |           "url": "https://github.com/sponsors/feross"
1996 |         },
1997 |         {
1998 |           "type": "patreon",
1999 |           "url": "https://www.patreon.com/feross"
2000 |         },
2001 |         {
2002 |           "type": "consulting",
2003 |           "url": "https://feross.org/support"
2004 |         }
2005 |       ]
2006 |     },
2007 |     "node_modules/safer-buffer": {
2008 |       "version": "2.1.2",
2009 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
2010 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
2011 |       "dev": true
2012 |     },
2013 |     "node_modules/scheduler": {
2014 |       "version": "0.23.0",
2015 |       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
2016 |       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
2017 |       "dev": true,
2018 |       "dependencies": {
2019 |         "loose-envify": "^1.1.0"
2020 |       }
2021 |     },
2022 |     "node_modules/semver": {
2023 |       "version": "7.5.4",
2024 |       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
2025 |       "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
2026 |       "dev": true,
2027 |       "dependencies": {
2028 |         "lru-cache": "^6.0.0"
2029 |       },
2030 |       "bin": {
2031 |         "semver": "bin/semver.js"
2032 |       },
2033 |       "engines": {
2034 |         "node": ">=10"
2035 |       }
2036 |     },
2037 |     "node_modules/shebang-command": {
2038 |       "version": "2.0.0",
2039 |       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
2040 |       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
2041 |       "dev": true,
2042 |       "dependencies": {
2043 |         "shebang-regex": "^3.0.0"
2044 |       },
2045 |       "engines": {
2046 |         "node": ">=8"
2047 |       }
2048 |     },
2049 |     "node_modules/shebang-regex": {
2050 |       "version": "3.0.0",
2051 |       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
2052 |       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
2053 |       "dev": true,
2054 |       "engines": {
2055 |         "node": ">=8"
2056 |       }
2057 |     },
2058 |     "node_modules/signal-exit": {
2059 |       "version": "3.0.7",
2060 |       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
2061 |       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
2062 |       "dev": true
2063 |     },
2064 |     "node_modules/slice-ansi": {
2065 |       "version": "3.0.0",
2066 |       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
2067 |       "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
2068 |       "dev": true,
2069 |       "dependencies": {
2070 |         "ansi-styles": "^4.0.0",
2071 |         "astral-regex": "^2.0.0",
2072 |         "is-fullwidth-code-point": "^3.0.0"
2073 |       },
2074 |       "engines": {
2075 |         "node": ">=8"
2076 |       }
2077 |     },
2078 |     "node_modules/sshpk": {
2079 |       "version": "1.17.0",
2080 |       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
2081 |       "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
2082 |       "dev": true,
2083 |       "dependencies": {
2084 |         "asn1": "~0.2.3",
2085 |         "assert-plus": "^1.0.0",
2086 |         "bcrypt-pbkdf": "^1.0.0",
2087 |         "dashdash": "^1.12.0",
2088 |         "ecc-jsbn": "~0.1.1",
2089 |         "getpass": "^0.1.1",
2090 |         "jsbn": "~0.1.0",
2091 |         "safer-buffer": "^2.0.2",
2092 |         "tweetnacl": "~0.14.0"
2093 |       },
2094 |       "bin": {
2095 |         "sshpk-conv": "bin/sshpk-conv",
2096 |         "sshpk-sign": "bin/sshpk-sign",
2097 |         "sshpk-verify": "bin/sshpk-verify"
2098 |       },
2099 |       "engines": {
2100 |         "node": ">=0.10.0"
2101 |       }
2102 |     },
2103 |     "node_modules/string-width": {
2104 |       "version": "4.2.3",
2105 |       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
2106 |       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
2107 |       "dev": true,
2108 |       "dependencies": {
2109 |         "emoji-regex": "^8.0.0",
2110 |         "is-fullwidth-code-point": "^3.0.0",
2111 |         "strip-ansi": "^6.0.1"
2112 |       },
2113 |       "engines": {
2114 |         "node": ">=8"
2115 |       }
2116 |     },
2117 |     "node_modules/strip-ansi": {
2118 |       "version": "6.0.1",
2119 |       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
2120 |       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
2121 |       "dev": true,
2122 |       "dependencies": {
2123 |         "ansi-regex": "^5.0.1"
2124 |       },
2125 |       "engines": {
2126 |         "node": ">=8"
2127 |       }
2128 |     },
2129 |     "node_modules/strip-final-newline": {
2130 |       "version": "2.0.0",
2131 |       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
2132 |       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
2133 |       "dev": true,
2134 |       "engines": {
2135 |         "node": ">=6"
2136 |       }
2137 |     },
2138 |     "node_modules/supports-color": {
2139 |       "version": "8.1.1",
2140 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
2141 |       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
2142 |       "dev": true,
2143 |       "dependencies": {
2144 |         "has-flag": "^4.0.0"
2145 |       },
2146 |       "engines": {
2147 |         "node": ">=10"
2148 |       },
2149 |       "funding": {
2150 |         "url": "https://github.com/chalk/supports-color?sponsor=1"
2151 |       }
2152 |     },
2153 |     "node_modules/throttleit": {
2154 |       "version": "1.0.0",
2155 |       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
2156 |       "integrity": "sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=",
2157 |       "dev": true
2158 |     },
2159 |     "node_modules/through": {
2160 |       "version": "2.3.8",
2161 |       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
2162 |       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
2163 |       "dev": true
2164 |     },
2165 |     "node_modules/tmp": {
2166 |       "version": "0.2.1",
2167 |       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
2168 |       "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
2169 |       "dev": true,
2170 |       "dependencies": {
2171 |         "rimraf": "^3.0.0"
2172 |       },
2173 |       "engines": {
2174 |         "node": ">=8.17.0"
2175 |       }
2176 |     },
2177 |     "node_modules/tough-cookie": {
2178 |       "version": "2.5.0",
2179 |       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
2180 |       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
2181 |       "dev": true,
2182 |       "dependencies": {
2183 |         "psl": "^1.1.28",
2184 |         "punycode": "^2.1.1"
2185 |       },
2186 |       "engines": {
2187 |         "node": ">=0.8"
2188 |       }
2189 |     },
2190 |     "node_modules/tslib": {
2191 |       "version": "2.4.0",
2192 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
2193 |       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
2194 |       "dev": true
2195 |     },
2196 |     "node_modules/tunnel-agent": {
2197 |       "version": "0.6.0",
2198 |       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
2199 |       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
2200 |       "dev": true,
2201 |       "dependencies": {
2202 |         "safe-buffer": "^5.0.1"
2203 |       },
2204 |       "engines": {
2205 |         "node": "*"
2206 |       }
2207 |     },
2208 |     "node_modules/tweetnacl": {
2209 |       "version": "0.14.5",
2210 |       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
2211 |       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
2212 |       "dev": true
2213 |     },
2214 |     "node_modules/type-fest": {
2215 |       "version": "0.21.3",
2216 |       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
2217 |       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
2218 |       "dev": true,
2219 |       "engines": {
2220 |         "node": ">=10"
2221 |       },
2222 |       "funding": {
2223 |         "url": "https://github.com/sponsors/sindresorhus"
2224 |       }
2225 |     },
2226 |     "node_modules/typescript": {
2227 |       "version": "5.1.6",
2228 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
2229 |       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
2230 |       "dev": true,
2231 |       "bin": {
2232 |         "tsc": "bin/tsc",
2233 |         "tsserver": "bin/tsserver"
2234 |       },
2235 |       "engines": {
2236 |         "node": ">=14.17"
2237 |       }
2238 |     },
2239 |     "node_modules/universalify": {
2240 |       "version": "2.0.0",
2241 |       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
2242 |       "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
2243 |       "dev": true,
2244 |       "engines": {
2245 |         "node": ">= 10.0.0"
2246 |       }
2247 |     },
2248 |     "node_modules/untildify": {
2249 |       "version": "4.0.0",
2250 |       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
2251 |       "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
2252 |       "dev": true,
2253 |       "engines": {
2254 |         "node": ">=8"
2255 |       }
2256 |     },
2257 |     "node_modules/uuid": {
2258 |       "version": "8.3.2",
2259 |       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
2260 |       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
2261 |       "dev": true,
2262 |       "bin": {
2263 |         "uuid": "dist/bin/uuid"
2264 |       }
2265 |     },
2266 |     "node_modules/verror": {
2267 |       "version": "1.10.0",
2268 |       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
2269 |       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
2270 |       "dev": true,
2271 |       "engines": [
2272 |         "node >=0.6.0"
2273 |       ],
2274 |       "dependencies": {
2275 |         "assert-plus": "^1.0.0",
2276 |         "core-util-is": "1.0.2",
2277 |         "extsprintf": "^1.2.0"
2278 |       }
2279 |     },
2280 |     "node_modules/which": {
2281 |       "version": "2.0.2",
2282 |       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
2283 |       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
2284 |       "dev": true,
2285 |       "dependencies": {
2286 |         "isexe": "^2.0.0"
2287 |       },
2288 |       "bin": {
2289 |         "node-which": "bin/node-which"
2290 |       },
2291 |       "engines": {
2292 |         "node": ">= 8"
2293 |       }
2294 |     },
2295 |     "node_modules/wrap-ansi": {
2296 |       "version": "7.0.0",
2297 |       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
2298 |       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
2299 |       "dev": true,
2300 |       "dependencies": {
2301 |         "ansi-styles": "^4.0.0",
2302 |         "string-width": "^4.1.0",
2303 |         "strip-ansi": "^6.0.0"
2304 |       },
2305 |       "engines": {
2306 |         "node": ">=10"
2307 |       },
2308 |       "funding": {
2309 |         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
2310 |       }
2311 |     },
2312 |     "node_modules/wrappy": {
2313 |       "version": "1.0.2",
2314 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
2315 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
2316 |       "dev": true
2317 |     },
2318 |     "node_modules/yallist": {
2319 |       "version": "4.0.0",
2320 |       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
2321 |       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
2322 |       "dev": true
2323 |     },
2324 |     "node_modules/yauzl": {
2325 |       "version": "2.10.0",
2326 |       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
2327 |       "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
2328 |       "dev": true,
2329 |       "dependencies": {
2330 |         "buffer-crc32": "~0.2.3",
2331 |         "fd-slicer": "~1.1.0"
2332 |       }
2333 |     }
2334 |   }
2335 | }
2336 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-animate-height",
 3 |   "version": "3.2.3",
 4 |   "description": "Lightweight React component for animating height using CSS transitions.",
 5 |   "main": "./dist/cjs/index.cjs",
 6 |   "types": "./dist/esm/index.d.ts",
 7 |   "type": "module",
 8 |   "exports": {
 9 |     ".": {
10 |       "import": "./dist/esm/index.js",
11 |       "require": "./dist/cjs/index.cjs"
12 |     }
13 |   },
14 |   "author": "Stanko",
15 |   "homepage": "https://github.com/Stanko/react-animate-height",
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/Stanko/react-animate-height.git"
19 |   },
20 |   "bugs": {
21 |     "url": "https://github.com/Stanko/react-animate-height/issues"
22 |   },
23 |   "scripts": {
24 |     "clean": "rm -rf dist",
25 |     "build:esm": "tsc -p tsconfig.json",
26 |     "build:cjs": "tsc -p tsconfig-cjs.json && mv ./dist/cjs/index.js ./dist/cjs/index.cjs",
27 |     "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:docs",
28 |     "start": "esbuild docs/docs.tsx docs/docs.css --bundle --tsconfig=tsconfig-demo.json --servedir=docs --outdir=docs/react-animate-height",
29 |     "build:docs": "esbuild docs/docs.tsx --bundle --tsconfig=tsconfig-demo.json --outdir=docs --minify --sourcemap",
30 |     "prepublishOnly": "npm run test && npm run build",
31 |     "start:test": "esbuild test/test.tsx test/test.css --bundle --tsconfig=tsconfig-demo.json --serve=8080 --servedir=test --outdir=test/output",
32 |     "test": "node test.js",
33 |     "cypress:run": "cypress run",
34 |     "cypress:open": "cypress open"
35 |   },
36 |   "peerDependencies": {
37 |     "react": ">=16.8.0",
38 |     "react-dom": ">=16.8.0"
39 |   },
40 |   "engines": {
41 |     "node": ">= 12.0.0"
42 |   },
43 |   "keywords": [
44 |     "react",
45 |     "react-component",
46 |     "slide",
47 |     "slide up",
48 |     "slide down",
49 |     "animate height"
50 |   ],
51 |   "license": "MIT",
52 |   "devDependencies": {
53 |     "@types/node": "^20.4.1",
54 |     "@types/react": "^18.2.14",
55 |     "@types/react-dom": "^18.2.6",
56 |     "cypress": "^12.17.0",
57 |     "esbuild": "^0.18.11",
58 |     "react": "^18.2.0",
59 |     "react-dom": "^18.2.0",
60 |     "typescript": "^5.1.6"
61 |   },
62 |   "files": [
63 |     "dist/",
64 |     "CHANGELOG.md"
65 |   ]
66 | }


--------------------------------------------------------------------------------
/server-render-test.js:
--------------------------------------------------------------------------------
 1 | const React = require('react');
 2 | const ReactDOMServer = require('react-dom/server');
 3 | const AnimateHeight = require('./dist/cjs/index.js').default;
 4 | 
 5 | const example = React.createElement('div', null, [
 6 |   React.createElement(AnimateHeight, { key: '1', height: 0 }, 'Hello World'),
 7 |   React.createElement(
 8 |     AnimateHeight,
 9 |     { key: '2', height: 'auto' },
10 |     'Hello World'
11 |   ),
12 |   React.createElement(AnimateHeight, { key: '3', height: 100 }, 'Hello World'),
13 | ]);
14 | 
15 | const renderedString = ReactDOMServer.renderToString(example);
16 | 
17 | const expectedString =
18 |   '<div><div aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div>Hello World</div></div><div aria-hidden="false" class="rah-static rah-static--height-auto " style="height:auto;overflow:visible"><div>Hello World</div></div><div aria-hidden="false" class="rah-static rah-static--height-specific " style="height:100px;overflow:hidden"><div>Hello World</div></div></div>';
19 | 
20 | const reset = '\x1b[0m';
21 | const red = '\x1b[31m';
22 | const green = '\x1b[32m';
23 | 
24 | if (renderedString === expectedString) {
25 |   console.log(green + '\nTest passed\n' + reset);
26 | } else {
27 |   console.log('\nRendered:');
28 |   console.log(red + renderedString + reset);
29 |   console.log('\nExpected:');
30 |   console.log(green + expectedString + reset);
31 |   console.log('\n', red);
32 |   throw new Error('Test failed');
33 | }
34 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { CSSProperties, useEffect, useRef, useState } from 'react';
  2 | 
  3 | // ------------------ Types
  4 | 
  5 | export type Height = 'auto' | number | `${number}%`;
  6 | type Timeout = ReturnType<typeof setTimeout>;
  7 | type Overflow = 'auto' | 'visible' | 'hidden' | undefined;
  8 | type AnimationStateClasses = {
  9 |   animating: string;
 10 |   animatingUp: string;
 11 |   animatingDown: string;
 12 |   animatingToHeightZero: string;
 13 |   animatingToHeightAuto: string;
 14 |   animatingToHeightSpecific: string;
 15 |   static: string;
 16 |   staticHeightZero: string;
 17 |   staticHeightAuto: string;
 18 |   staticHeightSpecific: string;
 19 | };
 20 | 
 21 | // ------------------ Helpers
 22 | 
 23 | function isNumber(n: string) {
 24 |   const number = parseFloat(n);
 25 |   return !isNaN(number) && isFinite(number);
 26 | }
 27 | 
 28 | function isPercentage(height: Height) {
 29 |   // Percentage height
 30 |   return (
 31 |     typeof height === 'string' &&
 32 |     height[height.length - 1] === '%' &&
 33 |     isNumber(height.substring(0, height.length - 1))
 34 |   );
 35 | }
 36 | 
 37 | function hideContent(
 38 |   element: HTMLDivElement | null,
 39 |   height: Height,
 40 |   disableDisplayNone: boolean
 41 | ) {
 42 |   // Check for element?.style is added cause this would fail in tests (react-test-renderer)
 43 |   // Read more here: https://github.com/Stanko/react-animate-height/issues/17
 44 |   if (
 45 |     height === 0 &&
 46 |     !disableDisplayNone &&
 47 |     element?.style &&
 48 |     element?.children.length > 0
 49 |   ) {
 50 |     element.style.display = 'none';
 51 |   }
 52 | }
 53 | 
 54 | function showContent(element: HTMLDivElement | null, height: Height) {
 55 |   // Check for element?.style is added cause this would fail in tests (react-test-renderer)
 56 |   // Read more here: https://github.com/Stanko/react-animate-height/issues/17
 57 |   if (height === 0 && element?.style) {
 58 |     element.style.display = '';
 59 |   }
 60 | }
 61 | 
 62 | const ANIMATION_STATE_CLASSES: AnimationStateClasses = {
 63 |   animating: 'rah-animating',
 64 |   animatingUp: 'rah-animating--up',
 65 |   animatingDown: 'rah-animating--down',
 66 |   animatingToHeightZero: 'rah-animating--to-height-zero',
 67 |   animatingToHeightAuto: 'rah-animating--to-height-auto',
 68 |   animatingToHeightSpecific: 'rah-animating--to-height-specific',
 69 |   static: 'rah-static',
 70 |   staticHeightZero: 'rah-static--height-zero',
 71 |   staticHeightAuto: 'rah-static--height-auto',
 72 |   staticHeightSpecific: 'rah-static--height-specific',
 73 | };
 74 | 
 75 | function getStaticStateClasses(
 76 |   animationStateClasses: AnimationStateClasses,
 77 |   height: Height
 78 | ) {
 79 |   return [
 80 |     animationStateClasses.static,
 81 |     height === 0 && animationStateClasses.staticHeightZero,
 82 |     typeof height === 'number' && height > 0
 83 |       ? animationStateClasses.staticHeightSpecific
 84 |       : null,
 85 |     height === 'auto' && animationStateClasses.staticHeightAuto,
 86 |   ]
 87 |     .filter((v) => v)
 88 |     .join(' ');
 89 | }
 90 | 
 91 | // ------------------ Component
 92 | 
 93 | const propsToOmitFromDiv: (keyof AnimateHeightProps)[] = [
 94 |   'animateOpacity',
 95 |   'animationStateClasses',
 96 |   'applyInlineTransitions',
 97 |   'children',
 98 |   'className',
 99 |   'contentClassName',
100 |   'contentRef',
101 |   'delay',
102 |   'duration',
103 |   'easing',
104 |   'height',
105 |   'onHeightAnimationEnd',
106 |   'onHeightAnimationStart',
107 |   'style',
108 |   'disableDisplayNone',
109 | ];
110 | 
111 | // display and height are set by the component itself, therefore ignored
112 | type OmitCSSProperties = 'display' | 'height';
113 | 
114 | export interface AnimateHeightProps
115 |   extends React.HTMLAttributes<HTMLDivElement> {
116 |   animateOpacity?: boolean;
117 |   animationStateClasses?: AnimationStateClasses;
118 |   applyInlineTransitions?: boolean;
119 |   contentClassName?: string;
120 |   contentRef?: React.MutableRefObject<HTMLDivElement | null>;
121 |   delay?: number;
122 |   disableDisplayNone?: boolean;
123 |   duration?: number;
124 |   easing?: string;
125 |   height: Height;
126 |   onHeightAnimationEnd?: (newHeight: Height) => any;
127 |   onHeightAnimationStart?: (newHeight: Height) => any;
128 |   style?: Omit<CSSProperties, OmitCSSProperties>;
129 | }
130 | 
131 | const AnimateHeight = React.forwardRef<HTMLDivElement, AnimateHeightProps>(
132 |   (componentProps, ref) => {
133 |     // const AnimateHeight = forwardRef((componentProps: AnimateHeightProps, ref) => {
134 |     // const AnimateHeight: React.FC<AnimateHeightProps> = (componentProps) => {
135 |     const {
136 |       animateOpacity = false,
137 |       animationStateClasses = {},
138 |       applyInlineTransitions = true,
139 |       children,
140 |       className = '',
141 |       contentClassName,
142 |       delay: userDelay = 0,
143 |       disableDisplayNone = false,
144 |       duration: userDuration = 500,
145 |       easing = 'ease',
146 |       height,
147 |       onHeightAnimationEnd,
148 |       onHeightAnimationStart,
149 |       style,
150 |       contentRef,
151 |     } = componentProps;
152 | 
153 |     const divProps = { ...componentProps };
154 |     propsToOmitFromDiv.forEach((propKey) => {
155 |       delete divProps[propKey];
156 |     });
157 | 
158 |     // ------------------ Initialization
159 |     const prevHeight = useRef<Height>(height);
160 |     const contentElement = useRef<HTMLDivElement | null>(null);
161 | 
162 |     const animationClassesTimeoutID = useRef<Timeout>();
163 |     const timeoutID = useRef<Timeout>();
164 | 
165 |     const stateClasses = useRef<AnimationStateClasses>({
166 |       ...ANIMATION_STATE_CLASSES,
167 |       ...animationStateClasses,
168 |     });
169 | 
170 |     const isBrowser = typeof window !== 'undefined';
171 | 
172 |     const prefersReducedMotion = useRef<boolean>(
173 |       isBrowser && window.matchMedia
174 |         ? window.matchMedia('(prefers-reduced-motion)').matches
175 |         : false
176 |     );
177 | 
178 |     const delay = prefersReducedMotion.current ? 0 : userDelay;
179 |     const duration = prefersReducedMotion.current ? 0 : userDuration;
180 | 
181 |     let initHeight: Height = height;
182 |     let initOverflow: Overflow = 'visible';
183 | 
184 |     if (typeof height === 'number') {
185 |       // Reset negative height to 0
186 |       initHeight = height < 0 ? 0 : height;
187 |       initOverflow = 'hidden';
188 |     } else if (isPercentage(initHeight)) {
189 |       // If value is string "0%" make sure we convert it to number 0
190 |       initHeight = height === '0%' ? 0 : height;
191 |       initOverflow = 'hidden';
192 |     }
193 | 
194 |     const [currentHeight, setCurrentHeight] = useState<Height>(initHeight);
195 |     const [overflow, setOverflow] = useState<Overflow>(initOverflow);
196 |     const [useTransitions, setUseTransitions] = useState<boolean>(false);
197 |     const [animationStateClassNames, setAnimationStateClassNames] =
198 |       useState<string>(getStaticStateClasses(stateClasses.current, height));
199 | 
200 |     // ------------------ Did mount
201 |     useEffect(() => {
202 |       // Hide content if height is 0 (to prevent tabbing into it)
203 |       hideContent(contentElement.current, currentHeight, disableDisplayNone);
204 | 
205 |       // This should be explicitly run only on mount
206 |       // eslint-disable-next-line react-hooks/exhaustive-deps
207 |     }, []);
208 | 
209 |     // ------------------ Height update
210 |     useEffect(() => {
211 |       if (height !== prevHeight.current && contentElement.current) {
212 |         showContent(contentElement.current, prevHeight.current);
213 | 
214 |         // Cache content height
215 |         contentElement.current.style.overflow = 'hidden';
216 |         const contentHeight = contentElement.current.offsetHeight;
217 |         contentElement.current.style.overflow = '';
218 | 
219 |         // set total animation time
220 |         const totalDuration = duration + delay;
221 | 
222 |         let newHeight: Height;
223 |         let timeoutHeight: Height;
224 |         let timeoutOverflow: Overflow = 'hidden';
225 |         let timeoutUseTransitions: boolean;
226 | 
227 |         const isCurrentHeightAuto = prevHeight.current === 'auto';
228 | 
229 |         if (typeof height === 'number') {
230 |           // Reset negative height to 0
231 |           newHeight = height < 0 ? 0 : height;
232 |           timeoutHeight = newHeight;
233 |         } else if (isPercentage(height)) {
234 |           // If value is string "0%" make sure we convert it to number 0
235 |           newHeight = height === '0%' ? 0 : height;
236 |           timeoutHeight = newHeight;
237 |         } else {
238 |           // If not, animate to content height
239 |           // and then reset to auto
240 |           newHeight = contentHeight; // TODO solve contentHeight = 0
241 |           timeoutHeight = 'auto';
242 |           timeoutOverflow = undefined;
243 |         }
244 | 
245 |         if (isCurrentHeightAuto) {
246 |           // This is the height to be animated to
247 |           timeoutHeight = newHeight;
248 | 
249 |           // If previous height was 'auto'
250 |           // set starting height explicitly to be able to use transition
251 |           newHeight = contentHeight;
252 |         }
253 | 
254 |         // Animation classes
255 |         const newAnimationStateClassNames = [
256 |           stateClasses.current.animating,
257 |           (prevHeight.current === 'auto' || height < prevHeight.current) &&
258 |             stateClasses.current.animatingUp,
259 |           (height === 'auto' || height > prevHeight.current) &&
260 |             stateClasses.current.animatingDown,
261 |           timeoutHeight === 0 && stateClasses.current.animatingToHeightZero,
262 |           timeoutHeight === 'auto' &&
263 |             stateClasses.current.animatingToHeightAuto,
264 |           typeof timeoutHeight === 'number' && timeoutHeight > 0
265 |             ? stateClasses.current.animatingToHeightSpecific
266 |             : null,
267 |         ]
268 |           .filter((v) => v)
269 |           .join(' ');
270 | 
271 |         // Animation classes to be put after animation is complete
272 |         const timeoutAnimationStateClasses = getStaticStateClasses(
273 |           stateClasses.current,
274 |           timeoutHeight
275 |         );
276 | 
277 |         // Set starting height and animating classes
278 |         // When animating from 'auto' we first need to set fixed height
279 |         // that change should be animated
280 |         setCurrentHeight(newHeight);
281 |         setOverflow('hidden');
282 |         setUseTransitions(!isCurrentHeightAuto);
283 |         setAnimationStateClassNames(newAnimationStateClassNames);
284 | 
285 |         // Clear timeouts
286 |         clearTimeout(timeoutID.current as Timeout);
287 |         clearTimeout(animationClassesTimeoutID.current as Timeout);
288 | 
289 |         if (isCurrentHeightAuto) {
290 |           // When animating from 'auto' we use a short timeout to start animation
291 |           // after setting fixed height above
292 |           timeoutUseTransitions = true;
293 | 
294 |           // Short timeout to allow rendering of the initial animation state first
295 |           timeoutID.current = setTimeout(() => {
296 |             setCurrentHeight(timeoutHeight);
297 |             setOverflow(timeoutOverflow);
298 |             setUseTransitions(timeoutUseTransitions);
299 | 
300 |             // ANIMATION STARTS, run a callback if it exists
301 |             onHeightAnimationStart?.(timeoutHeight);
302 |           }, 50);
303 | 
304 |           // Set static classes and remove transitions when animation ends
305 |           animationClassesTimeoutID.current = setTimeout(() => {
306 |             setUseTransitions(false);
307 |             setAnimationStateClassNames(timeoutAnimationStateClasses);
308 | 
309 |             // ANIMATION ENDS
310 |             // Hide content if height is 0 (to prevent tabbing into it)
311 |             hideContent(
312 |               contentElement.current,
313 |               timeoutHeight,
314 |               disableDisplayNone
315 |             );
316 |             // Run a callback if it exists
317 |             onHeightAnimationEnd?.(timeoutHeight);
318 |           }, totalDuration);
319 |         } else {
320 |           // ANIMATION STARTS, run a callback if it exists
321 |           onHeightAnimationStart?.(newHeight);
322 | 
323 |           // Set end height, classes and remove transitions when animation is complete
324 |           timeoutID.current = setTimeout(() => {
325 |             setCurrentHeight(timeoutHeight);
326 |             setOverflow(timeoutOverflow);
327 |             setUseTransitions(false);
328 |             setAnimationStateClassNames(timeoutAnimationStateClasses);
329 | 
330 |             // ANIMATION ENDS
331 |             // If height is auto, don't hide the content
332 |             // (case when element is empty, therefore height is 0)
333 |             if (height !== 'auto') {
334 |               // Hide content if height is 0 (to prevent tabbing into it)
335 |               hideContent(
336 |                 contentElement.current,
337 |                 newHeight,
338 |                 disableDisplayNone
339 |               ); // TODO solve newHeight = 0
340 |             }
341 |             // Run a callback if it exists
342 |             onHeightAnimationEnd?.(newHeight);
343 |           }, totalDuration);
344 |         }
345 |       }
346 | 
347 |       prevHeight.current = height;
348 | 
349 |       return () => {
350 |         clearTimeout(timeoutID.current as Timeout);
351 |         clearTimeout(animationClassesTimeoutID.current as Timeout);
352 |       };
353 | 
354 |       // This should be explicitly run only on height change
355 |       // eslint-disable-next-line react-hooks/exhaustive-deps
356 |     }, [height]);
357 | 
358 |     // ------------------ Render
359 | 
360 |     const componentStyle: CSSProperties = {
361 |       ...style,
362 |       height: currentHeight,
363 |       overflow: overflow || style?.overflow,
364 |     };
365 | 
366 |     if (useTransitions && applyInlineTransitions) {
367 |       componentStyle.transition = `height ${duration}ms ${easing} ${delay}ms`;
368 | 
369 |       // Include transition passed through styles
370 |       if (style?.transition) {
371 |         componentStyle.transition = `${style.transition}, ${componentStyle.transition}`;
372 |       }
373 | 
374 |       // Add webkit vendor prefix still used by opera, blackberry...
375 |       componentStyle.WebkitTransition = componentStyle.transition;
376 |     }
377 | 
378 |     const contentStyle: CSSProperties = {};
379 | 
380 |     if (animateOpacity) {
381 |       contentStyle.transition = `opacity ${duration}ms ${easing} ${delay}ms`;
382 |       // Add webkit vendor prefix still used by opera, blackberry...
383 |       contentStyle.WebkitTransition = contentStyle.transition;
384 | 
385 |       if (currentHeight === 0) {
386 |         contentStyle.opacity = 0;
387 |       }
388 |     }
389 | 
390 |     // Check if user passed aria-hidden prop
391 |     const hasAriaHiddenProp = typeof divProps['aria-hidden'] !== 'undefined';
392 |     const ariaHidden = hasAriaHiddenProp
393 |       ? divProps['aria-hidden']
394 |       : height === 0;
395 | 
396 |     return (
397 |       <div
398 |         {...divProps}
399 |         aria-hidden={ariaHidden}
400 |         className={`${animationStateClassNames} ${className}`}
401 |         style={componentStyle}
402 |         ref={ref}
403 |       >
404 |         <div
405 |           className={contentClassName}
406 |           style={contentStyle}
407 |           ref={(el: HTMLDivElement) => {
408 |             contentElement.current = el;
409 | 
410 |             if (contentRef) {
411 |               contentRef.current = el;
412 |             }
413 |           }}
414 |         >
415 |           {children}
416 |         </div>
417 |       </div>
418 |     );
419 |   }
420 | );
421 | 
422 | export default AnimateHeight;
423 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | import { spawn } from 'node:child_process';
 2 | 
 3 | const server = spawn('npm', ['run', 'start:test']);
 4 | 
 5 | server.stdout.on('data', (data) => {
 6 |   console.log(`server stdout: ${data}`);
 7 | 
 8 |   const cypress = spawn('npm', ['run', 'cypress:run'], { stdio: 'inherit' });
 9 | 
10 |   cypress.on('close', (code) => {
11 |     console.log(`cypress process exited with code ${code}`);
12 |     server.exitCode = 0;
13 |     server.kill('SIGINT');
14 |   });
15 | });
16 | 
17 | // server.stderr.on('data', (data) => {
18 | //   console.error(`server stderr: ${data}`);
19 | // });
20 | 
21 | server.on('close', (code) => {
22 |   console.log(`server process exited with code ${code}`);
23 | });
24 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport"
 7 |     content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 8 | 
 9 |   <title>Tests</title>
10 | 
11 |   <link rel="stylesheet" href="/output/test.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo" class="content"></div>
16 | 
17 |   <script src="/output/test.js"></script>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/test/test.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #fdfdfd;
 3 | }
 4 | 
 5 | .content {
 6 |   position: relative;
 7 |   margin: 0 auto;
 8 |   padding: 0 20px;
 9 |   max-width: 840px;
10 | }
11 | 
12 | .demo {
13 |   outline: 1px solid #ddd;
14 | }
15 | 
16 | .demo-content {
17 |   padding: 20px 20px 0;
18 |   background: #fff;
19 | }
20 | 


--------------------------------------------------------------------------------
/test/test.tsx:
--------------------------------------------------------------------------------
  1 | import React, { StrictMode, useState } from 'react';
  2 | import { createRoot } from 'react-dom/client';
  3 | 
  4 | import AnimateHeight, { Height } from '../src/index';
  5 | 
  6 | const DemoContent = () => {
  7 |   return (
  8 |     <div className="demo-content">
  9 |       <p>
 10 |         It looked serious, but we in California, like everywhere else, were not
 11 |         alarmed. We were sure that the bacteriologists would find a way to
 12 |         overcome this new germ, just as they had overcome other germs in the
 13 |         past. But the trouble was the astonishing quickness with which this germ
 14 |         destroyed human beings, and the fact that it inevitably killed any human
 15 |         body it entered. No one ever recovered. There was the old Asiatic
 16 |         cholera, when you might eat dinner with a well man in the evening, and
 17 |         the next morning, if you got up early enough, you would see him being
 18 |         hauled by your window in the death-cart. But this new plague was quicker
 19 |         than that&mdash;much quicker.
 20 |       </p>
 21 |       <input className="form-control" type="text" placeholder="Focus test" />
 22 |       <p>
 23 |         From the moment of the first signs of it, a man would be dead in an
 24 |         hour. Some lasted for several hours. Many died within ten or fifteen
 25 |         minutes of the appearance of the first signs.
 26 |       </p>
 27 |       <p>
 28 |         The heart began to beat faster and the heat of the body to increase.
 29 |         Then came the scarlet rash, spreading like wildfire over the face and
 30 |         body. Most persons never noticed the increase in heat and heart-beat,
 31 |         and the first they knew was when the scarlet rash came out. Usually,
 32 |         they had convulsions at the time of the appearance of the rash. But
 33 |         these convulsions did not last long and were not very severe. If one
 34 |         lived through them, he became perfectly quiet, and only did he feel a
 35 |         numbness swiftly creeping up his body from the feet. The heels became
 36 |         numb first, then the legs, and hips, and when the numbness reached as
 37 |         high as his heart he died. They did not rave or sleep. Their minds
 38 |         always remained cool and calm up to the moment their heart numbed and
 39 |         stopped. And another strange thing was the rapidity of decomposition. No
 40 |         sooner was a person dead than the body seemed to fall to pieces, to fly
 41 |         apart, to melt away even as you looked at it. That was one of the
 42 |         reasons the plague spread so rapidly. All the billions of germs in a
 43 |         corpse were so immediately released.
 44 |       </p>
 45 |     </div>
 46 |   );
 47 | };
 48 | 
 49 | const Example = () => {
 50 |   const [height1, setHeight1] = useState<Height>(0);
 51 |   const [useCallbacks, setUseCallbacks] = useState<boolean>(false);
 52 | 
 53 |   const [height2, setHeight2] = useState<Height>('auto');
 54 |   const [height3, setHeight3] = useState<Height>('auto');
 55 |   const [delay, setDelay] = useState<number>(0);
 56 | 
 57 |   const options: Height[] = [0, 100, '50%', 'auto'];
 58 |   const delays: number[] = [0, 300, 600, 1000];
 59 | 
 60 |   return (
 61 |     <div style={{ height: '500px' }}>
 62 |       {options.map((option) => {
 63 |         const isActive = height1 === option;
 64 |         return (
 65 |           <button
 66 |             key={option}
 67 |             id={`test-1-${option.toString().replace('%', 'percent')}`}
 68 |             className={`btn btn-sm ${isActive ? 'btn-selected' : ''}`}
 69 |             onClick={() => setHeight1(option)}
 70 |           >
 71 |             {option}
 72 |           </button>
 73 |         );
 74 |       })}
 75 |       <button
 76 |         id="test-1-toggle-callbacks"
 77 |         onClick={() => setUseCallbacks(!useCallbacks)}
 78 |       >
 79 |         Toggle callbacks
 80 |       </button>
 81 |       <AnimateHeight
 82 |         id="test-1"
 83 |         height={height1}
 84 |         className="demo demo-1"
 85 |         onHeightAnimationStart={
 86 |           useCallbacks
 87 |             ? (height) => {
 88 |                 console.warn('Animation started', height);
 89 |               }
 90 |             : undefined
 91 |         }
 92 |         onHeightAnimationEnd={
 93 |           useCallbacks
 94 |             ? (height) => {
 95 |                 console.warn('Animation ended', height);
 96 |               }
 97 |             : undefined
 98 |         }
 99 |       >
100 |         <DemoContent />
101 |       </AnimateHeight>
102 |     </div>
103 |   );
104 | };
105 | 
106 | const container = document.getElementById('demo') as Element;
107 | const root = createRoot(container);
108 | 
109 | root.render(
110 |   <StrictMode>
111 |     <Example />
112 |   </StrictMode>
113 | );
114 | 


--------------------------------------------------------------------------------
/tsconfig-base.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "esModuleInterop": true,
 5 |     "declaration": true,
 6 |     "jsx": "react",
 7 |     "module": "es6",
 8 |     "moduleResolution": "node",
 9 |     "outDir": "dist",
10 |     "pretty": true,
11 |     "resolveJsonModule": true,
12 |     "strict": true
13 |   },
14 |   "exclude": ["node_modules", "dist"],
15 |   "include": ["src"]
16 | }
17 | 


--------------------------------------------------------------------------------
/tsconfig-cjs.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig-base.json",
3 |   "compilerOptions": {
4 |     "module": "commonjs",
5 |     "outDir": "dist/cjs",
6 |     "target": "es2015"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig-demo.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "esModuleInterop": true,
 5 |     "declaration": true,
 6 |     "jsx": "react",
 7 |     "moduleResolution": "node",
 8 |     "pretty": true,
 9 |     "resolveJsonModule": true,
10 |     "strict": true,
11 |     "module": "commonjs",
12 |     "outDir": "docs",
13 |     "target": "es2015"
14 |   },
15 |   "exclude": ["node_modules", "dist"]
16 | }
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig-base.json",
3 |   "compilerOptions": {
4 |     "module": "ES2020",
5 |     "outDir": "dist/esm",
6 |     "target": "ES2015"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------